vue中利用sessionStorage存储total的值

在 Vue 中，如果你想利用 `sessionStorage` 存储一个变量如 `total`，你可以这样做：

1. **在Vue实例生命周期内设置值**:
在 Vue 组件的 `created()`、`mounted()` 或者 `beforeDestroy()` 生命周期钩子里，你可以将 `total` 值存入 `sessionStorage`。

export default {
  data() {
    return {
      total: 0,
    };
  },
  created() {
    this.saveTotalToSession();
  },
  methods: {
    saveTotalToSession() {
      sessionStorage.setItem('total', JSON.stringify(this.total));
    },
    // 如果要在组件销毁前删除存储的 total，可以添加一个方法
    beforeDestroy() {
      this.deleteTotalFromSession();
    },
    deleteTotalFromSession() {
      sessionStorage.removeItem('total');
    },
  },
};

2. **从 `sessionStorage` 中获取值**:
当你需要在其他地方访问这个值时，在组件中的任意地方调用 `sessionStorage.getItem('total')` 并转换为原始类型（如 `JSON.parse()`）。

// 获取 total 值
this.total = JSON.parse(sessionStorage.getItem('total')) || 0;

**相关问题--:**
1. 如何在 Vue 中监听 `sessionStorage` 变化？
2. 如何在组件卸载时自动清除 `sessionStorage` 的数据？
3. 使用 `sessionStorage` 有没有什么潜在的风险？