Для хранения данных в 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:
Если сохраняемое значение предстваляет не строку, а какой-то другой тип, то это значение преобразуется в строку с помощью метода 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();