Javascript 本地存储文本框'；JSON中的s

编织：

我使用LocalStorage来记住

input[type=text]

元素的状态。我能推到一个很好的位置

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

但是，我现在的问题是，我很难将保存的数据填充到页面加载的输入中

在第一次运行时，返回的字符串不应包含引号；此外，我注意到在第二次运行后，它不会显示任何保存的数据

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

那么，我做错了什么

var arr=localStorage.getItem（“socialValues”）|{；
if（localStorage.getItem（“socialValue”））{
var savedArrData=JSON.parse（arr）；
$.each（保存数据、函数（键、值）{
$（“[data social=links]输入#”+key）.val（值）；
});
}
$（“[data social=links]input”）。在（“更改键控”，函数（）上{
var id=this.id；
arr[id]=（this.value？“+”this.value+“：”）；
localStorage.removietem（“社会价值”）；
setItem（“socialValues”，JSON.stringify（arr））；
});








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

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

您的代码中有多个问题

在第一次运行时，返回的字符串不应包含引号

这是因为您正在使用多个引号保存字符串

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

应该是：

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

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

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

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

如果本地存储器为空，则将对象加载到
arr
中
localStorage.getItem（）
返回一个
字符串
，因此在下一次加载时
arr
保存一个
字符串
。这导致：

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

停止处理下一个负载

所以，您需要做的是将字符串加载到
arr
，将其解析为一个对象
savedardata
，然后只处理该对象

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));
});

这是一个包含所有更改的列表

顺便说一句

arr
实际上应该被命名为
obj
作为其对象而不是数组。
您只需更改
arr[id]=（this.value？“+this.value+”：”）
to
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));
});

因为，您正在将存储的对象转换为string
localStorage.setItem（“socialValues”，JSON.stringify（savedArrData）），插入本地存储时不需要转换。

var arr=localStorage.getItem（“socialValues”）|{；
if（localStorage.getItem（“socialValue”））{
var savedArrData=JSON.parse（arr）；
$.each（保存数据、函数（键、值）{
$（“[data social=links]输入#”+key）.val（值）；
});
}
$（“[data social=links]input”）。在（“更改键控”，函数（）上{
var id=this.id；
arr[id]=（this.value？“+”this.value+“：”）；
localStorage.removietem（“社会价值”）；
setItem（“socialValues”，JSON.stringify（arr））；
});








很少观察到：


解析存储在本地存储器中的JSON字符串，同时将其分配到
arr
变量中

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



工作演示


var arr=JSON.parse（localStorage.getItem（“socialValues”））|{；
if（localStorage.getItem（“socialValue”））{
var savedArrData=JSON.parse（localStorage.getItem（“socialValues”）；
$.each（保存数据、函数（键、值）{
$（“#”+键）.val（值）；
});
}
$（“[data social=links]input”）。在（“更改键控”，函数（）上{
var id=this.id；
arr[id]=（this.value？this.value:）；
localStorage.removietem（“社会价值”）；
setItem（“socialValues”，JSON.stringify（arr））；
});








var arr=JSON.parse（localStorage.getItem（'socialValues'））|{}
正在从localStorage正确检索保存的JSON数据。您想对这些数据做什么，还不清楚。您是在问如何使用以前存储的值填充页面加载上的输入元素吗？@nnnnnn这是正确的，感谢您做得很好的解释。这有帮助！：）