Javascript удалить все localstorage

LocalStorage в JavaScript: подробное руководство

LocalStorage и sessionStorage – это веб-хранилища, находящиеся в браузере пользователя и предназначенные для хранения данных.

Хранение информации в этих объектах осуществляется в формате «ключ-значение». Ключ и значение – это всегда строки.

Т.е., по сути, каждое хранилище представляет собой вот такой объект:

{ 'key1': 'value1', 'key2': 'value2', 'key3': 'value3', . }

Если в качестве значения указать не строку, а какой-то другой тип данных, например, объект, то он будет, перед тем как туда записан, автоматически преобразован в строку (т.е. так как будто мы для него явно вызвали метод toString() ).

Таким образом, в localStorage и sessionStorage :

• данные хранятся в виде пар «ключ-значение»;
• хранить можно только строки;
• если необходимо сохранить в эти хранилища массивы и объекты, то перед тем, как это сделать их нужно их сначала преобразовать в строки, например, используя метод JSON.stringify() (для обратного преобразования использовать JSON.parse() ).

Где можно увидеть эти хранилища?

Например, в Google Chrome для этого необходимо открыть «Инструменты разработчика», перейти на вкладку «Application». Здесь они находятся на левой панели в разделе «Storage». При выборе источника вы увидите какие данные содержатся соответственно в sessionStorage и localStorage.

sessionStorage vs localStorage

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

В отличие от sessionStorage , localStorage хранит данные в течение неограниченного количества времени. Они сохраняются при закрытии браузера и выключения компьютера. Но, хоть эти данные могут храниться бесконечно в браузере, обычный пользователь может их удалить, например выполнив очистку истории (при включенной опции «файлы cookie и другие данные сайтов»).

localStorage vs cookies

Cookie и localStorage используются для хранения информации в браузере.

Но что лучше использовать в том или ином случае? Чтобы в этом вопросе ориентироваться необходимо знать различия между ними:

