Onclick ajouter/supprimer des données de datalist dans localstorage

Question

Comment ajouter/supprimer des données de datalist via jquery avec ajouter et supprimer le bouton? Sera-t-il également possible de stocker datalist dans localstorage?

* La raison en est que cela va être par utilisateur-entrée-datalist. un peu comme "tapez-le une fois et stockez-le"

S'il vous plaît, aidez, Merci d'avance.

Answer 1

Juste au cas où quelqu'un d'autre veut accomplir la même méthode, voici comment je parviens à retirer ceci: (s'il y a une meilleure ou de manière efficace s'il vous plaît partager :)

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

utilisation peut utiliser les fonctions de clic jQuery et localStorage.setItem() avec localStorage.removeItem(), voici un lien avec plus d'informations sur WebStorage si vous êtes intéressé ... 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"); 
});