Хранение данных в браузере с LocalStorage

Автор оригинала: Guest Contributor.

Вступление

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

В этой статье мы обсудим, как разработчики могут хранить данные на клиенте с помощью файлов cookie и насколько локально улучшил этот опыт. Затем мы посмотрим на функции, которые хранят и извлекают данные из LocalStorage. Наконец, мы обсудим, когда целесообразно использовать LocalStorage.

Хранение данных в браузере с куки

Печенье – это текстовые данные, хранящиеся в клиенте. Они традиционно устанавливаются сервером, однако они также могут быть созданы с кодом JavaScript в браузере. Данные в файлах cookie хранятся в виде пар клавиши/значения строк.

Все файлы cookie отправляются на сервер, когда производится HTTP-запрос. Cookies, которые вы делаете с JavaScript, также будут отправлены на сервер, когда производится HTTP-запрос. Это означает, что приложение сервера может непреднамеренно изменить файл cookie, заставляя ваше клиентское приложение вести себя неожиданно.

С помощью файлов cookie можно хранить только максимум 4 КБ данных на клиенте. Для современных интерфейсных приложений этого может быть недостаточно.

Давайте посмотрим, как LocalStorage позволяет нам создавать и сохранять данные на стороне клиента, с гораздо большим количеством хранения, чем предоставляют файлы cookie.

Что такое локальная таблица?

LocalStorage – это файловое хранение ключа/значения, которое доступно в браузере пользователя. Как печенье, LocalStorage может хранить только строковые данные для его клавиш и значений. DataStore доступно только для JavaScript в этом домене.

Примечание : Каждый домен имеет доступ к его локальному хранению данных. Например, LocalStorage используется https://www.stackabuse.com Отдельно от LocalStorage, используемых https://www.reddit.com Отказ

Поддомены и различные HTTP-протоколы (HTTP и HTTPS) имеют независимые хранения данных. Например, локальная табличка, используемая https://my.example.com полностью отдельно от https://example.com Отказ Аналогично, https://twitter.com LocalStorage отдельно от http://twitter.com Отказ

Наличие местных доступных на домен, предотвращает злонамеренный JavaScript, размещенный на других веб-сайтах, от манипулирования или чтения наших клиентских данных, которые используются нашим доменом.

Каждый домен может хранить до 5 МБ данных в LocalStorage. Кроме того, наши данные не отправляются на сервер, когда производится HTTP-запрос.

Данные в LocalStorage не имеют срока действия. Его можно удалить через JavaScript или путем очистки кэша браузера.

Теперь, когда мы знаем, что такое LocalStorage, давайте использовать его API для управления данными в браузере.

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

Мы можем использовать следующие методы в глобальном LocalStorage Объект для управления сбоями клиента:

setiTem ()

Используйте setiTem () Функция для хранения элемента в LocalStorage. Эта функция принимает ключ в качестве первого аргумента и значение в качестве второго аргумента. Как упоминалось ранее, оба должны быть строками.

В консоли вашего браузера давайте добавим элемент нашему LocalStorage :

localStorage.setItem("tech", "JavaScript");

GetITem ()

Используйте GetITem () Функция для извлечения данных из локальной таблички. Эта функция принимает ключ, который использовался при сохранении данных в качестве аргумента.

В вашей консоли давайте вернем и распечатаем значение, которое было сохранено ранее с setiTem () :

let techStack = localStorage.getItem("tech");
console.log(techStack);

Ваша консоль должна печатать «JavaScript».

Убрать предмет()

Используйте RemostItem () Функция для удаления одного элемента от LocalStorage. Вам необходимо предоставить ключ элемента, который вы хотите удалить в качестве аргумента.

Попробуйте это в вашей консоли, чтобы удалить данные, сохраненные с помощью setiTem () :

localStorage.removeItem("tech");

Чтобы подтвердить, что его удалено, попробуйте получить его еще раз:

console.log(localStorage.getItem("tech"));

Консоль выводится «нулевой» как GetITem () Возвращает null Всякий раз, когда он не может получить предмет.

Чисто()

Чтобы удалить все данные, хранящиеся в LocalStorage, используйте Очистить () Функция:

localStorage.clear();

ключ()

ключ () Функция позволяет получить ключ элемента, сохраненного в локальной таблице по его индексу. Браузер создает целочисленный индекс для каждого элемента, добавленного к LocalStorage.

Поскольку мы не генерируем этот индекс, мы не должны использовать индекс для непосредственного извлечения клавиш. Однако мы можем использовать эту функцию, чтобы получить все ключи, хранящиеся в LocalStorage:

for (let i = 0; i < localStorage.length; i++) {
    let storedValue = localStorage.key(i);
    console.log(`Item at ${i}: ${storedValue}`);
}

