Хранение массива в localStorage с использованием JSON.stringify

Question

Я только что узнал о .makeArray в jquery, и я пытаюсь использовать 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') выбирает все ссылки (HTMLAnchorElement с) на странице.

Элементы - это узлы DOM, определяемые их идентичностью и наличием в документе. Это не простые значения, которые может представлять JSON. Если вы посмотрите на то, что JSON.stringify() возвращает для них, это просто {}: JSON говорит, что все, что он знает об объекте, это то, что это Object.

Нет смысла пытаться поместить Узел в localStorage; что вы ожидаете получить, когда прочитаете хранилище завтра? Объект Node, который был частью документа, который пользователь закрыл и уничтожил вчера?

Если вы хотите запомнить, куда ссылались ссылки, вы должны получить его из их свойств href как String - простой тип значения, который можно безопасно запомнить с помощью localStorage.