LocalStorage на пальцах

Ключевые выводы: localStorage — это встроенное хранилище браузера, которое сохраняет данные между сессиями. Работа с ним сводится к четырём методам: setItem, getItem, removeItem и clear. Лимит — 5 МБ на домен.

Один из наших читателей прислал статью с рассказом о HTML5 LocalStorage в браузерах. Передаём ему слово.

Я постарался написать самое простое и понятное руководство по использованию технологии localStorage. Статья получилась совсем небольшой, в силу того, что и сама технология и средства работы с ней не несут ничего сложного. Для старта вам достаточно чуть-чуть знать JavaScript. Итак, уделите этой статье 10 минут и вы смело сможете добавить себе в резюме строчку «умею работать с localStorage».

Что такое localStorage?

Так выглядит JavaScript-объект:

			var myCar = {
  wheels: 4,
  doors: 4,
  engine: 1,
  name: "Jaguar"
}
		

А так выглядит JSON. Почти так же как обычный js-объект, только все свойства должны быть заключены в кавычки.

			{
   "firstName": "Иван",
   "lastName": "Иванов",
   "address": {
       "streetAddress": "Московское ш., 101, кв.101",
       "city": "Ленинград",
       "postalCode": 101101
   },
   "phoneNumbers": [
       "812 123-1234",
       "916 123-4567"
   ]
}
		

Чтобы понять, что такое localStorage, просто представьте, что где-то у вас в браузере встроен такой объект, которым мы можем пользоваться. При этом данный объект не очищает значения, которые мы туда запишем, если мы перезагрузим страницу или даже совсем закроем браузер.

Вечерний обзор IT-новостей 13 ноября

tproger.ru

Если говорить языком JavaScript, то localStorage — это свойство глобального объекта браузера (window). К нему можно обращаться как window.localStorage или просто localStorage.

Еще стоит сказать, что у браузера существует клон localStorage, который называется sessionStorage. Их разница только в том, что последний хранит данные только для одной вкладки (сессии) и просто очистит свое пространство как только мы закроем вкладку

Давайте посмотрим на него вживую. Например, в Google Chrome вам надо открыть DevTools (F12), перейти на вкладку «Resourses» и на левой панели вы увидите localStorage для данного домена и все значения, что оно содержит.

Кстати, вы должны знать как localStorage работает с доменами. Для каждого домена ваш браузер создает свой объект localStorage, и редактировать или просматривать его можно только на этом домене. Например, с домена mydomain-1.com нельзя получить доступ к localStorage вашего mydomain-2.com.

Зачем нужен localStorage?

LocalStorage нужен для одного — хранить определенные данные между сессиями пользователя. Можно придумать тысячу и одну вещь, которую можно хранить в локальном хранилище браузера. Например, браузерные игры, которые используют его как сохраненку, или записать момент, на котором пользователь остановился при просмотре видео, различные данные для форм и т.д.

Как начать работать с localStorage?

Очень просто.

Работа с localStorage очень напоминает работу с объектами в JavaScript. Существует несколько методов для работы с ним.

Метод который добавляет в localStorage новый ключ со значением (а если такой ключ уже существует, то перезаписывает новым значением). Пишем, например, localStorage.setItem('myKey', 'myValue');

localStorage.setItem('ключ', 'значение')

Берем определенное значение из хранилища по ключу:

Удаляем ключ:

Очищаем все хранилище:

Сейчас вы можете открыть вкладку с localStorage вашего браузера и самостоятельно потренироваться записывать и извлекать данные из этого хранилища. Если что — весь код пишем в js-файл.

			//Добавляем или изменяем значение:
localStorage.setItem('myKey', 'myValue'); //теперь у вас в localStorage хранится ключ "myKey" cо значением "myValue"

//Выводим его в консоль:
var localValue = localStorage.getItem('myKey');
console.log(localValue); //"myValue"

//удаляем:
localStorage.removeItem("myKey");

//очищаем все хранилище
localStorage.clear()

То же самое, только с квадратными скобками:

localStorage["Ключ"] = "Значение" //установка значения
localStorage["Ключ"] // Получение значения
delete localStorage["Ключ"] // Удаление значения
		

Работа с объектами и JSON

Также хочется отметить, что localStorage отлично работает и с вложенными структурами, например, объектами.

			//создадим объект
var obj = {
	item1: 1,
	item2: [123, "two", 3.0],
	item3:"hello"
};

var serialObj = JSON.stringify(obj); //сериализуем его

localStorage.setItem("myKey", serialObj); //запишем его в хранилище по ключу "myKey"

var returnObj = JSON.parse(localStorage.getItem("myKey")) //спарсим его обратно объект
		

Лимиты и обработка ошибок

Вы также должны знать, что браузеры выделяют 5 МБ под localStorage. И если вы его превысите — получите исключение QUOTA_EXCEEDED_ERR. Кстати, c его помощью можно проверять есть ли в вашем хранилище еще место.

			try {
  localStorage.setItem('ключ', 'значение');
} catch (e) {
  if (e == QUOTA_EXCEEDED_ERR) {
   alert('Превышен лимит');
  }
}
		

Вместо заключения

Мне бы хотелось, чтобы из этой небольшой статьи разработчики сделали для себя простой вывод, что данная технология уже вовсю может использоваться у вас на проектах. У нее хорошая стандартизация и отличная поддержка, которая со временем только развивается.

Часто задаваемые вопросы

Чем localStorage отличается от cookies?

localStorage хранит до 5 МБ данных и не отправляет их на сервер с каждым запросом. Cookies ограничены 4 КБ и автоматически передаются серверу в заголовках HTTP. Если данные нужны только на клиенте — используйте localStorage.

Можно ли хранить в localStorage массивы и объекты?

Напрямую — нет, localStorage хранит только строки. Но можно сериализовать объект через JSON.stringify() перед записью и распарсить через JSON.parse() при чтении.

Безопасно ли хранить в localStorage личные данные?

Нет. localStorage доступен любому JavaScript-коду на странице и уязвим для XSS-атак. Никогда не храните в нём токены, пароли или персональные данные. Для чувствительной информации используйте httpOnly cookies.