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

Question

这是我的 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>

Answer 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/

Answer 2

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

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

保存：

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"
}

Answer 3

您可能想尝试使用插件，例如这个插件： 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 reader 和 stringifier:

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

Stringify

Check browser

Set Local Storage Item with String

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

Storing JSON array in HTML5 storage not working

html

javascript

json

session-storage