Vue.js全局变量缓存问题：如何在页面刷新后访问main.js中定义的$foo变量

嘿，这个问题太常见了！你现在把$foo挂载在Vue原型上，但它只存在于浏览器的内存里——页面一刷新，内存里的所有变量都会被清空，所以咱们得把数据放到浏览器持久化存储里才行。下面给你几个实用的方案：

方案1：用localStorage手动同步（最直接） #

localStorage是浏览器自带的持久化存储，数据会一直保存在用户设备上（除非手动清除或代码删除）。咱们可以在初始化时从localStorage读取旧数据，修改$foo时同步更新存储：

// main.js
// 页面初始化时，从localStorage读取之前保存的$foo值，没有的话用空数组
const savedFoo = localStorage.getItem('foo');
Vue.prototype.$foo = savedFoo ? JSON.parse(savedFoo) : [];

// 封装一个全局方法来安全更新$foo，确保同步到localStorage
Vue.prototype.$updateFoo = function(newValue) {
  // localStorage只能存字符串，所以数组/对象要转成JSON格式
  localStorage.setItem('foo', JSON.stringify(newValue));
  this.$foo = newValue;
};

new Vue({ router, render: h => h(App) }).$mount('#app');

之后在组件里修改$foo时，尽量用这个封装好的方法，比如：

// 组件内添加新元素
this.$updateFoo([...this.$foo, '新增内容']);

额外优化：让$foo保持响应式 #

如果希望$foo的变化能自动触发组件更新，可以用Vue.observable()把它变成响应式对象：

const savedFoo = localStorage.getItem('foo');
const initialFoo = savedFoo ? JSON.parse(savedFoo) : [];
Vue.prototype.$foo = Vue.observable(initialFoo);

方案2：用sessionStorage（会话级存储） #

如果你的数据不需要长期保存，只是希望在当前浏览器标签页会话中刷新后保留，可以用sessionStorage——它的用法和localStorage几乎一样，只是关闭标签页后数据会自动清除：

// 初始化
const savedFoo = sessionStorage.getItem('foo');
Vue.prototype.$foo = savedFoo ? JSON.parse(savedFoo) : [];

// 更新方法
Vue.prototype.$updateFoo = function(newValue) {
  sessionStorage.setItem('foo', JSON.stringify(newValue));
  this.$foo = newValue;
};

方案3：Vuex结合持久化插件（适合复杂状态管理） #

如果你的项目已经在用Vuex管理状态，把$foo移到Vuex的state里，再用vuex-persistedstate插件自动同步到localStorage会更规范：

1. 先安装插件：

npm install vuex-persistedstate --save

2. 在Vuex配置中启用持久化：

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    foo: []
  },
  mutations: {
    UPDATE_FOO(state, newValue) {
      state.foo = newValue;
    }
  },
  plugins: [createPersistedState({
    // 指定只持久化foo这个状态
    paths: ['foo']
  })]
});

之后在组件里通过this.$store.state.foo访问数据，用this.$store.commit('UPDATE_FOO', newValue)修改，刷新后数据会自动从localStorage恢复。

注意事项 #

• localStorage/sessionStorage只能存储字符串，所以数组、对象必须用JSON.stringify()转换，读取时用JSON.parse()解析；
• 不要存储无法被JSON序列化的数据（比如函数、循环引用的对象），否则会抛出错误；
• 敏感数据别用localStorage存储（它是明文的，容易被窃取），可以考虑用sessionStorage或者加密后再存储。

内容的提问来源于stack exchange，提问作者Peter Toth