使用 JSON.stringify 在 localStorage 中存储数组

Question

我just learned about jquery's .makeArray 我正在尝试使用 JSON.stringify 将数组存储在 localStorage 中，但我得到了意想不到的结果。

这行得通：

var links = {'one': 1, 'two': 2 };
var setstr = JSON.stringify(links);

localStorage.setItem('strlinks', setstr);
var getstr = localStorage.getItem('strlinks');
console.log(getstr); //Returns what's expected - '{"one":1, "two":2}'

这不是：

var links = $.makeArray($('a'));

alert(links); //Returns list of links
var setstr = JSON.stringify(links);

localStorage.setItem('strlinks', setstr);
var getstr = localStorage.getItem('strlinks');
console.log(getstr); //Returns '[]'

关于我做错了什么有什么想法吗？

Answer 1

links 包含循环引用，因此无法序列化为 JSON。 Chrome 5.0.375.99 给出错误：

TypeError: Converting circular structure to JSON

您必须以某种方式删除这些循环引用。当然，这取决于您关心的信息。这是一个简化的版本：

var flatLinks = $.map(links, function(el)
                             {
                              return {href: el.href, text: el.textContent};
                             }); 
var setstr = JSON.stringify(flatLinks);

Answer 2

$('a') 选择页面上的所有链接 (HTMLAnchorElements)。

元素是由它们在文档中的身份和存在定义的 DOM 节点。它们不是 JSON 可以表示的简单值。如果您查看JSON.stringify() 为它们返回的内容，它只是{}：JSON 表示它所知道的关于该对象的所有信息就是它是一个Object。

尝试将节点放在localStorage 中没有任何意义；当你明天读取存储时，你期望得到什么？属于用户昨天关闭并销毁的文档的一部分的 Node 对象？

如果您想记住链接指向的位置，您应该从它们的href 属性中获取它，作为String——localStorage 可以安全记住的简单值类型。