如何在发布新代码时清除客户端的本地存储

Question

我已经使用Angular 4构建了我的应用程序，并使用本地存储来存储用户会话。我想要的是，每当我发布我的应用程序时，用户本地存储都应该被重置，以便在发布之前的数据不会产生任何问题。

我该怎么做？

- Praveen Rawat

---

可能是 清除LocalStorage中的javascript？ 的重复问题。 - VTodorov

@VTodorov 我觉得你没有理解他想要什么。 - Ma Kobi

@NnN jQuery与localStorage没有任何关系，链接中的任何答案都没有提到jQuery O.o。 - Andreas

每当新版本小于当前版本时，您必须编写脚本以进行版本更新并清除本地存储，但这将导致用户注销。首次无法在发布代码时执行此操作，因为它是客户端的，所以只有在用户打开网站时才会更新。 - sunil

@NnN 是的和不是的。那个答案只使用jQuery来等待页面加载。 - Andreas

Answer 1

使用版本控制，在客户端保留一个额外的键，该键将具有最新版本。如果版本匹配，则表示没有发布新代码，如果版本不匹配，则表示已传递新代码，然后只需使用实用程序清除本地存储即可。

- Partha Roy

---

我需要确保每次版本更新都要加1，还是可以在package.json中使用Angular项目版本来完成？ - Praveen Rawat

有一个全局常量，每次发布时您都可以更新它，考虑到您正在使用一些构建脚本。 - Partha Roy

我会每次更新package.json文件的新版本，然后将其与旧会话进行比较。 - Praveen Rawat

@PraveenRawat 确切地说，尝试将其包含在构建工具本身中，以便它变得自动化。 - Partha Roy

Answer 2

使用应用程序版本控制。

免责声明：此解决方案不适用于Windows用户！

最佳实践是自动化版本控制，这样您就不必一遍又一遍地手动设置应用程序版本。

思路是：

1. 获取当前的git SHA，如果没有找到旧的SHA，则将其存储在localstorage中。
2. 如果找到旧的SHA，请比较SHAs，如果不相等，请清除存储，将新的SHA设置为localstorage中的值。

这将为您提供当前提交SHA的当前短版本。

git rev-parse --short HEAD

在您的package.json中

"scripts": {     
      "build": "REACT_APP_CURRENT_GIT_SHA=`git rev-parse --short HEAD` react-scripts build",     
      "start": "REACT_APP_CURRENT_GIT_SHA=`git rev-parse --short HEAD` react-scripts start" 
 }

在代码中，我们通过这个变量获取它

process.env.REACT_APP_CURRENT_GIT_SHA

代码：

const APP_VERSION = process.env.REACT_APP_CURRENT_GIT_SHA;

if (typeof localStorage.APP_VERSION === 'undefined' || localStorage.APP_VERSION === null) {
    localStorage.setItem('APP_VERSION', APP_VERSION);
}

if (localStorage.APP_VERSION != APP_VERSION) {
    localStorage.clear();
}`

- Paras Anand

---

它帮了我，谢谢！我还想补充一下，在 package.json 中我使用以下代码："scripts": { "build": "REACT_APP_CURRENT_GIT_SHA=\`git rev-parse --short HEAD\` react-scripts build", "start": "REACT_APP_CURRENT_GIT_SHA=\`git rev-parse --short HEAD\` react-scripts start", } - Ihor

关于应用版本控制的这篇文章更好。 - Gabriel Arghire

Answer 3

你可以在应用程序和本地存储中存储版本字符串。在应用程序启动时，检查localStorage中的字符串是否与应用程序中的字符串匹配。如果不匹配，则清除本地存储。

- Ma Kobi

---

谢谢你的回复，但我在考虑自动化这件事。这样我就不必经历发布的痛苦了。 - Praveen Rawat

Answer 4

config/app.php

return [
        'version'         => env('APP_VERSION', "1.0.0"),

在 ***.blade.php 中

<script>
    var version_app = "{{ config('app.version') }}"
</script>

添加到 **.js

if(typeof localStorage.version_app === 'undefined' || localStorage.version_app === null) {
        localStorage.setItem('version_app', version_app);
    }
if(localStorage.version_app != version_app){
            localStorage.clear();
    }

当您更改版本时，脚本会自动删除localStorage数据

- Davron Achilov

Answer 5

多平台使用案例和可选存储清除（以下是Paras的答案）。

由于npm的脚本Shell默认为CMD.exe，并且CMD.exe不支持命令替换。

所谓命令替换，是指将命令的返回值作为另一个命令的参数使用的语法。

REACT_APP_CURRENT_GIT_SHA=`git rev-parse --short HEAD`

我的解决方法是将npm的脚本shell更改为bash，通过在powershell中运行以下命令。

npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"

请注意，您需要安装git。

然后使用cross-env，这样我就可以在Linux和Windows平台上使用单一语法。

我的package.json脚本最终看起来像这样。

{
    "start": "cross-env REACT_APP_CURRENT_GIT_SHA=$(git rev-parse --short HEAD) REACT_APP_CLEAR_STORAGE=${npm_config_clear_storage} react-scripts start",
    "build": "cross-env REACT_APP_CURRENT_GIT_SHA=$(git rev-parse --short HEAD) REACT_APP_CLEAR_STORAGE=${npm_config_clear_storage} react-scripts build"
}

我添加了REACT_APP_CLEAR_STORAGE=${npm_config_clear_storage}，这样我就可以在运行脚本时手动指定是否要清除localStorage。(如果您不想要这个功能，请不要添加)

请注意，只有当版本(REACT_APP_CURRENT_GIT_SHA)发生变化时，额外的参数才会起作用

我的代码现在看起来像这样

const APP_VERSION = process.env.REACT_APP_CURRENT_GIT_SHA;
const CLEAR_STORAGE = !!process.env.REACT_APP_CLEAR_STORAGE;

if (localStorage.APP_VERSION != APP_VERSION) {
    if (CLEAR_STORAGE) {
        localStorage.clear();
    }
    localStorage.setItem("APP_VERSION", APP_VERSION);
}

为了运行构建并清除localStorage，我执行npm run build --clear_storage

同时，为了运行构建而不清除localStorage，我只需执行npm run build

- Chigozie Ijomah