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

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？

附言我知道 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 并在其中存储信息，这些信息将一直保留到用户清除浏览器为止，但是，在您的情况下，您可能需要考虑 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 在应用程序转换时处理状态的方式.它的设置有点复杂，对于您已经快要完成的项目来说有点矫枉过正，但如果您想尝试一下，这将是一个很好的机会。