JavaScript: Руководство по localStorage

Что такое localStorage?

Представьте, что вы заполняете онлайн-форму, а ваше устройство отключается от интернет-соединения. Вы заполнили свой имя и возраст; всё что вам осталось заполнить, это название вашей страны и пол. Вы заполняете их, пока всё ещё отключены от Wi-Fi. В момент повторного подключения к Wi-Fi вы отправляете заполненную форму.

Когда вы ввели название своей страны и пол без подключения к Интернету, заметили ли вы, что снова можете войти в систему, не потеряв информацию? Это localStorage.

Window.localStorage — свойство только для чтения, которое хранит данные в веб-браузере без использования серверного языка программирования. Используется только JavaScript. Эти данные явно хранятся в домене и используемом протоколе. Кроме того, информация хранится в виде ключ-значение в SQLite файле, расположенном в подкаталоге профиля пользователя.

Среди его применений — хранение содержимого корзины покупок, информация о входе на веб-сайт и отслеживание включил ли пользователь тёмный режим. Это связано с тем, что данные, хранящиеся в localStorage, не имеют срока хранения. Кроме того, он продолжает хранить данные после закрытия браузера.

Не рекомендуется использовать localStorage для хранения конфиденциальной информации, поскольку он подвержен атакам с использованием межсайтовых сценариев (XSS) и другим атакам на основе JavaScript. Кроме того, данные localStorage для документа загруженного в сеансе для приватного просмотра или инкогнито, очищаются после закрытия последней приватной вкладки.

Преимущества localStorage

Есть много преимуществ использования localStorage. В начале списка находится его способность сохранять данные даже после закрытия браузера. Далее приведён список некоторых его преимуществ:

• Данные хранятся используя пары ключ-значение.
• Данные не имеют срока хранения.
• Информация хранится на стороне клиента.
• Данные не удаляются автоматически, если не используется JavaScript код.
• Даже после закрытия браузера данные сохраняются.
• Не требуется отправка данных с каждым HTTP-запросом.
• Может хранить до 5 МБ данных.

Недостатки localStorage

Использование localStorage имеет не только преимущества, но и недостатки. Вот некоторые из них:

• Не следует использовать для хранения личной и важной информации, поскольку localStorage подвержен атакам с использованием межсайтовых сценариев (XSS).
• Нет защиты данных, что делает их доступным любому коду.
• Может содержать только строки, но данные можно сериализовать с помощью JSON.stringify().
• Данные не доступны из разных доменов или поддоменов.

Различия между Cookie и localStorage

Файлы Cookie — это просто данные, хранящиеся в небольших текстовых файлах на вашем устройстве. Они поддерживают состояние пользователя и запоминают информацию о пользователе на всех веб-страницах. Файлы cookie и localStorage имеют общие характеристики, но что их отличает? Вот различия между файлами cookie и localStorage:

Синтаксис localStorage

Синтаксис localStorage в JavaScript:

windows.localStorage;

// или

localStorage;

Методы localStorage

У localStorage 4 метода для работы с данными:

• setItem(): Этот метод позволяет сохранить данные в localStorage. Он берёт пару ключ-значение и добавляет её в localStorage.

  localStorage.setItem(key, value);

• getItem(): Метод считывает данные из localStorage. Принимает в качестве аргумента ключ и возвращает соответствующее значение.

  let foodItem = localStorage.getItem(key);

• removeItem(): Удаляет данные из localStorage. Получая ключ — удаляет соответствующую пару ключ-значение

  localStorage.removeItem(key);

• clear(): Метод удаляет данные в localStorage для данного домена.

  localStorage.clear();

Применение localStorage

Лучший способ научиться — написать код и посмотреть, как всё работает. Мы будем использовать четыре метода, чтобы понять, как они работают. Запустите браузер и консоль в Инструментах разработчика (обычно это клавиша F12 или Ctrl + Shift + i).

В консоли введите localStorage и получите текущие сохранённые данные (изначально они пусты).

localStorage;
Storage {length: 0}

Введите localStorage.setItem('myKey', 'testValue'). Значение строки testValue сохранится в ключе myKey:

localStorage.setItem('myKey', 'testValue');
undefined

undefined означает, что ни какие данные не были возвращены. Введите localStorage снова и увидите сохранённые данные.

localStorage;
Storage {myKey: 'testValue', length: 1}
    myKey: "testValue"
    length: 1
    >[[Prototype]]: Storage

Введите localStorage.getItem('myKey'), и будет возвращено соответствующее значение:

localStorage.getItem('myKey`);
'testValue'

Введите localStorage.removeItem('myKey') для удаления соответствующей пары ключ-значение:

localStorage.removeItem('myKey');
undefined

undefined означает, что никакое значение не было возвращено, показывая, что пара ключ-значение была очищена. Для подтверждения введите localStorage. Возвращаемая длинна равна 0.

localStorage;
Storage {length: 0}

Введите localStorage.clear() для очистки localStorage вашего домена:

localStorage.clear();
undefined

Заключение

В этой статье мы рассмотрели localStorage и способы его использования. Подумайте о том, что бы добавить этот инструмент в свой код!