在 HTML5 存储中存储 JSON 数组不起作用答案

【问题标题】：Storing JSON array in HTML5 storage not working在 HTML5 存储中存储 JSON 数组不起作用
【发布时间】：2015-06-17 02:40:11
【问题描述】：

这是我的 HTML 代码，我将 json 数组存储在本地存储中。我想稍后随时迭代 json，但它显示它未定义。如何使用 js 遍历存储的 json 数组？

<!DOCTYPE html>
<html>
<head>
<script>
var ob=[
   {
     "id":1,
     "name":"one"
   },
   {
     "id":2,
     "name":"two"
   }
];
function clickCounter() {alert("dsdsd");
    if(typeof(Storage) !== "undefined") {
        if (sessionStorage.ob) {
            sessionStorage.ob = ob;
        } else {
            sessionStorage.ob = undefined;
        }

        alert(sessionStorage.ob[0].id);
        for (var i in sessionStorage.ob)
        {
           alert(sessionStorage.ob[i].id);
        }    

    } else {

    }
}
</script>
</head>
<body>
<button onclick="clickCounter()" type="button">Click me!</button>
</body>
</html>

【问题讨论】：

标签： javascript json html session-storage

【解决方案1】：

你不能存储对象，你必须将它们字符串化然后解析它们。

var ob=[
   {
     "id":1,
     "name":"one"
   },
   {
     "id":2,
     "name":"two"
   }
];

sessionStorage.ob= ob;
console.log(sessionStorage.ob);

sessionStorage.ob= JSON.stringify(ob);
console.log(JSON.parse(sessionStorage.ob));

http://jsfiddle.net/ofLozkhc/

【讨论】：

【解决方案2】：

您可能想尝试使用一个插件，例如这个： https://github.com/joshualat/jquery-local-storage

$.localStorage('key', 'string value')
> true

$.localStorage('key')
> "string value"

$.localStorage('json', {'a': 'b', 'c': 'd'})
> true

$.localStorage('json')['a']
> "b"

$.localStorage('json', {'a': 'b', 'c': 'd', 'e': {'f': 'g'}})
> true

$.localStorage('json')['e']['f']
> "g"

它已经包含一个 JSON 阅读器和字符串化器：

JSON.stringify = JSON.stringify || function (obj) {
  var t = typeof (obj);
  if (t != "object" || obj === null) {
    if (t == "string") obj = '"' + obj + '"';
    return String(obj);
  } else {
    var n, v, json = [], arr = (obj && obj.constructor == Array);

    for (n in obj) {
      v = obj[n]; t = typeof(v);

      if (t == "string") v = '"'+v+'"';
      else if (t == "object" && v !== null) v = JSON.stringify(v);

      json.push((arr ? "" : '"' + n + '":') + String(v));
    }

    return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
  }
};

JSON.parse = JSON.parse || function (str) {
  if (str === "") str = '""';
  eval("var p=" + str + ";");
  return p;
};

如果你愿意，你可以在这里获取你需要的任何东西： https://github.com/joshualat/jquery-local-storage/blob/master/jquery.local-storage.js

字符串化

检查浏览器

用字符串设置本地存储项

【讨论】：

这取决于您是否已经在项目中使用 jQuery。如果你打算用纯 JavaScript 做所有事情，那么 JavaScript 方法应该没问题。 :)

【解决方案3】：

localStorage 与 cookie 一样，用于存储字符串。如果您尝试将复杂对象存储在 storage 中，它将首先被转换为其字符串表示形式。

因此，您需要在保存时对其进行字符串化，并在稍后尝试对其进行迭代时将其解析回复杂对象。

保存：

var obj = {foo: 'bar'};
localStorage.setItem('obj', JSON.stringify(obj)); //<-- saved as JSON string

稍后阅读：

var obj = JSON.parse(localStorage.getItem('obj'));
for (var i in obj) {
    alert(i+' = '+obj[i]); //<-- "foo = bar"
}

【讨论】：

一个快速的问题 - localstorage 将是存储数据而不是存储到会话中的理想替代品吗？
好吧，localStorage 是一种会话数据——它只是存储在客户端而不是服务器端。您的选择应基于数据的敏感性，以及需要访问它的环境。 JS 可以访问保存在 localStorage 上的数据，但服务器端语言不能，但可以访问会话数据。
我认为OP谈到了localStorage和sessionStorage之间的区别。两者都在客户端。 stackoverflow.com/a/15166867/1064270