Как очистить хранилище локалей в браузере

Обновлено: 06.07.2024

В этом руководстве показано, как использовать Chrome DevTools для просмотра, редактирования и удаления пар "ключ-значение" в localStorage.

Перейдите на вкладку Приложение, чтобы открыть панель Приложения. Разверните меню «Локальное хранилище».

Нажмите на домен, чтобы просмотреть его пары "ключ-значение".

Нажмите строку таблицы, чтобы просмотреть значение в средстве просмотра под таблицей.

Рис. 4. Просмотр значения ключа yt-remote-connected-devices

Дважды щелкните пустую часть таблицы. DevTools создает новую строку и фокусирует ваш курсор на ключевом столбце.

Рис. 5. Пустая часть таблицы, которую нужно дважды щелкнуть, чтобы создать новую пару "ключ-значение"

Дважды щелкните ячейку в столбце "Ключ" или "Значение", чтобы изменить этот ключ или значение.

Рис. 6. Редактирование ключа localStorage

Поскольку вы можете запускать JavaScript в консоли, а консоль имеет доступ к контекстам JavaScript страницы, можно взаимодействовать с localStorage из консоли.

Используйте меню контекстов JavaScript, чтобы изменить контекст JavaScript консоли, если вы хотите получить доступ к парам ключ-значение localStorage домена, отличного от страницы, на которой вы находитесь.

Рис. 7. Изменение контекста JavaScript консоли

Запустите свои выражения localStorage в консоли так же, как в JavaScript.

Рис. 8. Взаимодействие с localStorage из консоли

Есть ли способ сбросить/очистить localStorage браузера в javascript?

12 ответов 12

Используйте это, чтобы очистить localStorage:

Я вызываю localStorage.clear() при запуске приложения, но даже если я закрываю браузер, очищаю кэш и т. д., данные все равно сохраняются. Я знаю это, потому что при инициализации я установил свойство экземпляра в своей модели на случайное число, и для заданного идентификатора свойство экземпляра всегда одно и то же.

clear() удалит все ключи и значения localStorage из определенного домена, в котором вы находитесь. Javascript не может получить значения localStorage из любых других доменов из-за CORS.

@BakedInhalf прав, он остается, пока вы не обновите страницу. Когда вы очищаете свой localStorage и сразу же заполняете его, он как бы восстанавливает предыдущий контент и добавляет к нему новый элемент. Когда вы очищаете свой localStorage и выполняете аппаратное обновление, он становится пустым, и вы можете начать заполнять его снова.

Если вы хотите удалить определенный элемент или переменную из локального хранилища пользователя, вы можете использовать

Привет, @Ajeet Если я не хочу удалять определенный элемент, есть ли способ сделать это? Например, «удалитьItemNotIn(key)», «удалить все, кроме определенного ключа»? Заранее спасибо.

Привет, @Shadow Если я не хочу удалять определенный элемент, есть ли способ сделать это? Например, «удалитьItemNotIn(key)», «удалить все, кроме определенного ключа»? Заранее спасибо.

Я нашел решение своей проблемы: - if(localStorage.getItem(particularKey) == null) < localStorage.clear(); >Но если у вас есть лучшее решение, дайте мне знать. Спасибо.

