LocalStorage представляет собой постоянное хранилище данных, расположенное у пользователя на локальном диске. Таким образом, в нём можно сохранять данные, которые будут доступны веб-приложению даже если пользователь перейдёт на другую страницу сайта, либо даже вовсе покинет страницу и зайдёт через некоторое время.

Данному хранилищу можно найти сотни применений, от интернет-магазина с корзиной и списком желаний до локального блога с постами и комментариями.

Работать с localStorage достаточно просто. По сути это объект класса Storage, доступный как свойство объекта window. Таким образом, его можно получить набрав в консоли браузера window.localStorage или просто localStorage.

К сожалению, на данный момент localStorage поддерживает сохранение только строковых данных, но не объектов JavaScript. Тем не менее, объекты можно сериализовать и сохранить в виде строк (подробнее об этом ниже).

LocalStorage имеет достаточно простой API. Достаточно знать четыре его метода (на самом хватит даже одного).

// Сохранение значения
localStorage.setItem("Ключ", "Значение")
// Получение значения
localStorage.getItem("Ключ")
// Удаление значения
localStorage.removeItem("Ключ")
// Очистка всего хранилища
localStorage.clear()

Первые три метода этого списка можно заменить обычным присваиванием свойств объекту.

// Сохранение значения
localStorage["Ключ"] = "Значение"
// Получение значения
localStorage["Ключ"]
// Удаление значения
delete localStorage["Ключ"]

А вот удалять вручную все добавленные свойства уже не кажется таким удобным. Несмотря на возможность привычного обращения как с объектом, всё же лучше использовать API.

Теперь рассмотрим небольшой пример, как же всё-таки сохранить в localStorage объект, а потом снова его получить в первозданном виде.

// Создадим следующий объект
var obj = { "foo": "bar", "array": [1, 2, 3] }

// Сериализуем его
var sObj = JSON.stringify(obj)
// После этого sObj принимает строковое значение {"foo":"bar","array":[1,2,3]}

// Запишем в localStorage с ключём object
localStorage.setItem("object", sObj)

// Обратимся к localStorage следующим образом
// Хранилище вернёт нашу сериализованную строку {"foo":"bar","array":[1,2,3]}
localStorage.object

// Получим наш сериализованный объект через API
// Одновременно преобразуем к обычному объекту JavaScript
var retObj = JSON.parse(localStorage.getItem("object"))
// В итоге объекты obj и retObj абсолютно одинаковы

Таким образом, это всё, что нужно знать о localStorage. Важно не забывать, что хранить в нём что-то критически важное нельзя, потому что пользователь специально или непреднамеренно может его очистить.

comments powered by Disqus