关闭浏览器后清除localStorage的内容

Jim-zf

已于 2023-05-18 14:32:20 修改

阅读量3.3k

点赞数 2

文章标签： javascript 前端开发语言

于 2023-05-18 14:29:55 首次发布

本文链接：https://blog.csdn.net/weixin_46600931/article/details/130746369

版权

当浏览器关闭时，JavaScript无法执行以清除localStorage。但可以通过在unload事件中设置标记，在下次打开时检查并清除内容。代码示例展示了如何在React的dva应用中实现这一功能，使用beforeunload和unload事件监听器。此外，提到sessionStorage在浏览器或标签页关闭后会自动清除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在关闭浏览器之后清除localStorage的内容是不可能的，因为JavaScript无法在浏览器关闭之后继续执行。但是，我们可以在下一次浏览器打开时，检查是否有标记表明上次是浏览器关闭，如果有，则清除localStorage的内容。

为了实现这个功能，你可以在subscriptions的setup方法中修改window.unload事件监听器，将一个标记（例如browserClosed）存储在localStorage中，表示浏览器已关闭。然后，在下次启动应用程序时，检查该标记，并根据需要清除localStorage。

以下是修改后的subscriptions部分：这是react的dva写法，思路是一样的

subscriptions: {  
  setup({ dispatch, history }) {  
    const data = localStorage.getItem('counterData');  
    const browserClosed = localStorage.getItem('browserClosed');  
      
    if (browserClosed) {  
      localStorage.clear();  
    } else if (data) {  
      dispatch({ type: 'saveData', payload: JSON.parse(data) });  
    }  
  
    // 监听 window.beforeunload 事件  
    window.addEventListener('beforeunload', () => {  
      dispatch({ type: 'saveData' });  
    });  
  
    // 监听 window.unload 事件  
    window.addEventListener('unload', () => {  
      localStorage.setItem('browserClosed', 'true');  
    });  
  },  
},

在上面的代码中，首先检查browserClosed标记。如果存在，则清除localStorage中的所有数据，否则，如果有counterData数据，则恢复数据。unload事件监听器将browserClosed标记设置为true。这样，在关闭浏览器后，下次打开应用程序时，localStorage中的内容将被清除。

补充：

sessionStorage 是一种客户端存储方式，与 localStorage 类似。但是 sessionStorage 的生命周期仅持续到浏览器或标签页关闭。因此，在关闭浏览器或标签页后，sessionStorage 中的内容会自动清除，无需编写额外的代码。