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

Question

我刚学习了jQuery的.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 '[]'

有关我做错了什么的任何想法？

- personaelit

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

- Matthew Flaschen

Answer 2

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

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

尝试将节点放入localStorage中毫无意义；当您明天读取存储时，您期望得到什么？一个节点对象，它是用户昨天关闭并销毁的文档的一部分吗？

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

- bobince

---

也许我走错了方向，但这是为了一个Chrome扩展程序。我的想法是从内容脚本将数组添加到localStorage中，然后当用户单击浏览器图标时，循环遍历链接并在弹出窗口中显示它们。我对Chrome扩展不熟悉，但我理解弹出窗口无法直接访问内容脚本中的变量，因此需要使用本地存储。但我可能完全错了。 - personaelit

一个链接的引用不能放在String中，这是localStorage唯一能存储的东西。但是弹出窗口不需要触及链接本身，对吧？它只需要知道链接指向的URL（href）就可以了，那肯定只是一个String，所以可以被JSON字符串化。虽然我认为你根本不需要使用localStorage。我不知道Chrome怎么样，但大多数浏览器扩展应该没有问题打开一个新窗口并填充一个字符串列表，而无需通过任何类型的localStorage数据库进行中介。 - bobince

您可以将后台页面用作控制器，并从那里访问存储的值。请参阅我的New Tab Redirect代码示例（我在trunk的代码中使用了JSON.stringify）http://code.google.com/p/newtabredirect/ - Joseph Yaduvanshi