Onclick Hinzufügen/Löschen von Daten aus Dataist in LocalStorage

Question

Wie Hinzufügen/Löschen von Daten aus DataServer über jQuery mit Hinzufügen und Löschen-Taste? Wird es auch möglich sein, Datenlisten im lokalen Speicher zu speichern?

* Der Grund dafür ist, dass es pro Benutzer-Eingabe-Dataist sein wird. viel wie "type es einmal und speichern Sie es"

Bitte helfen Sie, Vielen Dank im Voraus.

Answer 1

Nur falls jemand anderes will die gleiche Methode erreichen, Hier ist, wie ich es schaffe dies abziehen: (wenn es eine bessere ist oder eine effiziente Art und Weise Sie es bitte teilen :)

var datarray = []; 

function deldata() { 
    // retrieve stored data (JSON stringified) and convert 
    var storedData = localStorage.getItem("list_data_key"); 
    if (storedData) { 
    datarray = JSON.parse(storedData); 
    } 
    var titleValue = document.getElementById('listxt').value; 
    // Find and remove item from an array 
    var i = datarray.indexOf(titleValue); 
    if (i > -1) { 
    datarray.splice(i, 1); 
    } 
    localStorage.setItem("list_data_key", JSON.stringify(datarray)); 
    datapost(); 
    show(); 

    $('#listxt').val(''); 
} 

function insert() { 
    var titleValue = document.getElementById('listxt').value; 
    datarray[datarray.length] = titleValue; 
    // store array to localstorage 
    localStorage.setItem("list_data_key", JSON.stringify(datarray)); 
    show(); 
    $('#listxt').val(''); 
} 

function show() { 
    var content = "<b>All Elements of the Arrays :</b><br>"; 
    for (var i = 0; i < datarray.length; i++) { 
    content += datarray[i] + "<br>"; 
    } 
    document.getElementById('display').innerHTML = content; 
    datapost(); 
} 

function datapost() { 
    var options = ''; 
    for (var i = 0; i < datarray.length; i++) 
    options += '<option value="' + datarray[i] + '" />'; 
    document.getElementById('bankit').innerHTML = options; 
} 

$(window).load(function() { 
    // retrieve stored data (JSON stringified) and convert 
    var storedData = localStorage.getItem("list_data_key"); 
    if (storedData) { 
    datarray = JSON.parse(storedData); 
    } 
    show(); 
    datapost(); 
}); 

JSFIDDLE

Answer 2

Verwenden jQuery Klickfunktionen und localStorage.setItem() zusammen mit localStorage.removeItem() verwenden können, ist hier ein Link mit weiteren Informationen auf WebStorage wenn Sie interessiert ... https://www.w3schools.com/html/html5_webstorage.asp

HTML:

<button id="add">Add</button> 
<button id="delete">Delete</button> 

jQuery:

$('#add').click(function() { 
    localStorage.setItem("foo", "bar"); 
}); 

$('#delete').click(function() { 
    localStorage.removeItem("foo"); 
});