Enregistrer les soumissions précédentes dans le stockage local JavaScript

Question

Je crée un programme JavaScript. Il utilise 3 boîtes de saisie qui affichent ensuite ce que vous tapez dans chaque boîte de saisie dans la page. J'utilise le stockage local pour réimprimer les soumissions précédentes, mais lorsque j'utilise setItem(), il remplace toutes les soumissions précédentes. Sinon, comment puis-je faire cela pour préserver les soumissions antérieures?

J'ai essayé de créer un JSFiddle avec mon code à envoyer avec ce post, mais le code donne une erreur dans la console sur JSFiddle. Cela fonctionne très bien localement. Le code brut et entièrement commenté est collé ci-dessous.

REMARQUE:This post n'est pas un doublon car il traite du stockage de session au lieu du stockage local.

code:

"use strict"; 
 

 
// First we do a self-invoking function that contains everything - there will be nothing 
 
// exposed to the global scope. 
 
(function() { 
 
    var storageArray = []; 
 
    window.onload = retrieve(); 
 

 
    function Credential(name, address, email) { 
 
     this.name = name; 
 
     this.address = address; 
 
     this.email = email; 
 
    } 
 
    var button = document.getElementById("doit"); 
 
    button.onclick = function() { 
 
     /* This function will run when the user clicks on the 
 
     * Save button. */ 
 

 
     //Step #1 - we get values from the form 
 
     var name = document.getElementById("name").value; 
 
     var address = document.getElementById("address").value; 
 
     var email = document.getElementById("email").value; 
 

 
     // Step #2 - you will create a new data object 
 
     var data = { 
 
     name, address, email 
 
     }; 
 

 
     // Step #3 - call on writeRowtoPage() to write your new data object to the page 
 
     writeRowToPage(data, output); 
 
     // Step#4 - Store your object in localStorage (preserving data 
 
     //   that's already in there from prior submissions!) 
 
     storageArray.push(data); 
 
     window.localStorage.setItem("storageArr", JSON.stringify(storageArray)); 
 
    } 
 

 
    /* This function accepts two arguments - 
 
      @dataObject: your data object representing a single 
 
         submission of the data form, which corresponds 
 
         to one row in the table 
 
      @element: the element on the page to which to write the output 
 
    
 
      The function assembles a string of HTML, using the data from 
 
      dataObject. Once the string is complete, it is appended to the 
 
      page using innerHTML. 
 
     */ 
 
    function writeRowToPage(dataObject, element) { 
 
     var s = "<div class=\"info\">"; 
 

 
     s += '<div class="nameDiv">'; 
 
     if (dataObject.name !== 'undefined') { 
 
     s += dataObject.name; 
 
     } 
 
     s += '</div><div class="addrDiv">'; 
 
     if (dataObject.address !== 'undefined') { 
 
     s += dataObject.address; 
 
     } 
 
     s += '</div><div class="emailDiv">'; 
 
     if (dataObject.email !== 'undefined') { 
 
     s += dataObject.email; 
 
     } 
 
     s += '</div></div>'; 
 

 
     element.innerHTML += s; 
 
    } 
 

 

 
    /* Upon page load, look in localStorage for any existing data, create data objects from it, and write those data objects to the page using writeRowToPage(). */ 
 
    var credString = window.localStorage.getItem("storageArr"); 
 
    var credList = JSON.parse(credString); 
 

 
    function retrieve() { 
 
     for (var i = 0; i < credList.length; i++) { 
 
     var newCred = new Credential(credList[i].name, credList[i].address, credList[i].email); 
 
     storageArray.push(newCred); 
 
     writeRowToPage(newCred, 'output'); 
 
     } 
 
    } 
 
    } 
 

 

 
)();

body { 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    font-size: 14px; 
 
    line-height: 1.428571429; 
 
    color: #333; 
 
} 
 
.button { 
 
    border: 1px solid #888888; 
 
    color: #ffffff; 
 
    font-family: Arial; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
    font-style: normal; 
 
    height: 30px; 
 
    width: 82px; 
 
    line-height: 14px; 
 
    padding: .5em; 
 
    text-align: center; 
 
    background-color: #614C26; 
 
} 
 
