LocalStorage и SessionStorage. Примеры работы

localStorage и sessionStorage - является веб-хранилищем, которое позволяет сохранить некую информацию на компьютере пользователя, подобно файлам cookie, т.е по принципу ключ:значение.

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

Ну и различных примеров, где стоит использовать localStorage, можно привести много.

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

  • Информация не отправляется на сервер при каждом запросе.
  • Позволяет хранить бОльший объем информации (как правило до 5МБ).
  • Более безопасно и работает быстрее.
  • Имеет удобный API.

В чем разница между localStorage и sessionStorage?

  • localStorage хранит информацию постоянно, пока она не будет удалена либо пользователем, либо с помощью JS, то есть прямых ограничений по времени - нет.
  • sessionStorage хранит информацию лишь в течение одного сеанса, пока пользователь не закрыл страницу в браузере.

В остальном же, все одинаково. Даже одинаковы названия свойств и методов, которые отвечают за получение, установку и удаление значений.

Именно поэтому мы будем разбирать примеры используя localStorage, но знайте, что аналогичные свойства и методы есть и у sessionStorage.

Как использовать?

Метод setItem() - добавляет новое или обновляет существующее значение.

localStorage.setItem("username", "Александр");

Запись выше, добавит элемент с ключом username и значением Александр в хранилище localStorage.
Если элемент с ключом username уже существует, то просто будет обновлено его значение.

Метод getItem() - получает значение элемента по ключу.

var myName = localStorage.getItem("username");

Запись выше, запишет в переменную myName значение элемента c ключом username, которое хранится в localStorage. Если такого элемента не будет найдено, то вернется null.

Работаем с JSON.

Иногда требуется сохранить не просто какую-то строку, а целый объект. Как это реализовать?

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

// Создадим некий объект
var obj = {
	str: "Тест",
	arr: [1, 2, 3]
};
// Преобразуем объект в строку JSON
var objStr = JSON.stringify(obj);
// Запишем JSON в localStorage с ключом data
localStorage.setItem("data", objStr);

А с помощью кода ниже, мы можем считать записанное ранее значение и обратно перевести в объект.

// Получим значение в формате JSON, которое мы записали ранее
var objStr2 = localStorage.getItem("data");
// Преобразуем JSON обратно в объект
// Теперь в объекте obj2 будут хранится те же данные, что и в объекте obj.
var obj2 = JSON.parse(objStr2);

Метод removeItem() - удаляет элемент по ключу.

// Удаляем из localStorage элемент c ключом username
localStorage.removeItem("username");

Метод clear() - очищает все хранилище.

// Стираем все данные, которые есть в хранилище
localStorage.clear();

Свойство length - содержит количество хранимых элементов.

// Выведем в консоль количество элементов хранимых в localStorage
console.log("В localStorage хранится " + localStorage.length + " элементов.");

QUOTA_EXCEEDED_ERR - позволит проверить не переполнено ли хранилище.

try {
	// Пытаемся добавить новый элемент. Если хранилище не переполнено, то все успешно добавится, в противном же случае будет выполнен код в блоке catch
	localStorage.setItem("username", "Александр");
} catch (e) {
	if (e == QUOTA_EXCEEDED_ERR) {
		console.log("localStorage переполнен");
	}
}

Заключение

localStorage и sessionStorage имеет хорошую поддержу браузеров, поэтому вы можете использовать его во многих случаях вместо cookie.

Добавить комментарий