主页 / 问题 / 1439757
Accepted
Talleyran
Asked:2022-08-16 16:03:17 +0000 UTC2022-08-16 16:03:17 +0000 UTC

更新应用程序版本时如何处理本地存储中的过期数据？

  • 772

有一个 Vue.js 应用程序将其状态和用户设置作为序列化对象存储在 localStorage 中，如下所示：

export default {
  data() {
    return {
      config: {
                someKey1: "someValue",
                someKey2: "someValue2",
                somekey3: ["one", "two", "three"],
                //...
              },
      appname: "myApp",
    };
  },
    mounted() { //при загрузке
        let savedConfig = localStorage.getItem(this.appname . '_config');
        if (savedConfig !== null) {
            this.config = JSON.parse(savedConfig);
        }
    },
    updated() { //при изменении состояния
        let savingConfig = JSON.stringify(this.config);
        localStorage.setItem(this.appname . '_config', savingConfig);
    },
    //Проверки, валидации и весь не относящийся к вопросу код опущен
};

它有效。

但是在应用程序发生重大更新（添加/更改逻辑等）的情况下，对象config可能会发生很大变化。然后，位于用户浏览器中的副本将变得无关紧要。

在这种情况下，如何正确确定应用程序版本已更改的条件以及如何在客户端上重建此对象，最好保存用户所做的所有/大部分设置？是否有任何既定的方法来解决这个问题？

javascript vue.js

1 个回答

  1. Best Answer

    我是这样推理的：

    • 首先你需要考虑配置的结构（模块/方面/域/模型 - 这有不同的名称）
    • 提供版本控制
    • localstorage 是键值存储，WHERE domain="user" AND version="1.0.0"不能写查询。无需输入，值始终为字符串
    • 如果某些设置从一个地方移动到另一个地方，则需要迁移
    • 支持 100 次迁移是没有意义的，最后 3 次就足够了，他们没有时间更新 - 他们得到默认配置

    现在怎么办

    结构

    假设您需要存储有关用户（用户）的数据。

    您可以像这样获取用户名：

    localStorage.getItem('v1:user:personal_data:name')

    有一个版本（为简单起见，我没有做语义版本控制1.0.0.0-...，只是v1）、一个用户域user、一个方面/模型、个人数据personal_data和名称本身。

    我建议至少在一般意义上熟悉 DDD 的概念。这样就可以为以后的配置打下基础。

    我们弄清楚了结构，然后我们将进化代码。

    本地存储的立面

    写起来localStorage.getItem...不舒服。因此，我们制作了一个门面。结果会是这样：

    settings.get("user", "personal_data", "name"). 或者，也许我们使用点表示法：user.personal_data.name.

    在门面会有getter 和setter。也许，第一次，值得将所有属性放入一个对象中，并已经使用它。

    就像. JSON.parse_ JSON.stringify在 Vue 中，Vuex很适合这个，它非常适合这里，我会使用它。

    将其状态和用户设置存储为序列化对象

    Vuex 有模块。最好将用户设置和状态分离到不同的 Vuex 模块中。也许那时不需要版本控制。

    版本控制和迁移

    假设name新版本v2现在称为firstName.

    该变量在脚本releaseVersion = 'v2'和 localStorage中设置userVersion = 'v1'。

    该脚本看到版本不同并执行迁移：

    let name = settings.get('v1:user:personal_data:name')
settings.set('v2:user:personal_data:firstName', name)
settings.remove('v1:user:personal_data:name')
// в конце делаем userVersion = releaseVersion

    在这个阶段，我推荐使用 TDD（测试驱动开发）。第一个测试是检查名称是否已被移植。

    之后，我们开始把逻辑复杂化：

    • 如果没有值，使用一些默认值
    • 而不是带有变量名的表格 - 我们使用映射"user:personal_data:name": "user:personal_data:firstName", ...
    • 如果无法传输简单映射，我们提供回调（例如，我们在名称中设置大写）
    • 创建迁移链 v1 => v2 => v3
    • 如果你达到了这个阶段，你就完成了魔法

    没有 TDD 几乎不可能实现这一点，你会感到困惑和吐槽。

    附言

    我也查看了现成的 JS 包，但没有找到合适的。

    如果您有遗留代码，请创建一个适用于遗留和现代实现的外观。当你摆脱遗留物时，门面可能会爆炸。

    • 1

相关问题