Ajout de données de stockage local à l'élément body sur Toutes sesions (Fonctionne également avec reload)

Question

friend J'ai un code d'entrée, et je veux l'enregistrer dans un élément du corps. Je peux l'ajouter au corps, mais il disparaît lorsque la page est rechargée

function store(){ 
 
    var nameOfbook = document.getElementById("nameOfbook"); 
 
    var value = localStorage.setItem("nameOfbook", nameOfbook.value); 
 
    var storedValueBockName = localStorage.getItem("nameOfbook"); 
 
    var par = document.createElement('P'); 
 
    par.innerText = storedValueBockName; 
 
    document.body.appendChild(par); 
 
}

<form action="\" class="form-login" method="post" /> 
 
    <input name="text" type="text" id="nameOfbook" required="" placeholder="Book name" /> 
 
    <button onclick="store()" type="button">StoreText</button> 
 
</form>

Answer 1

Cette question demande essentiellement comment récupérer une valeur stockée à partir localStorage.

Donc, vous définissez la valeur dans localStorage, mais lorsque vous rechargez la page, vous devez avoir un script qui vérifie s'il y a une valeur dans localStorage et ajouter ces données à votre page si elle s'y trouve.

Je suggère quelque chose comme:

<script> 
    var setText = function(text) { 
     var par = document.createElement('P'); 
     par.innerText = text; 
     document.body.appendChild(par); 
    } 

    var checkLocalStorage = function() { 
     var value = localStorage.getItem("nameOfbook") 

     if (value) { 
      setText(value) 
     } 
    } 

    checkLocalStorage() 

    function store(){ 
     var nameOfbook = document.getElementById("nameOfbook"); 
     var value = localStorage.setItem("nameOfbook", nameOfbook.value); 
     var storedValueBockName = localStorage.getItem("nameOfbook"); 
     setText(storedValueBockName) 
    } 
</script> 

Alors je me suis déplacé le code qui ajoute le titre à la page dans sa propre fonction afin qu'il puisse être utilisé à la fois par store() et checkLocalStorage(). checkLocalStorage vérifie s'il existe une valeur définie pour nameOfbook et, le cas échéant, transmet cette valeur à setText.

Devrait faire l'affaire.