@learner Итак, вы хотите удалить все ключи, кроме определенного, верно? Для этого вы можете сделать что-то вроде этой клавиши var; для (var i = 0; i

Также возможно: получение значения, очистка и повторная установка значения, более универсально. пусть tmp = localStorage.getItem(' '); локальное хранилище.очистить(); localStorage.setItem(' ')

Вот функция, которая позволит вам удалить все элементы localStorage с исключениями. Для этой функции вам понадобится jQuery. Вы можете скачать суть.

Вы можете назвать это так

@ebob Да, это может показаться странным, но на самом деле это не так. localStorage функционирует аналогично объектам в том смысле, что ключи преобразуются в строки. Например, используя undefined в качестве ключа, например: localStorage.setItem(undefined, 'example Txt!') , фактически сохранит его под ключом с именем 'undefined', как вы можете видеть, когда запускаете следующий код. console.log(localStorage.getItem('undefined')) выведет пример Txt! .

Если вы хотите удалить все элементы, которые вы сохранили в localStorage, тогда

Используйте это, чтобы очистить все сохраненные ключи.

Если вы хотите очистить/удалить только определенный ключ/значение, вы можете использовать removeItem(key).

Localstorage подключен к глобальному окну. Когда мы регистрируем localstorage в chrome devtools, мы видим, что у него есть следующие API:

Мы можем использовать следующие API для удаления элементов:

localStorage.clear(): очищает все локальное хранилище.
localStorage.removeItem('myItem'): для удаления отдельных элементов

Если вам нужно очистить данные локального хранилища, используйте:

Чтобы удалить определенный элемент из локального хранилища, используйте:

В первую очередь необходимо убедиться, что localStorage включен. Я бы рекомендовал сделать это так:

Да, вы можете (в некоторых случаях) просто проверить, является ли localStorage членом объекта окна. Однако существуют параметры песочницы iframe (среди прочего), которые вызовут исключение, если вы даже попытаетесь получить доступ к индексу «localStorage». Таким образом, по соображениям передового опыта это лучший способ проверить, включено ли локальное хранилище. Затем вы можете просто очистить localStorage следующим образом.

Например, вы можете очистить localStorage после возникновения ошибки в браузерах webkit.

Время от времени я сохраняю простые данные в window.localStorage и сразу же хочу очистить их.

Чтобы решить эту проблему, используйте прослушиватель событий window.onbeforeunload.

Вот простой пример. Допустим, у нас есть форма для входа.

Пользователь нажимает кнопку входа.

Отлично! Теперь вы можете обратиться к локальному хранилищу браузера, чтобы проверить, аутентифицирован ли пользователь.

Теперь добавим кривую! Каждый раз, когда пользователь возвращается на сайт, я хочу, чтобы он снова вошел в систему.

Для этого я обычно пишу так:

Описанный выше метод работает. Но это может вызвать некоторые странные проблемы.

Проверенный вид может мерцать на секунду. Или теперь у вас может быть дополнительный шаблонный код для проверки при загрузке веб-страницы.

Есть более чистый способ!

Использовать window.onbeforeunload

Есть событие JavaScript, называемое beforeunload . Это событие запускается, когда окно или вкладка браузера вот-вот закроются.

В коде выше я собираюсь переключиться с window.onload на window.onbeforeunload .

Это событие поддерживается во всех основных браузерах. Даже IE 4, если вы хотите вернуться к старой школе.

Вы также можете использовать метод window.addEventListener().

Очень приятно знать, что есть прослушиватель событий для закрывающейся вкладки или окна.

Но для приведенного выше варианта использования это лучшее и простое решение; и это window.sessionStorage .

Лучшее решение: sessionStorage

window.sessionStorage похож на window.localStorage .

Единственное отличие состоит в том, что window.sessionStorage автоматически очищает данные после закрытия окна или вкладки.

Поэтому вам не нужно добавлять прослушиватель событий!

Эта функция поддерживается во всех основных браузерах и IE8+.

Эй, ты зашел так далеко! Если вам понравилась эта статья, возможно, поставьте лайк или сделайте ретвит ветки в Твиттере:

Мне нравится писать в Твиттере о JavaScript и публиковать полезные фрагменты кода. Следуйте за мной туда, если хотите тоже!

сообщить об этом объявлении

Рубен Лейя

Я запустил этот блог в 2019 году и теперь ежемесячно пишу о JavaScript 130 000 читателей. Передай мне привет в Твиттере, @rleija_.

Хотите больше статей о JavaScript?

Здравствуйте, здесь, в Linguine Code, мы хотим научить вас всему, что знаем о JavaScript . Наш единственный вопрос: вы в деле?

В этом руководстве мы покажем вам, как использовать механизм localStorage и свойство Window.localStorage, а также рассмотрим основы веб-хранилища в JavaScript.

Мы подробно рассмотрим следующее:

Что такое API веб-хранилища?

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

В чем разница между sessionStorage и localStorage?

API веб-хранилища состоит из двух механизмов: sessionStorage и localStorage . Как sessionStorage, так и localStorage поддерживают отдельную область хранения для каждого доступного источника на время сеанса страницы.

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

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

Что такое localStorage в JavaScript?

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

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

Мы сделали специальное демо для .
Нет, правда. Нажмите здесь, чтобы проверить это .

Где хранится localStorage?

В Google Chrome данные веб-хранилища сохраняются в файле SQLite во вложенной папке в профиле пользователя. Подпапка находится в папке \AppData\Local\Google\Chrome\User Data\Default\Local Storage на компьютерах с Windows и ~/Library/Application Support/Google/Chrome/Default/Local Storage на macOS

Firefox сохраняет объекты хранилища в файле SQLite с именем webappsstore.sqlite , который также находится в папке профиля пользователя.

Что такое Window.localStorage?

Механизм localStorage доступен через свойство Window.localStorage. Window.localStorage является частью интерфейса Window в JavaScript, который представляет собой окно, содержащее документ DOM.

Интерфейс Window включает широкий набор функций, конструкторов, объектов и пространств имен. Window.localStorage — это свойство, доступное только для чтения, которое возвращает ссылку на объект локального хранилища, используемый для хранения данных, доступных только для создавшего их источника.

Как работает localStorage?

Чтобы использовать localStorage в ваших веб-приложениях, вы можете выбрать один из пяти способов:

setItem() : добавить ключ и значение в localStorage
getItem(): так вы получаете элементы из localStorage.
removeItem(): удалить элемент по ключу из localStorage.
clear() : очистить все localStorage
key() : передано число для получения ключа локального хранилища.

setItem(): как хранить значения в localStorage

Как следует из названия, этот метод позволяет сохранять значения в объекте localStorage.

Он принимает два параметра: ключ и значение. К ключу можно обратиться позже, чтобы получить прикрепленное к нему значение.

Где имя — это ключ, а Обасеки Носа — значение. Также обратите внимание, что localStorage может хранить только строки.

Чтобы хранить массивы или объекты, их нужно преобразовать в строки.

Для этого мы используем метод JSON.stringify() перед переходом к setItem().

getItem(): как получить элементы из localStorage

Чтобы получить элементы из localStorage, используйте метод getItem(). getItem() позволяет получить доступ к данным, хранящимся в объекте localStorage браузера.

getItem() принимает только один параметр, являющийся ключом, и возвращает значение в виде строки.

Чтобы получить ключ пользователя:

Это возвращает строку со значением как:

Чтобы использовать это значение, вам нужно преобразовать его обратно в объект.

Для этого мы используем метод JSON.parse(), который преобразует строку JSON в объект JavaScript.

removeItem(): как удалить сеансы localStorage

Чтобы удалить сеансы локального хранилища, используйте метод removeItem().

При передаче имени ключа метод removeItem() удаляет этот ключ из хранилища, если он существует. Если с данным ключом не связано ни одного элемента, этот метод ничего не сделает.

clear(): как удалить все элементы в localStorage

Используйте метод clear() для удаления всех элементов в localStorage.

При вызове этого метода все хранилище очищается от всех записей для этого домена. Он не получает никаких параметров.

key(): как получить имя ключа в localStorage

Метод key() удобен в ситуациях, когда вам нужно перебирать ключи в цикле, и позволяет передать число или индекс в localStorage для получения имени ключа.

Поддержка браузера localStorage

localStorage как тип веб-хранилища — это спецификация HTML5. Он поддерживается основными браузерами, включая IE8. Чтобы убедиться, что браузер поддерживает localStorage , вы можете проверить это с помощью следующего кода:

ограничения локального хранилища

Как бы просто ни было использовать localStorage , им также легко злоупотребить. Ниже приведены ограничения, а также способы НЕ использовать localStorage :

Не храните конфиденциальную информацию о пользователях в localStorage.
Это не замена серверной базе данных, поскольку информация хранится только в браузере
localStorage ограничен 5 МБ во всех основных браузерах.
localStorage довольно небезопасен, так как не имеет формы защиты данных и может получить доступ к любому коду на вашей веб-странице.
localStorage является синхронным, то есть каждая вызванная операция будет выполняться только одна за другой

С их помощью мы вооружились мощью localStorage в наших веб-приложениях.

LogRocket: легче отлаживать ошибки JavaScript благодаря пониманию контекста

Отладка кода всегда утомительна. Но чем лучше вы понимаете свои ошибки, тем легче их исправить.

LogRocket позволяет вам понять эти ошибки новыми и уникальными способами. Наше решение для мониторинга внешних интерфейсов отслеживает взаимодействие пользователей с вашими внешними интерфейсами JavaScript, чтобы дать вам возможность узнать, что именно пользователь сделал, что привело к ошибке.

LogRocket записывает журналы консоли, время загрузки страниц, трассировку стека, медленные сетевые запросы и ответы с заголовками и телами, метаданными браузера и пользовательскими журналами. Понимание влияния вашего кода JavaScript никогда не будет таким простым!

Читайте также: