Beste Möglichkeit zum Speichern von lokalem Speicher?

Question

Ich habe einen Start zu einer Aufgabenliste gemacht. Ich habe es einen Artikel hinzufügen, wenn Sie einen Artikel einreichen.

Ich möchte jetzt lokalen Speicher hinzufügen, wenn Sie die Seite aktualisieren, so dass die Elemente im Browser gespeichert werden.

Ich muss natürlich alle Zeiten speichern, wenn die Seite aktualisiert wird, aber weil meine Elemente nur auf Klick aktualisieren Ich bin mir nicht sicher, wie Sie diese Funktionsdaten außerhalb der Funktion greifen und die Elemente speichern.

Irgendwelche Ideen?

Prost

JS Fiddle: https://jsfiddle.net/x1bj8mfp/

// When submit item 
var submit = document.getElementById('form'); 
submit.addEventListener('submit', addItem); 

var items = []; 

var itemValues = document.getElementById('items'); 
var listContainer = document.createElement('ul'); 
itemValues.appendChild(listContainer); 

// Add item 
function addItem(e) { 
    e.preventDefault(); 
    var item = this.querySelector('[name=item]'); 
    var itemValue = item.value; 
    items.push(itemValue); 
    item.value = ''; 

    // Output items 
    var listItems = document.createElement('li'); 
    listItems.innerHTML = itemValue; 
    listContainer.appendChild(listItems); 
} 

Answer 1

Sie könnten das gesamte Array auf einen lokalen Speicher schreiben, wenn Sie ein Element hinzu:

localStorage.setItem('items', JSON.stringify(items)); 

Dann auf Seite laden Sie lesen würde vom lokalen Speicher das Array und weisen Sie es zurück zu Ihrer Variablen, oder setzen Sie es auf [] (wie jetzt), wenn nichts im lokalen Speicher ist e, und dann diese Elemente angezeigt werden:

var items = JSON.parse(localStorage.getItem('items')) || []; 
items.forEach(function (itemValue) { 
    var listItems = document.createElement('li'); 
    listItems.textContent = itemValue; 
    listContainer.appendChild(listItems); 
}); 

Diese aktualisierte JSFiddle hat dieser Code enthalten.

Natürlich benötigen Sie eine Funktion, um auch Elemente zu löschen, sonst können Sie nur Ihre Liste vergrößern.

Answer 2

Hier ist eine vollständige Lösung für Sie. Beachten Sie, dass das Code-Snippet aufgrund der Cors und Sandbox hier nicht funktioniert. Fügen Sie es einfach in Ihren Code-Editor ein.

var submit = document.getElementById('form'); 
 
submit.addEventListener('submit', addItem); 
 

 
var items = []; 
 

 
var itemValues = document.getElementById('items'); 
 
var listContainer = document.createElement('ul'); 
 
itemValues.appendChild(listContainer); 
 

 

 
//retrieve data after reload 
 
window.onload = function() { 
 
    if (localStorage.userData != undefined) { 
 
    var userData = JSON.parse(localStorage.getItem('userData')); 
 
    for (var i = 0; i < userData.length; i++) { 
 
     var listItems = document.createElement('li'); 
 
     listItems.innerHTML = userData[i]; 
 
     listContainer.appendChild(listItems); 
 
     items = userData; 
 
    } 
 
    } 
 
} 
 

 

 
// Add item 
 
function addItem(e) { 
 
    e.preventDefault(); 
 
    var item = this.querySelector('[name=item]'); 
 
    var itemValue = item.value; 
 
    items.push(itemValue); 
 
    item.value = ''; 
 

 
    // Output items 
 
    var listItems = document.createElement('li'); 
 
    listItems.innerHTML = itemValue; 
 
    listContainer.appendChild(listItems); 
 
    localStorage.setItem('userData', JSON.stringify(items)); 
 

 
}

<main> 
 
    <form id="form"> 
 
    <input class="form-input" type="text" name="item" placeholder="Add item"> 
 
    <input class="btn btn-block" type="submit" value="Submit"> 
 
    </form> 
 
    <div id="items"></div> 
 
    <div id="completed"></div> 
 
</main>

Answer 3

Hier einige hilfreiche kleines Beispiel für die lokale Speicherung

function save() { 
 
    var fieldvalue = document.getElementById('save').value; 
 
    localStorage.setItem('text', fieldvalue); 
 
} 
 

 
function load() { 
 
    var storedvalue = localStorage.getItem('textfield'); 
 
    if (storedvalue) { 
 
    document.getElementById('textfield').value = storedvalue; 
 
    } 
 
} 
 

 
function remove() { 
 
    document.getElementById('textfield').value = ''; 
 
    localStorage.removeItem('textarea'); 
 
}

<body onload="load()"> 
 
    <input type="textarea" id="textfield"> 
 
    <input type="button" value="Save" id="save" onclick="save()"> 
 
    <input type="button" value="remove" id="remove" onclick="clr()"> 
 
</body> 
 
<!--save& run this in local to see local storage-->