Question

我已经完成了我的第一个Vue.js应用，最后要做的就是保留本地存储数据，以便可以在另一页上访问它。我给你举个例子。

目前，这些是我拥有的本地存储方法（以及一些不太相关的数据属性）：

data() {
    return {
      testData: [],
      testDataIndex: 0,
      selectedIndex: null,
      submittedIndex: null,
      healthScore: 0,
    }
  }, 
computed: {
    setHealthScore() {
      localStorage.setItem('SavedHealthScore', this.healthScore)
    },
    getHealthScore() {
      localStorage.getItem('SavedHealthScore')
    },
  },

这是一个健康测验应用程序。因此，在用户回答了最后一个问题之后，我希望他/她被带到最后一页（这改变了路线），以便可以返回“健康评分”。在整个测验中，运行状况得分会根据用户给出的答案增加一定值。上面计算出的方法可以成功跟踪运行状况得分并将其保存在本地存储中。也就是说，直到用户完成测验并到达最终页面为止。然后，本地存储中的运行状况得分将恢复为0，因为原始运行状况得分将恢复为原来的水平。

我希望本地存储中的运行状况得分在返回0之前保存原始运行状况得分的最后一个已知值。这样，我可以将本地存储中的运行状况得分返回给用户显示。现在，无论给出的答案如何，最后一页仅显示0/21，显然，这不是我想要的。

如何防止本地存储运行状况得分恢复为0？

P.S。我知道Vuex可以解决这个问题，但是现在对我来说，了解本地存储比学习Vuex更重要。

Answer 1

以下是用于处理持久性存储的一些选择，但是，代码中的问题是基于计算属性设置存储。卸载组件后，计算出的属性将恢复为默认值（在您的情况下为0）。如果将默认分数从0更改为1，并刷新应用程序，则可以看到此操作，您会注意到localstorage恢复为测试后为1。

编辑：添加带注释的答案以获取更多信息。

您可以将其移动到按钮上，然后单击“保存”或“提交”，或者，如果您确实希望保持其计算状态，甚至可以向计算的对象添加一些逻辑。

if(this.healthScore != 0) { localStorag.setItem(this.healthScore) }

您的检索需要从localStorage获取并分配回本地变量

getHealthScore() {
  this.healthScore = localStorage.getItem('SavedHealthScore')
},

这样，只有在测试分数不为0时，它才会设置本地存储空间。

您需要从其他事件而不是计算所得的属性调用集合存储。或者，您需要添加逻辑以防止计算结果始终保存到本地存储中

（您已经知道了，但无论如何我都会告诉您）

永久存储选择：

1），您使用浏览器localStorage并在其中存储信息，这些信息将一直保留到用户清除浏览器为止，但是，在您的情况下，您可能需要考虑使用{{1} }，因为它们将在他们离开您的应用时清除。不需要为这些安装任何NPM软件包，因为它们已经可用。如果您想创建一种方法，则下面的代码段，如果要使用Session，只需将sessionStorage更改为localStorage和中提琴即可。

sessionStorage

2）另一个稍微复杂一点的选择，但您会在中大型项目中看到的是** * Adds an item to Storage * @param key The Key value * @param value The String Value to be Stored */ export function AddToStorage(key: string, value: string): any { localStorage.setItem(key, value); }，这是Vue在通过应用程序转换时处理状态的方式。它的设置有点复杂，对于已经快要完成的项目来说有点过头了，但是如果您想投入其中，那将是一个很好的机会。

Answer 2

您不应使用计算方法在每个组件内部的本地存储中设置值。当值未定义或更改时，在本地存储中设置值的更好方法。代码段如下：

let healthScore = localStorage.getItem("healthScore");
if(healthScore == undefined) {
  localStorage.setItem("healthScore");
}

您应该首先检查本地存储中是否分配了任何值。如果没有，则分配默认值，在您的情况下，将值设置为0。

如何将本地存储数据从一页保留到另一页？

2 个答案: