onclick localstorageのデータリストからデータを追加/削除する

Question

追加および削除ボタンを使用してjquery経由でデータリストにデータを追加/削除する方法は？ データリストをlocalstorageに保存することもできますか？

*これは、ユーザーごとの入力データリストになるためです。 「一度入力して保存する」とよく似ています。

ご協力ありがとうございます。

Answer 1

他の誰かが同じ方法を達成したいだけの場合には、ここに私はこれをやってのけるために管理方法は次のとおりです。（良いか効率的な方法があるかどうそれを共有してください:)

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

使用してjQueryのクリック機能とlocalStorage.removeItem（）と一緒にlocalStorage.setItem（）を使用することができ、ここでwebstorageについての詳細とのリンクは、あなたが興味があるなら...だ 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"); 
});