Question

如何使用添加和删除按钮通过jquery添加/删除datalist中的数据？是否也可以在localstorage中存储datalist？

*背后的原因是它将成为每用户输入数据主义者。非常喜欢＆＃34;输入一次并存储它＆＃34;

请帮助，提前致谢。

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.setItem（）以及localStorage.removeItem（），如果您感兴趣的话，这里有关于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");
});

Onclick在localstorage中添加/删除datalist中的数据

2 个答案: