Как удалить элемент localStorage при закрытии окна/вкладки браузера?
мой случай: localStorage с ключом + значение, которое должно быть удалено, когда браузер закрыт, а не одна вкладка.
пожалуйста, посмотрите мой код, если он правильный и что можно улучшить:
15 ответов
должно быть сделано так, а не с оператором delete:
вы можете использовать beforeunload событие в JavaScript.
используя vanilla JavaScript, вы можете сделать что-то вроде:
это удалит ключ перед закрытием окна/вкладки браузера и предложит вам подтвердить действие закрыть окно/вкладку. Надеюсь, это решит вашу проблему.
Примечание: onbeforeunload метод должен возвращать строку.
С window ключевое слово Global:-
вы должны использовать sessionStorage вместо этого, если вы хотите, чтобы ключ был удален при закрытии браузера.
надеюсь, что это работает для вас
существует очень конкретный вариант использования, в котором любое предложение использовать sessionStorage вместо localStorage не очень помогает. Прецедент будет таким же простым, как сохранение чего-то, пока у вас открыта хотя бы одна вкладка, но аннулирует ее, если вы закроете последнюю оставшуюся вкладку. Если вам нужно, чтобы ваши значения были сохранены в кросс-вкладке и окне, sessionStorage не поможет вам, если вы не усложните свою жизнь со слушателями, как я пытался. В то же время localStorage будет идеально подходит для этого, но он делает работу «слишком хорошо», так как ваши данные будут ждать там даже после перезагрузки браузера. В итоге я использовал пользовательский код и логику, которые используют оба преимущества.
Я лучше объясню, чем дам код. Сначала сохраните то, что вам нужно в localStorage, затем также в localStorage создайте счетчик, который будет содержать количество открытых вкладок. Это будет увеличиваться при каждой загрузке страницы и уменьшаться при каждой выгрузке страницы. Вы можете выбрать здесь событий, я предлагаю загружать и разгружать. Во время выгрузки вам нужно выполнить задачи очистки, которые вы хотели бы, когда счетчик достигает 0, то есть вы закрываете последнюю вкладку. Вот сложная часть: я не нашел надежного и общего способа определить разницу между перезагрузкой страницы или навигацией внутри страницы и закрытием вкладки. Поэтому, если данные, которые вы храните, не являются чем-то, что вы можете перестроить при загрузке после проверки того, что это ваш сначала вкладка, затем вы не можете удалить ее при каждом обновлении. Вместо этого вам нужно сохранить флаг в sessionStorage при каждой загрузке перед увеличением счетчика вкладок. Перед сохранением этого значения вы можете проверить, имеет ли оно уже значение, а если нет, это означает, что вы загружаетесь в этот сеанс впервые, что означает, что вы можете выполнить очистку при загрузке, если это значение не установлено, а счетчик равен 0.
объект sessionStorage равен объекту localStorage, за исключением того, что он хранит данные только для одного сеанса. Данные удаляются, когда пользователь закрывает окно браузера.
в следующем примере подсчитывается количество раз, когда пользователь нажимает кнопку, в текущем сеансе:
вот простой тест, чтобы узнать, есть ли у вас поддержка браузера при работе с локальным хранилищем:
он работал для меня, как ожидалось (я использую Google Chrome). Адаптировано из: http://www.w3schools.com/html/html5_webstorage.asp.
Я не думаю, что представленное здесь решение на 100% правильно, потому что окно.onbeforeunload событие вызывается не только при закрытии браузера/вкладки(что требуется), но и на всех других нескольких событиях. (ЧТО МОЖЕТ НЕ ПОТРЕБОВАТЬСЯ)
см. эту ссылку для получения дополнительной информации о списке событий, которые могут запускать окно.onbeforeunload:-
Почему бы не использовать sessionStorage?
«объект sessionStorage равен объекту localStorage, за исключением того, что он хранит данные только для одного сеанса. Данные удаляются, когда пользователь закрывает окно браузера.»
хотя некоторые пользователи уже ответили на этот вопрос, я даю пример настроек приложения для решения этой проблемы.
Источник
Как я могу удалить конкретный элемент из LocalStorage
В моем местном магазине есть много ценных вещей, и я хочу удалить некоторые из них. Когда я нажимаю на динамическую карту, которую я создал, она должна быть удалена как обычно, так и локально. Обычно я могу удалить его, но не могу удалить из локального.
Событие локального хранилища очень запутанно и не имеет большого количества объяснительных ресурсов. по крайней мере, я не мог его найти. Спасибо вам уже за вашу помощь.
4 ответа
Я пытаюсь удалить элемент из localStorage в javasscript, но это не работает. Он работает только вручную для последовательности следующих событий Right click —> Inspect element —> Resources —> localStorage —> Right click —> Delete Я пытался: localStorage.clear(); и.
у меня есть некоторые данные в localstorage это выглядит так shotemup_dslfjsdlfjsdf_1395732812679 8 (ключ, значение), после некоторого действия мне нужно отправить эти данные на сервер, и если это было успешно, мне нужно удалить 1 строку из localstorage for(var i=0, len=localStorage.length;.
Попробуйте использовать метод localStorage.removeItem(‘ITEM_NAME’) объекта localStorage .
Вот пример создания, получения и удаления элементов в localStorage
Вот пример кода для вашего случая:
Внутри обработчика кликов вы также должны получить проанализированное значение локального хранилища, а затем вызвать соединение(индекс, 1), передав номер записи как «index».
Замените ключ в соответствии с требованиями
Все ответы хороши. Как бы то ни было, вы также можете сделать это:
Поскольку localstorage является объектом ключ-значение
Похожие вопросы:
В моем приложении у меня есть блесны,если есть 10 элементов в spinner, как я могу удалить какой-то конкретный элемент (например, 3-й или 4-й) из этого spinner, который я использовал ниже кода, но не.
Я пытаюсь удалить элемент из localstorage или, скорее, очистить его при нажатии кнопки. Я написал код, но при нажатии на кнопку он не очищает данные локального хранилища. это переменная с данными.
Оказывается, мой localStorage[items] хранил мой JSON в виде строки. [<\itemId\:1, \itemName\:\item1\>, <\itemId\:2, \itemName\:\item2\>, <\\:3, \itemName\:\item3\>,] Вот как это выглядит, когда я.
Я пытаюсь удалить элемент из localStorage в javasscript, но это не работает. Он работает только вручную для последовательности следующих событий Right click —> Inspect element —> Resources.
у меня есть некоторые данные в localstorage это выглядит так shotemup_dslfjsdlfjsdf_1395732812679 8 (ключ, значение), после некоторого действия мне нужно отправить эти данные на сервер, и если это.
Пожалуйста, посоветуйте, как с этим бороться. Как удалить конкретный элемент e1 из Observable myObserv (полученный после вызова getAllProducts API) . Этот конкретный элемент e1 определяется на.
Я возился с JS и localStorage, создавая список дел. При нажатии на элемент в списке он изменяет свой класс CSS, и его следует удалить из localStorage. Значение элемента определяется пользователем.
Как я могу удалить конкретный элемент из цикла массива, если условие совпадает? array.map(item => < item.id === companyId ? //how to remove this item from the array?? >: null) Заранее спасибо
Как удалить элемент конкретный элемент из карты ‘Image’ в flutter. моя структура показана на прилагаемом изображении.
Источник
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:
- setItem(): Add key and value to localStorage
- getItem(): Retrieve a value by the key from localStorage
- removeItem(): Remove an item by key from localStorage
- clear(): Clear all localStorage
- key(): Passed a number to retrieve nth key of a localStorage
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).
Источник