Как очистить localstorage в яндекс
LocalStorage на пальцах
Один из наших читателей прислал статью с рассказом о HTML5 LocalStorage в браузерах. Передаём ему слово.
Я постарался написать самое простое и понятное руководство по использованию технологии localStorage. Статья получилась совсем небольшой, в силу того, что и сама технология и средства работы с ней не несут ничего сложного. Для старта вам достаточно чуть-чуть знать JavaScript. Итак, уделите этой статье 10 минут и вы смело сможете добавить себе в резюме строчку «умею работать с localStorage».
Что такое localStorage?
Так выглядит JavaScript объект:
А так выглядит JSON. Почти так же как обычный js-объект, только все свойства должны быть заключены в кавычки.
Чтобы понять, что такое localStorage, просто представьте, что где-то у вас в браузере встроен такой объект, которым мы можем пользоваться. При этом данный объект не очищает значения, которые мы туда запишем, если мы перезагрузим страницу или даже совсем закроем браузер.
Если говорить языком JavaScript, то localStorage это свойство глобального объекта браузера (window). К нему можно обращаться как window.localStorage или просто localStorage.
Еще стоит сказать, что у браузера существует клон localStorage, который называется sessionStorage. Их разница только в том, что последний хранит данные только для одной вкладки (сессии) и просто очистит свое пространство как только мы закроем вкладку
Давайте посмотрим на него вживую. Например, в Google Chrome вам надо открыть DevTools (F12), перейти на вкладку «Resourses» и на левой панели вы увидите localStorage для данного домена и все значения, что оно содержит.
Зачем мне нужен localStorage?
LocalStorage нужен только для одного — хранить определенные данные между сессиями пользователя. Можно придумать тысячу и одну вещь, которую можно хранить в локальном хранилище браузера. Например, браузерные игры, которые используют его как сохраненку, или записать момент, на котором пользователь остановился при просмотре видео, различные данные для форм и т.д.
Как мне начать работать с localStorage?
Работа с localStorage очень напоминает работу с объектами в JavaScript. Существует несколько методов для работы с ним.
Метод который добавляет в localStorage новый ключ со значением (а если такой ключ уже существует, то перезаписывает новым значением). Пишем, например, localStorage.setItem(‘myKey’, ‘myValue’);
Берем определенное значение из хранилища по ключу.
Очищаем все хранилище
Сейчас вы можете открыть вкладку с localStorage вашего браузера и самостоятельно потренироваться записывать и извлекать данные из этого хранилища. Если что — весь код пишем в js-файл.
Также хочется отметить, что localStorage отлично работает и с вложенными структурами, например, объектами.
Вы также должны знать, что браузеры выделяют 5мб под localStorage. И если вы его превысите — получите исключение QUOTA_EXCEEDED_ERR. Кстати, c его помощью можно проверять есть ли в вашем хранилище еще место.
Вместо заключения
Мне бы хотелось, чтобы из этой небольшой статьи разработчики сделали для себя простой вывод, что данная технология уже вовсю может использоваться у вас на проектах. У нее хорошая стандартизация и отличная поддержка, которая со временем только развивается.
Работа с LocalStorage на примере
Доступ в браузере к localStorage
Использует или нет сайт встроенное хранилище данных, можно увидеть в консоли разработчика, во вкладке Application / Local Storage, предварительно нажав F12. На скриншоте у сайта booking.com, мы видим какие-то данные в виде характерной для массивов записи (‘key’: ‘value’).
Объект localStorage
Где использовать localStorage
Например, пользователь установил настройки в магазине и при повторном заходе, ему уже не нужно этого делать заново. Если посетитель не досмотрел видео до конца, то продолжить просмотр он может с того самого места, где остановился. Использование технологии localStorage, даёт нам такие возможности.
Размер localStorage
Размер хранилища данных составляет 5 Mb. Этого более, чем достаточно для обслуживания одного домена.
Работа с localStorage
В application появилась эта пара. И более того, при перезагрузке страницы, данные сохраняются. Если добавленный ключ уже существует, то его значение перезапишется на новое.
Следующий метод getItem получит значение ключа.
Для удаления элемента из хранилища, достаточно указать метод removeItem и передать в параметрах ключ.
Как очистить localStorage
Метод clear() очищает все хранилище.
Пользователь также может очистить localStorage, но только в пределах одной сессии, нажав на иконку Clear All. После перезагрузки страницы, все данные снова появятся во вкладке. В этом нет ничего удивительного, ведь через браузер нельзя поменять код сайта. JavaScript заново наполнит хранилище данными.
Пример использования localStorage
В нашей логин форме имеется поле checkbox. Если пользователь при первом заходе на сайт, поставит галочку «Запомнить меня», то при повторных заходах, уже не нужно вводить данные в форму.
Обработчик события отследит, когда построится DOM-дерево. Только после этого начнет выполняться JavaScript код. Первым делом получим инпут и положим его в переменную checkbox. Повесим ещё один обработчик события на инпут и будем отслеживать, когда произойдет событие клика. Пользователь кликнет внутри чекбокса и поставится галочка. Это стандартное поведение чекбокса.
window.addEventListener(‘DOMContentLoaded’, function() <
let checkbox = document.querySelector(‘.rememberMe’);
checkbox.addEventListener(‘click’, function() <
localStorage.setItem(‘isChecked’, ‘true’);
>)
>)
В хранилище localStorage записалась пара (ключ, значение). При каждом заходе пользователя на сайт, поле с чекбоксом всегда будет активным.
Однако в этом коде не хватает проверки. Есть одна проблема. При обновлении страницы галочка пропадает. Пускай визуальное отсутствие галочки не влияет на работу localStorage, но все равно этот косяк надо исправить. Пропишем условие: получим значение onChecked из хранилища и если оно равно true, то мы устанавливаем checkbox в отмеченное положение.
if(localStorage.getItem(‘onChecked’) === ‘true’) <
checkbox.checked = true;
>;
Пропишем код целиком.
window.addEventListener(‘DOMContentLoaded’, function() <
let checkbox = document.querySelector(‘.rememberMe’);
if(localStorage.getItem(‘onChecked’) === ‘true’) <
checkbox.checked = true;
>
checkbox.addEventListener(‘click’, function() <
localStorage.setItem(‘onChecked’, ‘true’);
>);
>);
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
LocalStorage, sessionStorage
Объекты веб-хранилища localStorage и sessionStorage позволяют хранить пары ключ/значение в браузере.
Что в них важно – данные, которые в них записаны, сохраняются после обновления страницы (в случае sessionStorage ) и даже после перезапуска браузера (при использовании localStorage ). Скоро мы это увидим.
Но ведь у нас уже есть куки. Зачем тогда эти объекты?
Объекты хранилища localStorage и sessionStorage предоставляют одинаковые методы и свойства:
Давайте посмотрим, как это работает.
Демо localStorage
Основные особенности localStorage :
Например, если запустить этот код…
…И закрыть/открыть браузер или открыть ту же страницу в другом окне, то можно получить данные следующим образом:
Нам достаточно находиться на том же источнике (домен/протокол/порт), при этом URL-путь может быть разным.
Объект localStorage доступен всем окнам из одного источника, поэтому, если мы устанавливаем данные в одном окне, изменения становятся видимыми в другом.
Доступ как к обычному объекту
Также можно получать/записывать данные, как в обычный объект:
Это возможно по историческим причинам и, как правило, работает, но обычно не рекомендуется, потому что:
Перебор ключей
Методы, которые мы видим, позволяют читать/писать/удалять данные. А как получить все значения или ключи?
К сожалению, объекты веб-хранилища нельзя перебрать в цикле, они не итерируемы.
Но можно пройти по ним, как по обычным массивам:
Здесь перебираются ключи, но вместе с этим выводятся несколько встроенных полей, которые нам не нужны:
…Поэтому нам нужно либо отфильтровать поля из прототипа проверкой hasOwnProperty :
…Либо просто получить «собственные» ключи с помощью Object.keys, а затем при необходимости вывести их при помощи цикла:
Последнее работает, потому что Object.keys возвращает только ключи, принадлежащие объекту, игнорируя прототип.
Только строки
Обратите внимание, что ключ и значение должны быть строками.
Если мы используем любой другой тип, например число или объект, то он автоматически преобразуется в строку:
Мы можем использовать JSON для хранения объектов:
Также возможно привести к строке весь объект хранилища, например для отладки:
sessionStorage
Свойства и методы такие же, но есть существенные ограничения:
Давайте посмотрим на это в действии.
Запустите этот код…
…И обновите страницу. Вы всё ещё можете получить данные:
Так получилось, потому что sessionStorage привязан не только к источнику, но и к вкладке браузера. Поэтому sessionStorage используется нечасто.
Событие storage
Представьте, что у вас есть два окна с одним и тем же сайтом. Хранилище localStorage разделяется между ними.
Вы можете открыть эту страницу в двух окнах браузера, чтобы проверить приведённый ниже код.
Обратите внимание, что событие также содержит: event.url – url-адрес документа, в котором данные обновились.
Это позволяет разным окнам одного источника обмениваться сообщениями.
Современные браузеры также поддерживают Broadcast channel API специальный API для связи между окнами одного источника, он более полнофункциональный, но менее поддерживаемый. Существуют библиотеки (полифилы), которые эмулируют это API на основе localStorage и делают его доступным везде.
Итого
Объекты веб-хранилища localStorage и sessionStorage позволяют хранить пары ключ/значение в браузере.
Задачи
Автосохранение поля формы
Когда пользователь закроет страницу и потом откроет её заново он должен увидеть последнее введённое значение.
Clearing localStorage in javascript?
Is there any way to reset/clear browser’s localStorage in javascript?
12 Answers 12
Use this to clear localStorage:
If you want to remove a specific Item or variable from the user’s local storage, you can use
Here is a function that will allow you to remove all localStorage items with exceptions. You will need jQuery for this function. You can download the gist.
You can call it like this
If you want to clear all item you stored in localStorage then
Use this for clear all stored key.
If you want to clear/remove only specific key/value then you can use removeItem(key).
We can use the following API’s for deleting items:
If you need to clear the local storage data use:
To remove a particular item from the local storage use :
First things first, you need to check to make sure that localStorage is enabled. I would recommend doing it like this:
Yes, you can (in some cases) just check to see if the localStorage is a member of the window object. However, there are iframe sandboxing options (among other things) that will throw an exception if you even attempt to access the index ‘localStorage’. Thus, for best-practices reasons, this is the best way to check to see if the localStorage is enabled. Then, you can just clear the localStorage like so.
For example, you could clear the localStorage after an error occurs in webkit browsers like so.
How to delete a localStorage item when the browser window/tab is closed?
My Case: localStorage with key + value that should be deleted when browser is closed and not single tab.
Please see my code if its proper and what can be improved:
23 Answers 23
should be done like that and not with delete operator:
Use with window global keyword:-
You should use the sessionStorage instead if you want the key to be deleted when the browser close.
You can make use of the beforeunload event in JavaScript.
Using vanilla JavaScript you could do something like:
That will delete the key before the browser window/tab is closed and prompts you to confirm the close window/tab action. I hope that solves your problem.
NOTE: The onbeforeunload method should return a string.
Hope this works for you
There is a very specific use case in which any suggestion to use sessionStorage instead of localStorage does not really help. The use-case would be something as simple as having something stored while you have at least one tab opened, but invalidate it if you close the last tab remaining. If you need your values to be saved cross-tab and window, sessionStorage does not help you unless you complicate your life with listeners, like I have tried. In the meantime localStorage would be perfect for this, but it does the job ‘too well’, since your data will be waiting there even after a restart of the browser. I ended up using a custom code and logic that takes advantage of both.
I’d rather explain then give code. First store what you need to in localStorage, then also in localStorage create a counter that will contain the number of tabs that you have opened. This will be increased every time the page loads and decreased every time the page unloads. You can have your pick here of the events to use, I’d suggest ‘load’ and ‘unload’. At the time you unload, you need to do the cleanup tasks that you’d like to when the counter reaches 0, meaning you’re closing the last tab. Here comes the tricky part: I haven’t found a reliable and generic way to tell the difference between a page reload or navigation inside the page and the closing of the tab. So If the data you store is not something that you can rebuild on load after checking that this is your first tab, then you cannot remove it at every refresh. Instead you need to store a flag in sessionStorage at every load before increasing the tab counter. Before storing this value, you can make a check to see if it already has a value and if it doesn’t, this means you’re loading into this session for the first time, meaning that you can do the cleanup at load if this value is not set and the counter is 0.
The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window.
The following example counts the number of times a user has clicked a button, in the current session:
There are five methods to choose from:
You can use clear(), this method when invoked clears the entire storage of all records for that domain. It does not receive any parameters.
8.5 years in and the original question was never actually answered.
when browser is closed and not single tab.
This basic code snippet will give you the best of both worlds. Storage that persists only as long as the browser session (like sessionStorage), but is also shareable between tabs (localStorage).