Blog
  • Home
  • About
  • Contact

JavaScript: основы работы с localStorage

Date and time: Dec. 21, 2014, 10:17 p.m. | Category: Программирование, JavaScript

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
Выберите язык:
  • Русский
  • English

  • Programming

    Python C++ JavaScript

    Web development

    Django ASP.NET

    Mobile development

    Windows Phone Android

    Game development

    Unity3d Blender

    Artem Ustimov © 2014