Локальное хранилище — руководство для начинающих

Прежде чем приступать к каким-либо объяснениям, нам нужно понять разницу между server side storage и client side storage, когда речь идет о веб-сайтах и ​​приложениях. Серверная сторона означает, что мы храним наши данные на сервере, используя базу данных, клиентская сторона состоит из API-интерфейсов JavaScript, которые позволяют хранить данные на клиенте (в браузере).

ЧТО ТАКОЕ ЛОКАЛЬНОЕ ХРАНИЛИЩЕ?
Проще говоря, local storage можно сравнить с базой данных, за исключением того, что она находится в браузере, а не на сервере. По сути, это огромный объект Javascript, внутри которого мы можем хранить данные в виде key-value пар. Мы можем не только хранить данные, но и удалять или извлекать их (полный список браузеров, у которых есть localStorage, нельзя найти здесь). Данные, которые вы храните в localStorage, никогда не покидают ваш компьютер (не отправляются обратно на сервер, в отличие от cookies, о котором мы поговорим в следующей статье), и в зависимости от браузера вы можете хранить до 5 МБ данных.

С технической точки зрения,

доступное только для чтения свойство localStorage интерфейса window позволяет получить доступ к объекту Storage для источника Document's;
сохраненные данные сохраняются между сеансами браузера.

ЗАЧЕМ ЭТО ИСПОЛЬЗОВАТЬ?
Локальное хранилище позволяет нам кэшировать (хранить) некоторые данные приложения в браузере для последующего использования. Поэтому это очень полезно, если мы хотим ускорить работу приложений (поскольку данные полностью хранятся на клиенте, они не перемещаются между клиентом и сервером при каждом запросе или ответе). Таким образом, мы можем позволить пользователю, например, продолжить игру с того места, где он остановился, или предоставить ему соответствующий контент, основанный на его предыдущем посещении нашего веб-сайта.

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

Существует два типа хранилищ, local и session, но пока единственное различие, которое вы должны помнить, заключается в том, что local storage не имеет срока годности (это означает, что данные останутся там, пока мы не удалим их вручную), тогда как session очищается. как только мы закроем браузер (сеанс).

В этой статье я буду использовать Chrome браузер, но в целом доступ к localStorage любого браузера очень похож. Открываем консоль (F12), переходим на вкладку Application и в меню слева видим Local storage под вкладкой Storage. Что-то вроде этого:

Если мы развернем раскрывающийся список Local storage, мы получим это представление:

У нас есть два столбца, Key и Value, и обычно они заполнены данными, которые я только что удалил перед тем, как сделать снимок экрана.

Мы можем получить доступ к этому объекту storage и заполнить два столбца, используя некоторые специальные методы. Помните, что local storage — это read-only, то есть мы можем добавлять, читать и удалять из него данные, но не можем их изменять (в лучшем случае мы можем перезаписать предыдущее значение ключа путем повторного добавления в хранилище, используя тот же ключ и новое значение, которое мы хотим сохранить). Для доступа мы должны использовать следующий синтаксис:

window.localStorage 
//or 
localStorage

Если мы хотим что-то добавить, мы можем сделать это так:

localStorage.setItem("key", "value");

Чтобы получить доступ к значению, мы пишем это:

localStorage.getItem("key");

И, наконец, мы можем удалить одно конкретное значение:

localStorage.removeItem("key");

Или мы можем очистить все локальное хранилище:

localStorage.clear();

Теперь давайте попробуем написать код. Я буду использовать свою консоль, для простоты. Добавим элемент:

localStorage.setItem("city", "Toronto");

Теперь локальное хранилище выглядит так:

Мы можем добавить столько пар ключ-значение, сколько захотим, если данные не превышают 5MB. Теперь давайте получим значение ключа person, преобразуем его в объект и выведем в консоль:

const result = localStorage.getItem("person");
console.log(result); // returns {"name":"Alan","age":32}
const objectResult = JSON.parse(result);
console.log(objectResult);// returns {name: "Alan", age: 32}

Наконец, давайте удалим только один элемент, а затем очистим все localStorage:

localStorage.removeItem("0");

localStorage.clear();

ЧТО НЕОБХОДИМО ПОМНИТЬ О ЛОКАЛЬНОМ ХРАНИЛИЩЕ

  • это зависит от вкладки, что означает, что каждая вкладка браузера, которую мы открываем, будет иметь разные данные в localStorage (это не применяется, если вкладки имеют одинаковое происхождение (имеют один и тот же домен))
  • некоторые браузеры при использовании в incognito mode не позволяют устанавливать данные в localStorage
  • он синхронный, то есть каждая операция будет выполняться одна за другой (это может работать для небольших проектов, но повлияет на время выполнения более сложных)
  • он может хранить только данные строки данных (это хорошо для небольших проектов, но может быть громоздким для serialize данных в сложных)

ОЧЕНЬ ВАЖНО ЗАПОМНИТЬ
Локальное хранилище ни при каких обстоятельствах не должно использоваться для хранения конфиденциальной информации (например, паролей или личных данных), поскольку данные внутри него могут быть доступны из любого места на странице ( он не имеет реальной защиты и подвержен межсайтовому скриптингу).