onclick add/delete 来自本地存储中数据列表的数据

Question

如何通过 jquery 使用添加和删除按钮从数据列表中 add/delete 数据？是否也可以将数据列表存储在本地存储中？

*这背后的原因是它将成为每个用户输入的数据列表。很像 "type it once and store it"

请帮忙，提前致谢。

Answer 1

用户可以使用 jQuery 单击函数和 localStorage.setItem() 以及 localStorage.removeItem()，如果您有兴趣，这里有一个 link，其中包含有关网络存储的更多信息... 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");
});

Answer 2

以防万一其他人想要完成相同的方法，以下是我设法完成此操作的方法：（如果有更好或更有效的方法，请分享它:)

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

onclick add/delete 来自本地存储中数据列表的数据

Onclick add/delete data from datalist in localstorage

jquery

local-storage

html-datalist