从vuex中数据丢失来理解浏览器存储

当我们在vue项目中使用vuex来做全局的状态管理时，我们会发现页面刷新以后，保存在vuex实例store里的数据会丢失

vuex中store中的数据有一个特性，在页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值，所以这就是导致vuex中数据丢失的原因

最简单的方法就是我们利用js存储技术(localStorage、sessionStorage、cookie)来进行数据的相应储存

不过这种js存储技术也是有机效的

localStorage：localStorage的生命周期是长时间存在的，关闭页面或浏览器之后localStorage中的数据也不会自动删除。除非主动删除localStorage中储存的数据，否则数据永远不会消失

sessionStorage：sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的

cookie：cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。存放数据大小为4K左右,有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取 ps：cookie的增删改查见文末

vue是一个单页面应用，操作都是在一个页面进行路由跳转所以sessionStorage是最为合适的一种

sessionStorage可以保证页面在打开时的sessionStorage数据为空值在每次打开页面的时候localStorage会存储着上一次的页面数据，因此还要去做清空 sessionStorage的所有使用方法：

sessionStorage.setItem(“key”, “value”); //储存
sessionStorage.getItem(“key”); //取值
sessionStorage.removeItem(“key”); //删除单个
sessionStorage.clear(); // 删除所有

虽然sessionStorage最为合适，但为了考虑用户体验建议使用localStorage

localStorage的所有使用方法：

localStorage.setItem(“key”, “value”); //储存
localStorage.getItem(“key”); //取值
localStorage.removeItem(“key”); //删除单个
localStorage.clear(); // 删除所有

使用vuex-persistedstate 插件

运行npm命令进行安装： npm install vuex-persistedstate -S 然后我们需要在store文件夹下的index.js中进行引入

import persistedstate from "vuex-persistedstate"
const store = new Vuex.Store({
 plugins: [persistedstate ()]
})

默认持久化所有state数据↑↑↑↑↑↑↑↑

指定需要持久化的state数据↓↓↓↓↓↓↓↓↓

import persistedstate from "vuex-persistedstate"
const store = new Vuex.Store({
  plugins: [persistedstate({
    storage: window.sessionStorage,
    reducer (data) {
      return {
        // 设置只储存state中的myData
        myData: data.myData
      }
    }
  })]

/* module.js */
export const dataStore = {
  state: {
    data: []
  }
}

/* store.js */
import { dataStore } from './module'

const dataState = createPersistedState({
  paths: ['data']
})

export new Vuex.Store({
  modules: {
    dataStore
  },
  plugins: [dataState]
})

如何操作cookie（增删改查）

增/改

document.cookie='xxx=xxx'

删除

// 设置一个过去的时间使其过期即为删除cookie
document.cookie='xxx=xxx;expires='+new Date(0)

查

function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) c_end = document.cookie.length;
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}
getCookie(xxx)