如何将本地存储数据从一个页面持久化到另一个页面？

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')
    },
  },

这是一款健康测验应用。因此，在用户回答最后一个问题后，我希望将 he/she 带到最后一页（这会改变路线），以便可以 return 编辑“健康评分”。在整个测验过程中，健康分数会根据用户给出的答案增加一定的值。上面的计算方法成功地跟踪了健康评分并将其保存在本地存储中。也就是说，直到用户完成测验并到达最后一页。然后，本地存储中的健康评分返回到 0，因为这是原始健康评分恢复到的值。

我希望本地存储中的健康分数在返回到 0 之前保存原始健康分数的最后一个已知值。这样，我可以 return 本地存储中的健康分数显示到用户。现在，无论给出的答案如何，最终页面都只呈现 0/21，显然，这不是我想要的。

如何防止我的本地存储健康评分 return 回到 0？

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

Answer 1

下面是处理持久存储的一些选择，但是，您的代码中的问题是您的设置存储基于计算属性。卸载组件的那一刻，计算的属性将恢复为默认值，在您的情况下为 0。如果您将默认分数从 0 更改为 1 并刷新您的应用程序，您会看到它的实际效果，您会注意到本地存储在测试后恢复为 1。

编辑： 添加评论答案以获取更多信息。

您可以将它移动到一个按钮，点击可能是在保存或提交时，或者如果您真的想让它保持计算状态，甚至可以在计算中添加一些逻辑。

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

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

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

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

您需要从不同的事件调用集合存储，而不是从计算的属性。或者你需要添加逻辑来防止计算总是保存到本地存储

（你已经知道了，但我还是会告诉你，以防有帮助）

持久存储选择：

1) 你使用浏览器 localStorage 并在那里存储信息，这些信息将一直存在，直到用户清除他们的浏览器，但是，在你的情况下你可能想要考虑 sessionStorage，因为当他们离开您的应用程序时它会清除。不需要为这些安装任何 NPM 包，因为它们已经可用。下面的代码片段，如果你想创建一个方法，如果你想使用 Session 而不是只需将 localStorage 更改为 sessionStorage 和 viola.

**
 * 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);
}

2) 另一个稍微复杂一点但你会在中大型项目中看到的选择是 Vuex 这是 Vue 在过渡时处理状态的方式应用程序。它的设置有点复杂，对于你已经快完成的项目来说有点过分了，但如果你想尝试一下，这将是一个很好的机会。

Answer 2

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

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

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

如何将本地存储数据从一个页面持久化到另一个页面？

How can I persist local storage data from one page to another?

javascript

local-storage

google-chrome-devtools

vue.js

vue-component