浏览器窗口/标签closures时如何删除localStorage项目？

我的情况：当closures浏览器而不是单个选项卡时，应该删除键+值的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

应该这样做，而不是删除操作符：

 localStorage.removeItem(key); 

Answer 2

您可以使用JavaScript中的beforeunload事件。

使用香草JavaScript你可以做一些事情：

 window.onbeforeunload = function() { localStorage.removeItem(key); return ''; }; 

这将在浏览器窗口/标签页closures之前删除该键，并提示您确认closures窗口/标签页的操作。 我希望能解决你的问题。

注意： onbeforeunload方法应该返回一个string。

Answer 3

如果您希望在浏览器closures时删除密钥，则应该使用sessionStorage。

Answer 4

与window全局关键字一起使用： –

  window.localStorage.removeItem(key); 

Answer 5

尝试使用

 $(window).unload(function(){ localStorage.clear(); }); 

希望这对你有用

Answer 6

有一个非常具体的用例，其中使用sessionStorage而不是localStorage的build议并没有真正的帮助。 这个用例就像在你打开至less一个标签的时候存储了一些东西一样简单，但是如果你closures最后一个标签，就会使它失效。 如果你需要将你的值保存在交叉表和窗口中，sessionStorage不会帮助你，除非你让听众复杂化了你的生活，就像我试过的一样。 与此同时，localStorage对于这一点来说是完美的，但是它做得太“好”，因为即使在浏览器重新启动之后，您的数据也将在那里等待。 我结束了使用自定义的代码和逻辑，利用两者。

我宁愿解释然后给代码。 首先在localStorage中存储需要的内容，然后在localStorage中创build一个包含已打开的选项卡数量的计数器。 每次页面加载时都会增加，每次页面卸载时都会减less。 你可以select要使用的事件，我build议“加载”和“卸载”。 在卸载的时候，需要在计数器达到0时执行清理任务，这意味着您要closures最后一个选项卡。 这里来的棘手的部分：我还没有find一个可靠和通用的方式来区分页面内的页面重新加载或导航和closures选项卡。 因此，如果您存储的数据不是可以在检查到这是您的第一个选项卡后重新加载的，那么在每次刷新时都无法将其删除。 相反，您需要在每次加载时在sessionStorage中存储一个标志，然后再增加制表符计数器。 在存储这个值之前，你可以检查它是否已经有一个值，如果没有，这意味着你第一次加载到这个会话中，这意味着你可以在加载时进行清理值未设置，计数器为0。

Answer 7

使用sessionStorage

sessionStorage对象等同于localStorage对象，除了它只存储一个会话的数据。 当用户closures浏览器窗口时，数据被删除。

以下示例计算用户在当前会话中单击button的次数：

例

 if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session."; 

Answer 8

下面是一个简单的testing，以查看在使用本地存储时是否支持浏览器：

 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.."); } 

它为我工作如预期（我使用谷歌浏览器）。 改编自： http : //www.w3schools.com/html/html5_webstorage.asp 。

Answer 9

我不认为这里提出的解决scheme是100％正确的，因为window.onbeforeunload事件不仅在浏览器/ Tabclosures（WHICH IS REQUIRED）时被调用，而且在所有其他几个事件中被调用。 （可能不需要）

请参阅此链接以获取有关可能触发的事件列表的更多信息window.onbeforeunload： –

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

Answer 10

尽pipe一些用户已经回答了这个问题，但我正在举一个应用程序设置的例子来解决这个问题。

我遇到过同样的问题。 我在我的angularjs应用程序中使用https://github.com/grevory/angular-local-storage模块。; 如果您按照以下方式configuration您的应用程序，它将在会话存储中保存variables，而不是本地存储。 因此，如果closures浏览器或closures选项卡，会话存储将自动删除。 你不需要做任何事情。

 app.config(function (localStorageServiceProvider) { localStorageServiceProvider .setPrefix('myApp') .setStorageType('sessionStorage') }); 

希望它会有所帮助。

Answer 11

为什么不使用sessionStorage？

“sessionStorage对象与localStorage对象相同，除了只存储一个会话的数据，当用户closures浏览器窗口时，数据被删除。

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

Answer 12

这将像一个魅力工作

 $localStorage.$reset(); 

Answer 13

尝试。

 delete localStorage.myPageDataArr;