.button:hover { 
 
    border: 2px solid #000; 
 
} 
 
label { 
 
    display: inline-block; 
 
    width: 5em; 
 
} 
 
.info div { 
 
    display: inline-block; 
 
    width: 10em; 
 
} 
 
.infoHead { 
 
    font-weight: bold; 
 
    border-bottom: 1px solid gray; 
 
    width: 30em; 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 

 
    <link rel="stylesheet" href="css/cscie3.css"> 
 
</head> 
 

 
<body> 
 
    <label for="name">Name</label> 
 
    <input type="text" size="40" id="name"> 
 
    <br> 
 
    <label for="address">Address</label> 
 
    <input type="text" size="40" id="address"> 
 
    <br> 
 
    <label for="email">Email</label> 
 
    <input type="text" size="40" id="email"> 
 
    <br> 
 
    <button id="doit" class="button">Save</button> 
 

 
    <h2>My Records</h2> 
 
    <div id="output"> 
 
    <div class="info infoHead"> 
 
     <div>Name</div> 
 
     <div>Address</div> 
 
     <div>Email</div> 
 
    </div> 
 
    </div> 
 

 
    <script tyle="text/javascript" src="js/hw2b_v3.js"></script> 
 
</body> 
 

 
</html>

Answer 1

C'est parce que chaque page de temps chargé vous obtenez nouveau tableau et définir de nouvelles valeurs dans localStorage. Alors essayez ceci

"use strict"; 

// First we do a self-invoking function that contains everything - there will be nothing 
// exposed to the global scope. 
(function(){ 
    var storageArray = localStorage["storageArr"] ? JSON.parse(localStorage["storageArr"]) : []; 
    window.onload = retrieve(); 
    function Credential (name, address, email) { 
     this.name = name; 
     this.address = address; 
     this.email = email; 
    } 
    var button = document.getElementById("doit"); 
    button.onclick = function(){ 
     /* This function will run when the user clicks on the 
     * Save button. */ 

     //Step #1 - we get values from the form 
     var name = document.getElementById("name").value; 
     var address = document.getElementById("address").value; 
     var email = document.getElementById("email").value; 

     // Step #2 - you will create a new data object 
     var data = {name, address, email}; 

     // Step #3 - call on writeRowtoPage() to write your new data object to the page 
     writeRowToPage(data, output); 
     // Step#4 - Store your object in localStorage (preserving data 
     //   that's already in there from prior submissions!) 
     storageArray.push(data); 
     window.localStorage.setItem("storageArr",JSON.stringify(storageArray)); 
    } 

    /* This function accepts two arguments - 
     @dataObject: your data object representing a single 
        submission of the data form, which corresponds 
        to one row in the table 
     @element: the element on the page to which to write the output 

     The function assembles a string of HTML, using the data from 
     dataObject. Once the string is complete, it is appended to the 
     page using innerHTML. 
    */ 
    function writeRowToPage(dataObject, element) { 
     var s = "<div class=\"info\">"; 

     s+='<div class="nameDiv">'; 
     if (dataObject.name !== 'undefined') { 
      s+=dataObject.name; 
     } 
     s+= '</div><div class="addrDiv">'; 
     if (dataObject.address !== 'undefined') { 
      s+=dataObject.address; 
     } 
     s+= '</div><div class="emailDiv">'; 
     if (dataObject.email !== 'undefined') { 
      s+=dataObject.email; 
     } 
     s+= '</div></div>'; 

     element.innerHTML += s; 
    } 


    /* Upon page load, look in localStorage for any existing data, create data objects from it, and write those data objects to the page using writeRowToPage(). */ 
    var credString = window.localStorage.getItem("storageArr"); 
    var credList = JSON.parse(credString); 
    function retrieve() { 
     for (var i = 0; i < credList.length; i++) { 
      var newCred = new Credential(credList[i].name, credList[i].address, credList[i].email); 
      storageArray.push(newCred); 
      writeRowToPage(newCred, 'output'); 
     } 
    } 
} 


)();