JavaScript - всё о localStorage и sessionStorage
В этой статье мы познакомимся с хранилищами браузера LocalStorage и SessionStorage. Рассмотрим их назначение, отличие друг от друга, и от cookies, а также самое основное разберём методы JavaScript для работы с ними.
Веб-хранилище. Назначение localStorage и sessionStorage
Веб-хранилище - это данные, хранящиеся локально в браузере пользователя. Существует 2 типа веб-хранилищ:
- LocalStorage;
- SessionStorage.
В них вы можете хранить информацию в формате ключ-значение. Ключ и значение – это всегда строки.
Если мы попытаемся сохранить в значение элемента хранилища другой тип значений, например, объект, то он будет, перед тем как туда записан, преобразован в строку. В данном случае посредством неявного у него вызова метода toString
. Т.е. в значении элемента этих хранилищ кроме строкового типа данных никакого другого содержаться не может.
Отличие между этими хранилищами сводится только к периоду времени, в течение которого они могут хранить данные, помещенные в них:
- SessionStorage – выполняет это в течение определённого промежутка времени (сессии). Закрытие вкладки или браузера приводит их к удалению. При этом данные в SessionStorage сохраняются при обновлении страницы.
- LocalStorage – осуществляет это в течение неограниченного времени. Они сохраняются при перезагрузке браузера и компьютера. Их длительность хранения ничем не ограничена. Но, хоть эти данные могут храниться бесконечно в браузере, обычный пользователь может их очень просто удалить, например выполнив очистку истории (при включенной опции «файлы cookie и другие данные сайтов»).
Хранилище LocalStorage похоже на cookies. Оно также применяется для хранения данных на компьютере пользователя (в браузере). Но кроме общих сходств имеется также и много отличий.
Cookies vs. LocalStorage: В чём разница
Отличия между cookies и LocalStorage:
- по месту хранения (куки и данные LocalStorage хранятся на компьютере пользователя в браузере);
- по размеру (cookies ограничены 4 Кбайт, а размер LocalStorage - 5 Мбайт);
- по включению этих данных в HTTP-заголовок (куки в отличие от данных локального хранилища включаются в состав запроса при отправке его на сервер, а также сервер их может добавлять в ответ при отправке его клиенту; таким образом cookies являются частью HTTP-протокола, и увеличивают объём передаваемых данных от клиента серверу и обратно);
- по доступности данных (печеньки можно прочитать и установить как на сервере, так и на клиенте; на клиенте доступны все куки, кроме тех, у которых установлен флаг
HttpOnly
; LocalStorage доступны только в браузере посредством JavaScript API); - по времени хранения данных (куки хранятся ограниченное время (до конца сеанса или истечения указанной даты), нахождение данных в локальном хранилище не ограничено по времени);
- по удобству использования в JavaScript (работа с LocalStorage в JavaScript организовано намного удобнее чем с cookies);
- по необходимости информирования пользователей Евросоюза (при использовании cookies сайт в ЕС должен получать на это разрешение от пользователей; для данных локального хранилища это не требуется);
- по назначению (куки в основном используются для управления сеансом, персонализации и отслеживания действий пользователя, в то время как LocalStorage применяется в качестве обычного локального хранилища информации на компьютере пользователя).
Что использовать: LocalStorage или cookies? На самом деле, ответ на этот вопрос очень прост. Если вам не нужно отправлять данные с каждым HTTP-запросом на сервер, то в этом случае лучше использовать для хранения данных LocalStorage.
Безопасность данных
Хранилище LocalStorage привязана к источнику (домену, протоколу и порту). Данные, находящиеся в некотором источнике, доступны для всех сценариев страниц этого же источника. Из сценария, находящегося в одном источнике, нельзя получить доступ к данным, определяемым другим источником.
Хранилище SessionStorage ограничена только одной вкладкой браузера. Это означает, что в сценарии, находящемся в одной вкладке, нельзя получить информацию из сессионного хранилища другой вкладки даже у них одинаковые источники.
Итоги
Основные характеристики LocalStorage и SessionStorage:
- данные хранятся в виде пар «ключ-значение»;
- хранить можно только строки;
- если вам необходимо хранить в этих хранилищах массивы и объекты, то сначала вы должны их превратить в строки, например, используя метод
JSON.stringify
. Для преобразования строки обратно в массив или объект, можно использоватьJSON.parse
. Подробнее об этом позже.
Объекты localStorage и sessionStorage
Работа с веб-хранилищами в JavaScript выполняется через объекты localStorage
и sessionStorage
. Объекты localStorage
и sessionStorage
находятся в глобальном объекте window
.
Они имеют одинаковый набор свойств и методов:
getItem(key)
- получить значение элемента хранилища поkey
;setItem(key,value)
- установить дляkey
указанное значениеvalue
(если в хранилище уже есть данные с этим ключом, то они будут переписаны);removeItem(key)
- удалить элемент поkey
;clear()
- удалить все элементы;key(index)
- получить элемент по его индексу (в основном используется для перебора);length
- свойство, с помощью которого можно получить количество элементов в хранилище;
Примеры
1. Пример, в котором добавим элемент в веб-хранилище, получим его значение по ключу, а затем удалим его:
// 1 - добавим в LocalStorage элемент с ключом «bgColor» и значением «green» localStorage.setItem('bgColor', 'green'); // 2 - получим значение по ключу «bgColor» и сохраним его в переменную «bgColor» var bgColor = localStorage.getItem('bgColor'); // 3 - удалим элемент из хранилища по ключу localStorage.removeItem('bgColor');
2. Пример, в котором удалим все элементы из хранилища:
localStorage.clear();
3. Пример, в котором перебём все элементы LocalStorage:
<div id="result"></div> ... <script> var output = ''; // localStorage.length - количество элементов в хранилище for (var i = 0, length = localStorage.length; i < length; i++) { // localStorage.key(i) - получение ключа элемента по его индексу output += 'Ключ: ' + localStorage.key(i) + "; Значение: " + localStorage.getItem(localStorage.key(i)) + ".<br>"; } document.querySelector('#result').innerHTML = output; </script>
4. Пример, в котором запишем JavaScript объект в LocalStorage:
// 1 - JavaScript объект var obj = { prop1: 'value1', prop2: 'value2', prop3: 'value3' // ... } // 2 - Сохраним JavaScript объект в LocalStorage преобразовав его в строку JSON localStorage.setItem('mykey', JSON.stringify(obj)); // ... // 3 - Получим из LocalStorage значение по ключу «mykey», если он там есть (т.е. если его значение не равно null) if (localStorage.getItem('mykey')) { // 4 - Получим из LocalStorage значение по ключу «mykey», преобразуем его с помощью метода JSON.parse в JavaScript объект obj = JSON.parse(localStorage.getItem('mykey')); }
Из этого примера видно, что если вам нужно в LocalStorage записать объект, то одним из вариантов решения этой задачи может стать его сериализация в строку JSON с помощью функции JSON.stringify
.
5. Пример, в котором проверим поддерживает ли браузер веб-хранилище?
if (typeof(Storage) !== 'undefined') { // код для localStorage } else { // браузер не поддерживает веб-хранилище }
6. Пример, в котором покажем как можно добавить дату к записям, а затем её использовать для их очистки (например, удалять записи, если со времени её записи прошло уже более 30 дней):
// пример данных, которые мы получили из LocalStorage var viewsItems = [ { id: '1608467', title: '6.26" Смартфон Huawei Nova 5T 128 ГБ фиолетовый', timestamp: 1583020800000 // 01.03.2020 }, { id: '1348312', title: '6.1" Смартфон Huawei P30 128 ГБ синий', timestamp: 1585872000000 // 03.04.2020 }, { id: '1394820', title: '6.1" Смартфон Apple iPhone 11 128 ГБ черный', timestamp: 1586476800000 // 10.04.2020 } ], newViewsItems = []; // сформируем из массива viewsItems новый массив newViewsItems только из тех данных, timestamp которых не более 30 дней for (var i = 0, length = viewsItems.length; i < length; i++) { if (viewsItems[i].timestamp > (Date.now() - 1000 * 60 * 60 * 24 * 30)) { newViewsItems.push(viewsItems[i]); } } // например, если текущая дата 11.04.2020, то в массив newViewsItems попадут все элементы, кроме первого // сохраним новый массив, очищенный от старых записей в LocalStorage localStorage.setItem('viewsItems', JSON.stringify(newViewsItems));
Тест скорости выполнения операций с данными в localStorage и cookie
Рассмотрим быстродействие (в процентном отношении), которое имеют методы при выполнении операций с данными в localStorage и cookie.
В качестве браузеров будем использовать Chrome 47, Firefox 42 и IE11, работающие на операционной системе Windows 7.
Тест 1. Быстродействие методов, осуществляющих чтение данных из localStorage и cookie.

Вывод: Современные браузеры выполняют операции чтения данных из хранилища localStorage намного быстрее, чем из cookie. В браузере Google Chrome это разница достигает нескольких десятков раз, в Firefox – 9 раз и в IE 11 – 2 раза.
Тест 2. Быстродействие методов, осуществляющих запись данных в localStorage и cookie.

Вывод: Операции записи данных в хранилище localStorage выполняются быстрее, чем в cookie, но не настолько как при чтении. Браузер Google Chrome выполняет запись в localSorage быстрее в 1.6 раза, Firefox в 7 раз, Internet Explorer 11 показал равнозначный результат.
Тест 3. Быстродействие браузеров, осуществляющих запись данных в localStorage и их чтение.


Вывод: Firefox показал довольно хорошие преимущества в быстродействии перед другими браузерами, и это касается не только технологии localStorage, но и cookie (диаграммы не приводятся).
Может подскажете решение, если оно существует?
В коде вам нужно сначала проверить, если ли данные в LocalStorage, а потом туда уже что-то записывать:
Эти файлы, как и cookies можно очистить (chrome://settings/cookies#cont). Надёжное хранилище — это только база данных на сервере.
у меня такая проблема: есть боковое меню, открытие/закрытие которого регулируется классами тэга body: site-menubar-unfold / site-menubar-fold соответственно. надо, чтобы при переходе на новую страницу выбранное состояние сохранялось. как это реализовать с помощью sessionStorage я примерно поняла, но как отследить изменение url? нагуглила только функцию hashchange, но «Событие hashchange генерируется когда изменяется идентификатор фрагмента URL (т.е. часть URL следующая за символом #, включая сам символ #).» а у меня меняется не идентификатор, а html-страница. например, localhost/project/idex.html -> localhost/project/stat.html
спасибо)
После этого вам необходимо добавить в обработчик этого события блок кода JavaScript, в котором происходит запись информации в хранилище.
Второй блок, в котором происходит считывание информации, необходимо выполнять после загрузки страницы:
Есть событие, которое происходит при выгрузке страницы, но его поддержка зависит от браузера. Поэтому его не рекомендуется использовать. Применяется оно так:
а страница может меняться при переходе по ссылкам внутри нее же или в том же меню