Локальное хранилище браузера. localStorage. Как использовать - Веб студия IZIART

Разработка сайтов
индивидуальный дизайн

Главная » JS » Локальное хранилище браузера. localStorage. Как использовать

Локальное хранилище браузера. localStorage. Как использовать

js

Что такое localStorage

Локальное хранилище позволяет хранить данные в виде пары ключ\значение в браузере на стороне клиента. Операции с данными в хранилище осуществляются при помощи JavaScript.

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

Как пользоваться localStorage

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

Основные методы и свойства использования:

setItem(key, value)  /* сохранить пару ключ/значение */
getItem(key)  /* получить данные по ключу key */ 
removeItem(key)  /* удалить данные с ключом key */ 
clear()  /* удалить всё */ 
key(index)  /* получить ключ на заданной позиции */ 
length  /* количество элементов в хранилище */  

Применение на практике:

// установить значение для ключа myData
localStorage.myData = "Hello World";

// получить значение по ключу - myData
alert(localStorage.myData); // Hello World

// удалить ключ myData
localStorage.removeItem("myData");

//очищаем все хранилище
localStorage.clear()
К содержанию ↑

Где посмотреть данные localStorage

Посмотреть данные сохраненные в хранилище можно в браузере в Инструментах разработчика, во вкладке Хранилище -> Локальное хранилище

Размер web хранилища зависит от браузера, в Mozilla Firefox, Google Chrome и Opera — 5 Мбайт на домен и 10 Мбайт в Internet Explorer

Плюсы и факты о localStorage

  • При записи в локальное хранилище данные не отправляются на сервер
  • Все операции выполняются на стороне клиента
  • Данные сохраняются при обновлении страницы и не только
  • Много места для хранения (в среднем от 2 до 5 мб)
  • Хранилище привязано к источнику (домен/протокол/порт)
  • Данные не имеют срока хранения
  • Ключ и Значение должны быть строками
  • Совместно используется между всеми вкладками и окнами с одинаковым источником (url)
  • Легкость использования

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *