如何将数据保存在本地存储中以供进一步使用？答案

【问题标题】：how to save data in localstorage for further use?如何将数据保存在本地存储中以供进一步使用？
【发布时间】：2018-02-12 19:03:48
【问题描述】：

如何在每个 keyup 中将数据保存在 localstorage 中，当我再次搜索时，数据将从 localstorage 中显示，这次不要从 db 发送任何数据请求。

$(document).ready(function () {
  $('#input_id').keyup(function (e) {
    var name = $('#input_id').val();
    var data = name.trim();
    var msg = $('#result');
    msg.empty();

    $.ajax({
      url: "search.php",
      method: "post",
      data: { input: data },
      dataType: "",
      success: function (name) {
      console.log(name);
      var getdata = JSON.parse(name);
      var z = getdata.length;
      for (var j = 0; j < z; j++) {
        if (getdata[j].surname) {
          var show_result = '<span id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</span>';
          msg.append(show_result);
        } else {
          var show_result2 = '<span id="result">' + getdata[j].firstname + '</span>';
          msg.append(show_result2);
        }
      }
    }
  });
});

【问题讨论】：

只需使用localStorage.setItem(key, val) 保存值以及何时获取它localStorage.getItem(key)。
你能帮我检查一下吗，如何修改检查代码是否已经在本地存储中？如果不是，将从数据库中检索数据。
if (localStorage.getItem(<your_key>)) {//exist} else {//do not exist, retrieve from db}
@Sriped 在 ajax 调用之前我应该在哪里添加这个条件？非常感谢
在获取数据值时检查ajax请求之前是否存在，如果在ajax成功回调中不存在则保存值。

标签： javascript trie

【解决方案1】：

使用“localStorage.setItem(key, val)”将数据存储到本地存储，例如

localStorage.setItem("key1_name", username.firstname)

【讨论】：

【解决方案2】：

如 cmets 中所述：

$('#input_id').keyup(function (e) {
  var name = $('#input_id').val();
  var data = name.trim();
  var msg = $('#result');
  msg.empty();
  var localdata = localStorage.getItem('my_key'); 

  if (!localdata || localdata !== data) {
    $.ajax({
      url: "search.php",
      method: "post",
      data: { input: data },
      dataType: "",
      success: function (name) {
        localStorage.setItem('my_key', name);
        console.log(name);
        var getdata = JSON.parse(name);
        var z = getdata.length;
        for (var j = 0; j < z; j++) {
          if (getdata[j].surname) {
            var show_result = '<span id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</span>';
            msg.append(show_result);
          } else {
            var show_result2 = '<span id="result">' + getdata[j].firstname + '</span>';
            msg.append(show_result2);
          }
       }
    }
  } else {
     // do something with local data
  }
...

【讨论】：

@rai 问题在于，一旦您将值保存到 localStorage，您将永远不会再次请求您的数据库。这个应该修好了，但是我让你自己找路；）找不到的话再来这里。
我找不到。你能给我完整的解决方案吗？谢谢
数据无法保存在本地存储中。 eack keyup 它向数据库发送请求以获取结果。
因为每次keyUp都会改变输入，所以每次新的更新都和你localStorage中保存的数据不同。您应该尝试在表单中使用提交操作而不是 keyUp。
当我按下一个键时，所有相关数据都会保存在 localstorage 中。因此，如果我按以前的键，数据将从 localstorge 显示，它不会向数据库请求数据。如果我按新键/字母，如果找不到数据，它将首先检查本地存储，而不是去数据库搜索。非常感谢@条纹

【解决方案3】：

就像@Khan M 所说，使用 localStorage 方法“.setItem(key, value)”来保存数据和“getItem(key)”来检索特定键的值。

据我所见，每个 keyUp 都会生成几个不同的变量，因此您应该能够通过简单地创建一个“val”参数的对象来存储所有这些变量，如下所示：

localStorage.setItem(key, {...});

要检索整个对象：localStorage.getItem(key);

要检索对象内特定属性的值：localStorage.getItem(key.propertyName);

希望您发现此答案有用并祝您好运！

【讨论】：

您好@AlejandroG，欢迎来到 SO，请查看此link 以改进您的格式。