Question

编织：https://codepen.io/anon/pen/BZVdaM?editors=0010

我使用LocalStorage来记住 input[type=text] 元素的状态。我能够推送到JSON罚款

{"website": "value","behance": "value","dribbble": "value"}

但是，我现在的问题是我在页面加载的输入中填充保存的数据时遇到了困难。

首次运行时，返回的字符串不应该在它之外引用;另外，我注意到在第二次运行后它不会显示任何已保存的数据。

以下是Chrome开发者工具的结果（这是在第二次运行之后将文本添加到另一个文本框中）

那么我做错了什么？

＆＃13;

var arr = localStorage.getItem("socialValues") || {};
if ( localStorage.getItem("socialValues")) {
  var savedArrData = JSON.parse(arr);
  $.each(savedArrData, function(key, value) {
    $("[data-social=links] input#" + key).val(value);
  });
}
$("[data-social=links] input").on("change keyup", function() {
  var id = this.id;
  arr[id] = (this.value ? '"' + this.value + '"' : "");
  localStorage.removeItem("socialValues");
  localStorage.setItem("socialValues", JSON.stringify(arr));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="uk-nav uk-nav-default" data-social="links">
  <li>
    <a href="#">
      <span class="uk-margin-small-right" uk-icon="icon: world"></span> 
      <input id="website" class="socialbox" type="text" placeholder="http://yoursite.com/" value="hello world">
    </a>
  </li>
  <li>
    <a href="#">
      <span class="uk-margin-small-right" uk-icon="icon: behance"></span> 
      <input id="behance" class="socialbox" type="text" placeholder="Your behance page">
    </a>
  </li>
  <li>
    <a href="#">
      <span class="uk-margin-small-right" uk-icon="icon: dribbble"></span> 
      <input id="dribbble" class="socialbox" type="text" placeholder="Your dribbble page">
    </a>
  </li>
</ul>

＆＃13;

Answer 1

您的代码中存在多个问题

首次运行时，返回的字符串不应该有引号

这是因为你用多个引号保存字符串。

arr[id] = (this.value ? '"' + this.value + '"' : "");

应该是：

savedArrData[id] = (this.value ? this.value : "");

此外，我注意到在第二次运行后它不会显示任何已保存的数据。

这是因为您错误地加载了初始arr。

var arr = localStorage.getItem("socialValues") || {};

如果本地存储为空，则将对象加载到arr。 localStorage.getItem()会返回string，因此下次加载arr会保留string。这导致：

arr[id] = (this.value ? '"' + this.value + '"' : "");

停止处理下一次加载。

因此，您需要做的是将字符串加载到arr中，将其解析为对象savedArrData，然后仅对该对象起作用。

var obj = localStorage.getItem("socialValues") || "{}";
var savedArrData = JSON.parse(obj);

$.each(savedArrData, function (key, value) {
    $("[data-social=links] input#" + key).val(value);
});

$("[data-social=links] input").on("change keyup", function () {
    var id = this.id;
    savedArrData[id] = (this.value ? this.value : "");
    localStorage.removeItem("socialValues");
    localStorage.setItem("socialValues", JSON.stringify(savedArrData));
});

以下是包含所有更改的working demo

<强>顺便说一句

arr实际上应该将obj命名为对象而不是数组。

Answer 2

当页面加载时，循环浏览从localStorage检索的JSON中的属性并设置相应输入的值：

$(document).ready(function() {
    var json = localStorage.getItem("socialValues") || "{}";
    var savedData = JSON.parse(json);
    $.each(savedData, function(key, value) {
        $("#" + key).val(value);
    });
})

Answer 3

您只需将arr[id] = (this.value ? '"' + this.value + '"' : "");更改为arr[id] = (this.value ? this.value : "");即可。

$("[data-social=links] input").on("change keyup", function() {
  var id = this.id;
  arr[id] = (this.value ? this.value   : "");
  localStorage.removeItem("socialValues");
  localStorage.setItem("socialValues", JSON.stringify(arr));
});

因为您要将存储的对象转换为字符串localStorage.setItem("socialValues", JSON.stringify(savedArrData));，所以在插入本地存储时无需转换。

Answer 4

var arr = localStorage.getItem("socialValues") || {};
if ( localStorage.getItem("socialValues")) {
  var savedArrData = JSON.parse(arr);
  $.each(savedArrData, function(key, value) {
    $("[data-social=links] input#" + key).val(value);
  });
}
$("[data-social=links] input").on("change keyup", function() {
  var id = this.id;
  arr[id] = (this.value ? '"' + this.value + '"' : "");
  localStorage.removeItem("socialValues");
  localStorage.setItem("socialValues", JSON.stringify(arr));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="uk-nav uk-nav-default" data-social="links">
  <li>
    <a href="#">
      <span class="uk-margin-small-right" uk-icon="icon: world"></span> 
      <input id="website" class="socialbox" type="text" placeholder="http://yoursite.com/" value="hello world">
    </a>
  </li>
  <li>
    <a href="#">
      <span class="uk-margin-small-right" uk-icon="icon: behance"></span> 
      <input id="behance" class="socialbox" type="text" placeholder="Your behance page">
    </a>
  </li>
  <li>
    <a href="#">
      <span class="uk-margin-small-right" uk-icon="icon: dribbble"></span> 
      <input id="dribbble" class="socialbox" type="text" placeholder="Your dribbble page">
    </a>
  </li>
</ul>

Answer 5

很少有观察结果：

解析存储在本地存储中的JSON字符串，同时将其分配到arr变量中。
```
var arr = JSON.parse(localStorage.getItem("socialValues")) || {};
```

工作演示

var arr = JSON.parse(localStorage.getItem("socialValues")) || {};

if (localStorage.getItem("socialValues")) {
  var savedArrData = JSON.parse(localStorage.getItem("socialValues"));
  $.each(savedArrData, function(key, value) {
    $("#" + key).val(value);
  });
}

$("[data-social=links] input").on("change keyup", function() {
  var id = this.id;
  arr[id] = (this.value ? this.value : "");
  localStorage.removeItem("socialValues");
  localStorage.setItem("socialValues", JSON.stringify(arr));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="uk-nav uk-nav-default" data-social="links">
  <li>
    <a href="#">
      <span class="uk-margin-small-right" uk-icon="icon: world"></span> 
      <input id="website" class="socialbox" type="text" value="hello world">
    </a>
  </li>
  <li>
    <a href="#">
      <span class="uk-margin-small-right" uk-icon="icon: behance"></span> 
      <input id="behance" class="socialbox" type="text" placeholder="Your behance page">
    </a>
  </li>
  <li>
    <a href="#">
      <span class="uk-margin-small-right" uk-icon="icon: dribbble"></span> 
      <input id="dribbble" class="socialbox" type="text" placeholder="Your dribbble page">
    </a>
  </li>
</ul>

JSON中的LocalStorage TextBox

5 个答案: