Как удалить элемент localStorage, когда окно / вкладка браузера закрыты?

Question

Мой случай: localStorage с ключом + значением, которое должно быть удалено при закрытии браузера, а не одной вкладкой.

Пожалуйста, посмотрите мой код, если он правильный и что можно улучшить:

//create localStorage key + value if not exist
if(localStorage){
   localStorage.myPageDataArr={"name"=>"Dan","lastname"=>"Bonny"}; 
}

//when browser closed - psedocode
$(window).unload(function(){
  localStorage.myPageDataArr=undefined;
});

Answer 1

почему не используется sessionStorage?

"Объект sessionStorage равен объекту localStorage, за исключением того, что он хранит данные только для одного сеанса. Данные удаляются, когда пользователь закрывает окно браузера."

http://www.w3schools.com/html/html5_webstorage.asp

Answer 2

Я не думаю, что представленное здесь решение на 100% правильно, потому что событие window.onbeforeunload вызывается не только тогда, когда браузер / вкладка закрыта (что требуется), но и для всех остальных нескольких событий.(КОТОРОЕ НЕ ТРЕБУЕТСЯ)

См. Эту ссылку для получения дополнительной информации о списке событий, которые могут вызвать window.onbeforeunload: -

http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx

Answer 3

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

if(typeof(Storage)!=="undefined") {
  console.log("localStorage and sessionStorage support!");
  console.log("About to save:");
  console.log(localStorage);
  localStorage["somekey"] = 'hello';
  console.log("Key saved:");
  console.log(localStorage);
  localStorage.removeItem("somekey");  //<--- key deleted here
  console.log("key deleted:");
  console.log(localStorage);
  console.log("DONE ===");
} else {
  console.log("Sorry! No web storage support..");
}

Это сработало для меня, как и ожидалось (я использую Google Chrome).Адаптировано из: http://www.w3schools.com/html/html5_webstorage.asp.

Answer 4

Это старый вопрос, но, похоже, ни один из приведенных выше ответов не идеален.

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

По сути, идея такова:

1. Вы загружаетесь с предыдущей открытой вкладки, таким образом, обе ваши localStorage и sessionStorage пусты (если нет, вы можете очистить localStorage).Вам необходимо зарегистрировать прослушиватель событий сообщения на localStorage.
2. . Пользователь аутентифицирует / создает конфиденциальную информацию на этой вкладке (или любой другой вкладке, открытой в вашем домене).
3. Вы обновляете sessionStorage для хранения конфиденциальной информации и используете localStorage для хранения этой информации, а затем удаляете ее (здесь вам не нужно время, так как событие было поставлено в очередь при изменении данных).Любая другая вкладка, открытая в то время, будет отозвана по событию сообщения и обновит свои sessionStorage конфиденциальной информацией.
4. Если пользователь откроет новую вкладку в вашем домене, его sessionStorage будетбыть пустымКод должен установить ключ в localStorage (например: req).Любая (все) другая вкладка будет вызвана обратно в событии сообщения, увидит этот ключ и может ответить секретной информацией из их sessionStorage (как в 3), если они есть.

Обратите внимание, что эта схема не зависит от события window.onbeforeunload, которое является хрупким (так как браузер может быть закрыт / аварийно завершен без запуска этих событий).Кроме того, время хранения конфиденциальной информации на localStorage очень мало (поскольку вы полагаетесь на обнаружение изменения переходных процессов для события сообщения перекрестной табуляции), поэтому маловероятно, что такая конфиденциальная информация просачивается на жесткий диск пользователя.

Вот демонстрация этой концепции: http://jsfiddle.net/oypdwxz7/2/

Answer 5

Вы можете попробовать следующий код для удаления локального хранилища:

delete localStorage.myPageDataArr;