• по месту хранения (куки и localStorage хранятся на компьютере пользователя в браузере);
• по размеру (cookies ограничены 4 Кбайт, а localStorage – 5 Мбайт);
• по включению этих данных в HTTP-заголовок (куки в отличие от данных локального хранилища включаются в состав запроса при отправке его на сервер, а также сервер их может добавлять в ответ при отправке его клиенту; таким образом cookies являются частью HTTP-протокола, и увеличивают объём передаваемых данных от клиента серверу и обратно);
• по доступности данных (печеньки можно прочитать и установить как на сервере, так и на клиенте; на клиенте доступны все куки, кроме тех, у которых установлен флаг HttpOnly ; localStorage доступен только в браузере посредством JavaScript API;
• по времени хранения данных (куки хранятся ограниченное время (до конца сеанса или истечения указанной даты), нахождение данных в локальном хранилище не ограничено по времени);
• по удобству использования в JavaScript (работа с localStorage в JavaScript организовано намного удобнее чем с cookie );
• по необходимости информирования пользователей Евросоюза (при использовании cookies сайт в ЕС должен получать на это разрешение от пользователей; для данных локального хранилища это не требуется);
• по назначению (куки в основном используются для управления сеансом, персонализации и отслеживания действий пользователя, в то время как localStorage применяется в качестве обычного локального хранилища информации на компьютере пользователя).

Что использовать: localStorage или cookie ? На самом деле, ответ на этот вопрос очень прост. Если данные нужны на стороне сервера, то в этом случае лучше использовать cookie . Т.к. куки отправляются с каждым HTTP-запросом на сервер, а также их там можно установить (они добавляются в ответ и браузер при его получении их сохранит).

Если вы работаете с данными только на клиенте (в браузере), то тогда более предпочтительно использовать localStorage .

Безопасность данных

Хранилище localStorage привязана к источнику (домену, протоколу и порту). Данные, находящиеся в некотором источнике, доступны только на страницах этого же источника. К данным другого источника обратиться нельзя.

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

Работа с localStorage и sessionStorage

Объекты localStorage и sessionStorage являются свойствами глобального объекта window . А это значит к ним можно обращаться соответственно как window.localStorage и window.sessionStorage , или просто localStorage и sessionStorage .

Для работы с localStorage и sessionStorage нам доступен одинаковый набор свойств и методов:

• getItem(key) – получает значение по ключу ( key );
• setItem(key, value) – добавляет ключ ( key ) со значением value (если в хранилище уже есть этот ключ, то в этом случае будет просто обновлено его значение);
• removeItem(key) – удаляет ключ ( key );
• clear() – очищает всё хранилище;
• key(index) – получает ключ по индексу (в основном используется в операциях перебора);
• length – количество ключей в хранилище;

Событие storage

Событие storage предназначено для информирования о том, что локальное хранилище обновлено. При этом событие генерируется на всех вкладках, принадлежащих этому источнику, кроме той, которая вызвала эти изменения в localStorage .

Данное событие возникает на объекте window :

window.addEventListener('storage', event => { console.log(event); });

Если посмотреть объект event , то среди свойств можно увидеть следующие:

• key – ключ, значение которого изменено (возвращает null при очистке хранилища);
• oldValue – предыдущее значение ( null – если ключ только что был добавлен);
• newValue – новое значение ( null – при удалении ключа);
• storageArea – изменённый объект-хранилище;
• url – url документа, в котором произошло обновление хранилища.

Создадим пример, который будет следить за изменениями в localStorage и обновлять в соответствии с ними данные на страницах.

Для этого создадим две страницы (например, «page-1.html» и «page-2.html») и поместим в них следующий код:

Примеры использования localStorage

1. Добавим ключ в localStorage , после этого получим его значение, а затем удалим:

// добавим в localStorage ключ «bgColor» со значением «green» localStorage.setItem('bgColor', 'green'); // получим значение ключа «bgColor» и сохраним его в переменную «bgColor» const bgColor = localStorage.getItem('bgColor'); // удалим ключ «bgColor» localStorage.removeItem('bgColor');

Кроме указанных методов, можно также использовать квадратные скобки:

localStorage['bgColor'] = 'green'; const bgColor = localStorage['bgColor']; delete localStorage['bgColor'];

2. Удалим все элементы из хранилища localStorage:

3. Переберём все ключи, находящиеся в localStorage :

// localStorage.length - количество ключей в хранилище for (let i = 0, length = localStorage.length; i < length; i++) { // ключ const key = localStorage.key(i); // значение const value = localStorageJavascript удалить все localstorage; console.log(`${key}: ${value}`); }

4. Пример, в котором сохраним объект в localStorage:

// объект const obj = { prop1: 'value1', prop2: 'value2', prop3: 'value3' } //сохраним объект в LocalStorage предварительно преобразовав его в строку JSON localStorage['mykey'] = JSON.stringify(obj); // если ключ «mykey» имеется в localStorage, то. if (localStorage['mykey'] { // получим из LocalStorage значение ключа «mykey» и преобразуем его с помощью метода JSON.parse() в объект const newObj = JSON.parse(localStorage['mykey']); }

В этом коде сохранение объекта выполняется посредством его сериализации в строку JSON посредством JSON.stringify() .

5. Проверим поддерживает ли браузер веб-хранилища?

if (typeof(Storage) !== 'undefined') { // поддерживает localStorage } else { // браузер не поддерживает веб-хранилище }

6. Попробуем добавить ключ в localStorage, но если в хранилище закончилось место (QUOTA_EXCEEDED_ERR), то выведем в консоль сообщение об этом:

try { localStorage['theme'] = 'dark'; } catch (e) { if (e == QUOTA_EXCEEDED_ERR) { console.log('Не достаточно места в localStorage'); } }

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

// данные полученные из localStorage const data = [ { 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 } ]; // новый массив const newData = []; // добавим в newData элементы, значение timestamp у которых больше текущей даты newData.forEach(element => { if (element.timestamp > Date.now()) { newData.push(element); } }); // сохраним newData в LocalStorage localStorage.setItem('items', JSON.stringify(newData));

Задачи

1. Записать момент, на котором пользователь остановился при просмотре видео в localStorage , а затем восстанавливать его при открытии страницы.

2. Сохранить данные формы в хранилище, а затем восстановить их при перезагрузки страницы.

3. Написать код, сохраняющий историю просмотров страниц сайта в localStorage .

Источник

Storage.clear()

Метод clear() интерфейса Storage удалит все значения из хранилища.

Синтаксис

Параметры

Метод не принимает параметры.

Возвращаемое значение

Метод не возвращает значение.

Пример

Следующая функция создаёт 3 записи в локальном хранилище, после этого все значения удаляются с помощью метода clear() .

function populateStorage()  localStorage.setItem('bgcolor', 'red'); localStorage.setItem('font', 'Helvetica'); localStorage.setItem('image', 'myCat.png'); localStorage.clear(); > 

Примечание: Чтобы вживую посмотреть на работу функции, посетите страницу демонстрации Web Storage.

Спецификации

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник