用户关闭反应应用程序窗口时如何清除本地存储？答案

【问题标题】：How can I clear the localstorage when user close react application window?用户关闭反应应用程序窗口时如何清除本地存储？
【发布时间】：2017-12-27 02:49:17
【问题描述】：

我正在开发一个 react-redux 应用程序，一旦用户登录，我将在本地存储中存储有关用户的一些信息。这样我就可以在用户执行操作时轻松检索用户信息。

如果用户关闭浏览器窗口，我想清除 react 应用程序的所有本地存储。我怎样才能做到这一点？

【问题讨论】：

你描述的是sessionStorage，浏览器本身会清除它
@charlietfl 不。即使标签页关闭，sessionStorage 也会删除数据

标签： javascript reactjs redux

【解决方案1】：

你可以只使用JS函数：

localStorage.clear();

在关闭窗口时触发事件

window.onbeforeunload = function() {
   localStorage.clear();
}

【讨论】：

我应该在哪里调用这个函数？因为用户正在关闭窗口，所以我不确定 react 是如何检测到的。
这可能是不可预测的。是否可以在用户打开网站时清除存储空间？ w3schools.com/jsref/event_onunload.asp
因为，如果电脑死机了怎么办——不会触发相应的事件
您可以将此活动附加到window.onbeforeunload
@DanielKhoroshko 我同意你所说的。如果您将其作为答案，我可以接受。

【解决方案2】：

您可以考虑使用Window.sessionStorage 而不是Window.localStorage。

当页面会话结束时，存储在 sessionStorage 中的数据会被清除。一页

只要浏览器打开并继续存在，会话就会持续页面重新加载。 Source.

【讨论】：

仅当您不想跨标签共享数据时才有效！
@AlyssonMyller 你到底是什么意思？我正在从使用 localStorage 切换到 sessionStorage 以保留登录令牌，当我打开另一个选项卡时，它似乎会意识到这一点。
@JoeM 规范说 sessionStorage 不会在选项卡之间持续存在。 developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

【解决方案3】：

您可以使用 localStorage.clear 但您必须注意窗口关闭事件。另一种可能的解决方案是您可以使用会话存储，以便在您打开浏览器之前使用它。之后该会话将被删除，因此您无需执行任何操作。

【讨论】：

【解决方案4】：

要在浏览器关闭时清除localStorage 数据，您可以使用window.onunload 事件来检查标签页是否关闭。

window.onunload = () => {
   // Clear the local storage
   window.MyStorage.clear()
}

【讨论】：

【解决方案5】：

你可以使用NPM包react-beforeunload

在 NextJS (Typescript) 上实现 react-beforeunload

在您的主文件（在 NextJS 世界中：_app.tsx）上执行以下操作：

...
import { Beforeunload } from 'react-beforeunload';

const removeApplicationData = () => {
    if (window) { // NextJS is ServerSideRendering, therefore the window-check.
        localStorage.clear();
    }
};

...

return (
    <Beforeunload onBeforeunload={removeApplicationData}>
        <Component {...pageProps} />
    </Beforeunload>
    );

【讨论】：