Utilisation du LocalStorage

Version imprimable

Bonjour, aujourd'hui j'ai encore un soucis.
J'ai un bouton qui au click est censé clear le local Storage, Quand je clique dessus le local storage se vide, mais quand je re entre une valeur dans mon input et que je clique mon bouton pour mettre la valeur dans le Local Storage, l'ancienne valeur réapparaît.
Voici le code JS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var AjoutLocal = document.querySelector('#NameUser');
var LocalItem = document.querySelector('#Local-item');
var LocalSess = document.querySelector('#LocalSess');
AjoutLocal.addEventListener('submit', function(event) {
    event.preventDefault();
    if (LocalItem.value.length < 1) return;
    LocalSess.innerHTML += '<p>' + LocalItem.value + '<p>';
    LocalItem.value = '';
    localStorage.setItem('LocalItem', LocalSess.innerHTML);
    document.getElementById("messageLocation").querySelector("b").innerHTML = localStorage.getItem("LocalItem");
}, false);
var saved = localStorage.getItem('LocalItem');
if (saved) {
    LocalSess.innerHTML = saved;
    document.getElementById("messageLocation").querySelector("b").innerHTML = localStorage.getItem("LocalItem");
}
document.getElementById("annulation").onclick = clear_me;
 
function clear_me() {
    localStorage.clear();
    checkStorage();
}

Code:

<button id="annulation">Annuler la réservation</button>

20/02/2019, 22h35
psychadelic

et #NameUser, #Local-item, #LocalSess, messageLocation, c'est quoi ??
idem pour checkStorage(); que fait cette fonction ?

sinon, j'imagine que AjoutLocal est l'ID d''un formulaire (il y a addEventListener('submit' desuus) ~~ce qui signifie que ta page est rechargée à zéro à chaque submit~~, et je vois pas vraiment l'intérêt ?

Citation:

Envoyé par psychadelic

il y a addEventListener('submit' desuus) ce qui signifie que ta page est rechargée à zéro

:nono: il y a un event.preventDefault();.

Ceci étant, je trouve le code « obscur » et on a du mal à comprendre ce que tu cherches réellement à faire.

Un exemple tout simple pour voir la simplicité d'utilisation du localStorage
Code HTML :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <p> <input type="text" id="item" value="texte"> <input type="text" id="texte" value="du texte"> </p> <p> <button onclick="addLocal()">Add</button> <button onclick="readLocal()">Read</button> <button onclick="removeLocal()">Remove</button> <button onclick="clearLocal()">Clear</button> </p> <p> <span id="local"></span> </p>
Code JS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function addLocal() { var item = document.getElementById("item").value; var text = document.getElementById("texte").value; localStorage.setItem(item, text); } function readLocal() { var item = document.getElementById("item").value; var text = localStorage.getItem(item); document.getElementById("local").innerHTML /*textContent*/ = text || "Null ou pas de donnée présente !"; } function removeLocal() { var item = document.getElementById("item").value; localStorage.removeItem(item); } function clearLocal() { localStorage.clear(); }
Ouvre la console sur Local Storage et regarde ce qui se passe.

Nota : en espérant que tu répondes et que tu ne laisses pas les gens en plan comme dans tes autres discussions ouvertes