Используя Длина Свойство LocalStorage, мы переиграем каждый индекс, созданный для печати всех ключей, которые мы сохранили в LocalStorage. Затем мы можем использовать эти ключи с GetITem () Чтобы получить все сохраненные данные.

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

Хранение объектов в LocalStorage

LocalStorage может использовать только строки для его клавиш и значений. Если мы попытаемся хранить какие-либо другие данные, это преобразует его в строку, прежде чем сохранить его. Это может принести некоторое неожиданное поведение, когда мы хотим сохранить объекты JavaScript.

Давайте создадим человек Объект в консоли вашего браузера и сохранить его в LocalStorage:

let person = {
    name: "John",
    age: 22
};

localStorage.setItem("profile", person);

Теперь setiTem () преобразовал бы человек объект к строке. Когда мы извлекаем человек как это:

console.log(localStorage.getItem("profile"));

Наша консоль браузера покажет это:

Объект JavaScript к конверсии строки производит [Объект объекта] Отказ По общему признанию, возвращая строку, которая указывает только на объект, не полезен.

Чтобы правильно хранить объекты JavaScript в LocalStorage, нам сначала нужно преобразовать наш объект на строку JSON.

Мы используем встроенный Json.stringify () Функция для этого. Результирующая строка этой функции будет содержать все свойства нашего объекта JSON. Мы сохраняем вывод этой функции, когда мы используем setiTem () Отказ

Давайте сохраним человек объект после настраивания:

localStorage.setItem("profile", JSON.stringify(person));

Для получения этих данных в качестве объекта нам нужно сделать две вещи. Во-первых, нам нужно использовать GetITem () Чтобы потянуть его от LocalStorage. Затем нам нужно преобразовать строку JSON в объект JavaScript.

Давайте начнем с употребления товара от LocalStorage:

let storageProfileString = localStorage.getItem("profile");
console.log("String saved in LocalStorage", storageProfileString);

Теперь конвертировать строку локальной таблички в объект с Json.parse () и войдите в консоль браузера:

let savedPerson = JSON.parse(storageProfileString);
console.log("Person object:", savedPerson);
console.log("Person's name:", savedPerson.name);

Запуск этого кода даст вам следующий выход:

Обратите внимание на разницу в цвете в консоли, когда мы впервые зарегистрировали строку, когда мы регистрируем объект. Мы также регистрируем Имя Собственность человек Чтобы гарантировать, что свойства объекта все еще доступны.

Теперь, когда у нас есть стратегия расширения использования LocalStorage вне струн, давайте обсудим лучшие практики при использовании его.

Когда использовать LocalStorage

LocalStorage позволяет базовым постоянством на вашем сайте. Обычно используется для сохранения данных, которые были бы удобны для пользователя, даже если браузер был обновлен. Например, многие формы сохраняют ввод пользователя в локальной табличке до тех пор, пока он не будет отправлен.

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

Однако LocalStorage не следует использовать для больших объемов данных. Помимо пределов 5 МБ, который не может быть достаточным для приложений, интенсивных данных, большие данные оказывают затраты на производительность при использовании LocalStorage.

Все функции LocalStorage являются синхронными операциями. Следовательно, если вы сохраняете или извлекаете большой кусок данных, JavaScript должен выполнить эту операцию LocalStorage, прежде чем она сможет выполнить другой код.

Будьте внимательны, что стоимость производительности увеличивается при сохранении крупных объектов JSON. Json.stringify () и Json.parse () Функции также синхронно. Они будут блокировать выполнение JavaScript, пока они не будут завершены.

Никогда не храните конфиденциальную информацию в LocalStorage Отказ Это включает в себя пароли, ключи API, токены аутентификации, такие как JWTS и финансовые данные, такие как номера кредитных карт, чтобы назвать несколько.

Помните, каждый файл JavaScript, который загружен на ваш домен, имеет доступ к LocalStorage. Если вам или ваши зависимости добавляются вредоносным кодом JavaScript, они могут получать пользовательские данные или токены, которые вы используете для аутентификации с API.

Всегда держите конфиденциальные данные на заднем дне.

Заключение

LocalStorage – это хранилище данных в браузерах. Данные хранятся в виде пар клавиши/значения строк, и каждый домен имеет доступ к его локальному.

При хранении объектов JavaScript обязательно корректируйте их в строку с помощью Json.stringify () перед сохранением. При получении данных преобразуйте их на объект с помощью Json.parse () Отказ

При использовании LocalStorage избегайте обработки больших объемов данных, поскольку он может ухудшить производительность, потому что его функции синхронно. Самое главное, будьте уверены, что не хранятся чувствительные данные пользователя или приложения в LocalStorage.

Можете ли вы думать о способах улучшить ваше заявление с LocalStorage?!