JavaScript (часто сокращенно JS) — одна из основ современной веб-инфраструктуры. Это легковесный, интерпретируемый, объектно-ориентированный язык программирования, поддерживающий функции первого класса. JavaScript в основном известен своей реализацией на динамических веб-страницах. Однако благодаря своим особенностям JavaScript также используется и во внебраузерных средах.
В этом руководстве мы подробно рассмотрим два объекта JavaScript: localStorage и sessionStorage.
Обзор localStorage и sessionStorage
Объекты localStorage и sessionStorage предлагаются как часть API веб-хранилища. Это отличный инструмент для локального хранения пар ключ-значение. Использование localStorage и sessionStorage — отличная альтернатива файлам cookie. Этот подход дает некоторые дополнительные преимущества:
- Данные хранятся локально и не могут быть прочитаны сервером. Это устраняет проблемы безопасности, связанные с файлами cookie.
- Это обеспечивает большую емкость хранилища (до 10 МБ для большинства современных браузеров).
- Простой и понятный синтаксис.
Эти объекты поддерживаются всеми современными веб-браузерами, поэтому проблем с совместимостью браузеров не возникнет. Файлы cookie по-прежнему полезны во многих ситуациях, например, для аутентификации. Однако бывают ситуации, когда localStorage и sessionStorage предлагают лучшие решения.
Предварительные требования
Для выполнения шагов, описанных в этом руководстве, вам понадобятся следующие компоненты:
- Правильно настроенный сервер Linux. В этом руководстве демонстрируется настройка собственного сервера Ubuntu на CloudSigma.
- Node.js в качестве среды выполнения JavaScript. Узнайте больше об установке Node.js на Ubuntu здесь.
- Современный веб-браузер, например, Google Chrome или Firefox.
Для демонстрации мы взяли пример веб-страницы с прикрепленным JS-скриптом. Вы можете узнать больше о добавлении JavaScript в HTML-файл здесь:
Что касается текстового редактора, мы будем использовать Visual Studio Code:
В чем разница между localStorage и sessionStorage?
Как localStorage так и sessionStorage происходят из одного и того же API. Их поведение также идентично. Единственная разница заключается в том, как каждый объект обеспечивает сохранение данных. В случае с sessionStorage, данные сохраняются до закрытия окна или вкладки. С localStorage, данные сохраняются до тех пор, пока не будет очищен кэш браузера или пока веб-приложение не очистит их.
В этом руководстве мы в основном сосредоточимся на localStorage. Тем не менее, синтаксис для sessionStorage такой же. Мы покажем, как создавать, читать и обновлять пары ключ/значение с помощью localStorage.
Шаг 1 – Создание записей
Мы можем объявить запись в объекте localStorage с помощью setItem(). Этот метод принимает два аргумента: ключ и соответствующее ему значение. Структура метода выглядит следующим образом:
|
1 |
localStorage.setItem(<ключ>, <значение>) |
В следующем примере мы создали переменную key. Используя метод setItem(), мы установили новый ключ и установили его значение в ‘value’:
|
1 2 |
let key = 'item_1'; localStorage.setItem(key, 'value'); |
Шаг 2 – Чтение записей
Теперь как нам прочитать значение, сохраненное в ключе? Чтобы получить ключ из localStorage, мы будем использовать метод getItem(). Он принимает имя ключа и возвращает значения, сохраненные в ключе. Мы будем использовать метод alert() для отображения полученного содержимого:
|
1 2 |
let myItem = localStorage.getItem(key); alert(myItem); |
Затем откройте веб-страницу в веб-браузере. Она должна показать значение, сохраненное в key:
Шаг 3 – Обновление записей
Как только значение установлено, оно останется таким, пока не будет изменено. Если мы снова используем метод setItem() для того же ключа снова, он автоматически заменит старое значение новым.
В следующем примере ключ сначала инициализируется со значением ‘value’. В следующей строке мы снова вызвали setItem() еще раз и установили значение в ‘new value’:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.setItem(key, 'new value'); let myItem = localStorage.getItem(key); alert(myItem); |
Давайте посмотрим, что произойдет при запуске этого кода в браузере:
Как мы видим, значение ключа установлено в ‘новое значение’.
Шаг 4 – Удаление записей
Если в localStorage (а также в sessionStorage ) есть несколько записей, которые больше не нужны, рекомендуется очистить их после этого. Это освобождает больше места для последующего использования. Приложение также становится более эффективным с точки зрения использования памяти.
Чтобы удалить запись из localStorage, существует специальный метод removeItem(). Он принимает ключ в качестве аргумента и удаляет его из localStorage пула данных:
|
1 |
localStorage.removeItem(<key_to_remove>) |
Давайте реализуем это в нашем скрипте:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.removeItem(key); let myItem = localStorage.getItem(key); alert(myItem); |
При запуске вывод содержит null, так как для не существует значенияключа:
Шаг 5 – Очистка записей
В предыдущем примере мы удалили только один ключ. Однако localStorage позволяет очистить все сохраненные элементы за один шаг. Чтобы очистить все записи, localStorage предлагает метод clear(). Он не принимает аргументов:
|
1 |
localStorage.clear(); |
Применим метод на практике:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.clear(); let myItem = localStorage.getItem(key); alert(myItem); |
Как и прежде, он удаляет все записи из localStorage, поэтому при попытке получить доступ к значению ключа, возвращается null:
Шаг 6 – Работа с JSON
-
Сохранение объектов и массивов
Объекты localStorage и sessionStorage могут хранить только строковые значения. Однако иногда вам придется работать с объектами или массивами. В этом случае нам нужно преобразовать их в строку.
В JavaScript есть функция JSON.stringify() которая принимает массив/объект и преобразует его в строки. В этой статье представлен краткий обзор формата JSON. Для получения более подробного руководства вы можете прочитать JSON в JavaScript.
В этом примере мы создали объект sampleObj с двумя полями name и location. Мы преобразуем его в строку и сохраним в ключе:
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = localStorage.getItem(key); alert(myItem); |
Здесь выводом будет строка, содержащая данные объекта:
-
Чтение объектов и массивов
При сохранении мы преобразовали объекты и массивы в строки. Мы также можем взять эту строку и преобразовать ее обратно в исходный формат. Для этого мы будем использовать метод JSON.parse(). Он принимает строку и преобразует ее обратно в формат JSON:
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = JSON.parse(localStorage.getItem(key)); alert(JSON.stringify(myItem, null, " ")); |
Что касается вывода, мы повторно преобразовали его в строку и отформатировали для лучшего визуального восприятия:
Шаг 7 – Проверка наличия элемента в localStorage
В этом разделе мы покажем простой тест, позволяющий определить, доступны ли localStorage и sessionStorage содержат ли они какие-либо элементы или нет. Используя простой if оператор, мы можем проверить длину localStorage или sessionStorage. Если элементы есть, длина будет больше 0.
Сначала реализуйте следующий пример:
|
1 2 3 4 5 6 7 8 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ alert('true'); } else{ alert('false'); } |
В данном случае результатом будет ‘true’, так как существует один ключ в localStorage:
Шаг 8 – Перебор элементов
Объекты localStorage и sessionStorage хранят ключи в массивоподобной структуре. Они не поддерживают метод forEach, поэтому нам придется использовать классический метод с циклом for для перебора каждого элемента.
В следующем примере мы проверим, является ли localStorage пустым или нет. Если он не пуст, мы переберем каждый элемент:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ for(i = 0; i < localStorage.length; i++){ let key = localStorage.key(i); let myItem = localStorage.getItem(key); alert(key); } } else{ alert('false'); } |
Результат покажет все элементы один за другим:
Шаг 9 – Проверка поддержки браузером
Мы можем проверить поддержку localStorage (и sessionStorage), проверив, доступны ли они в объекте window. Простого оператора if будет достаточно:
|
1 2 3 4 5 6 |
if(window.localStorage){ alert(true); } else{ alert(false); } |
Запустите код в веб-браузере:
Заключение
В этом руководстве было показано, как использовать объекты localStorage и sessionStorage в JavaScript для хранения пар ключ/значение в браузере. С их синтаксисом гораздо проще работать. Мы показали, как создавать, удалять и обновлять пары ключ/значение. Мы также рассмотрели хранение объектов и массивов путем их преобразования в строки (и наоборот).
Чтобы еще больше углубить свои знания JavaScript, вы можете ознакомиться со следующими руководствами в нашем блоге:
- Основы JavaScript: как работать с датой и временем
- JavaScript: руководство по индексации, разделению и манипулированию строками
- Работа с JavaScript: как работают классы
- Работа с JavaScript: как работают прототипы и наследование
Приятного программирования!
Комментарии
Комментариев пока нет. Будьте первым.