Как использовать local storage для хранени JSON вместо кук

local storage это новая фишка в html5

это те же куки, только можно у пользователя хранить 10 мб and up и удалить их не так просто, т.к. по умолчанию в настройках браузера они не помечены для удаления. В отличии от обычных кук которые могут хранить до 4кб и всего их максимум до 50 на сайт, в зависимости от браузеров.

Достучаться до localstorage можно используя javascript в хтмл коде.

 
var lsData = localStorage.getItem("имя_куки"); // получаем инфу
lsData = JSON.parse(lsData); // данные храняться в джейсон формате, поэтому перекодируем их в обычный массив
 

Теперь с этим массивом lsData можно работать.

Сохранить обратно в local storage можно так:

 
localStorage.setItem("имя_куки", JSON.stringify (lsData)); // массив перекодируем обратно в формат json
 

 Кроме объекта localStorage есть также объект sessionStorage. Работа с ним осуществляется так же, единственное отличие в том, что все данные из него автоматически уничтожаются после закрытия браузера или вкладки с сайтом. Ну, а localStorage хранит данные длительное время, пока эти данные не будут удалены скриптом, или пользователь браузера очистит локальное хранилище с помощью настроек.