Web Storage

Последнее обновление: 08.11.2023

Для хранения данных в HTML5 применяется специальный API - Web Storage API, который обеспечивает доступ к внутреннему хранилищу браузера (web storage). Данное хранилище состоит из двух компонентов: session storage и local storage.

Session storage представляет временное хранилище информации, которая удаляется после закрытия вкладки браузера.

Local storage представляет хранилище для данных на постоянной основе. Данные из local storage автоматически не удаляются и не имеют срока действия. Эти данные не передаются на сервер в запросе HTTP. Кроме того, объем local storage составляет в Chrome и Firefox 5 Mб для домена.

Все данные в web storage представляют набор пар ключ-значение. То есть каждый объект имеет уникальное имя-ключ и определенное значение.

Для работы с local storage в javascript используется объект localStorage, а для работы с session storage - объект sessionStorage. Оба этих объектов с точки зрения API похожи и предоставляют аналогичные свойства и методы:

  • length: содержит количество элементов в хранилище

  • clear(): удаляет все элементы из хранилища

  • getItem(key): возвращает определенный элемент, который имеет ключ key

  • key(index): возвращает ключ элемента, который имеет индекс index

  • removeItem(key): удаляет элемент с ключом key

  • setItem(key, value): устанавливает для элемента с ключом key значение value. Если элемент с ключом key уже есть в хранилище, то его значение перезаписывается. Если элемента нет, то он добавляется.

Сохранение данных

Для сохранения данных в хранилище применяется метод setItem(key, value), в который передается ключ и значение элемента. Стоит учитывать, что в качестве значения сохраняются только строки. Например:

localStorage.setItem("email", "tom32@gmail.com");
sessionStorage.setItem("username", "Tom Smith");

В данном случае в localStorage сохраняется элемент с ключом "email" и значением "tom32@gmail.com", а в sessionStorage сохраняется элемент с ключом "username" и значением "Tom Smith".

В некоторых браузерах с помощью специальных инструментов мы можем увидеть сохраненные объекты в local storage и session storage. Например, в Google Chrome мы можем открыть инструменты разработчика и перейти на вкладку Application. И затем в левой части выбрать пункт Storage->Local storage или Session storage:

Local Storage и Session storage в JavaScript

Если сохраняемое значение предстваляет не строку, а какой-то другой тип, то это значение преобразуется в строку с помощью метода toString(). Например:

localStorage.setItem("age", 39);

Здесь значение представляет число, которое перед сохранением преобразуется в строку.

Трудности могут возникнуть с сохранением сложных объектов:

const user ={
	name: "Tom",
	age: 23,
	isMarried: false
};

localStorage.setItem("user", user); //user = [object Object]

Здесь мы пытаемся сохранить объект user. Однако при преобразовании в строку мы получим [object Object]

В этом случае для сохранения можно сериализовать объект в формат JSON:

const user ={
	name: "Tom",
	age: 23,
	isMarried: false
};

localStorage.setItem("user", JSON.stringify(user));

Получение данных

Для получения сохраненных данных надо вызвать метод getItem(), в который передается ключ объекта:

// сохраняем в local storage
localStorage.setItem("email", "tom32@gmail.com");
// получаем обратно из local storage
const login = localStorage.getItem("login"); //tom32@gmail.com

Если были сохранены нестроковые данные, то может потребоваться их преобразование из строк в исходный тип.:

localStorage.setItem("age", 23);
// преобразуем в число
let age = parseInt(localStorage.getItem("age"));
age += 1;
console.log(age); // 24

Если в данном случае не преобразовать значение к числу с помощью parseInt(), то age будет действовать как строка.

Если объект представляет объект, который ранее перед сохранением был преобразован в json, то при обратном получении его можно распарсить с помощью метода JSON.parse():

const tom ={
	name: "Tom",
	age: 23,
	isMarried: false
};

localStorage.setItem("user", JSON.stringify(tom));

// преобразуем в объект
const user = JSON.parse(localStorage.getItem("user"));
console.log(user.name);  // Tom
console.log(user.age);  // 23
console.log(user.isMarried); // false

Удаление

Чтобы удалить объект, применяется метод removeItem(), который принимает ключ удаляемого объекта:

localStorage.removeItem("email");

И для полного удаления всех объектов из localStorage можно использовать метод clear():

localStorage.clear();
Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850