优化封装本地存储 localStorage 模块

为什么要封装？

        在我们项目的后续业务中的很多地方都需要操作本地存储，如果每次都像上面那样写的话比较麻烦，所以我们这里建议把操作本地存储的代码封装到一个单独的模块中进行处理。

 

封装方法

        创建 src/utils/storage.js 模块。

        在文件中封装方法并导出

/* 封装本地存储模块 */

export const getItem = name => {
  // 获取数据
  const data = window.localStorage.getItem(name)
  try {
    // data 可能不是json格式的字符串 用try catch 来捕获错误
    // 尝试把数据转为json对象
    return JSON.parse(data)
  } catch (err) {
    // data不是转换错误就直接返回
    return data
  }
}

export const setItem = (name, value) => {
  // 判断传过来的数据是不是对象 如果是对象就转为json格式的字符串
  if (typeof value === 'object') {
    value = JSON.stringify(value)
  }
  // 存入数据
  window.localStorage.setItem(name, value)
}

export const removeItem = name => {
  window.localStorage.removeItem(name)
}

export const clearItem = () => {
  window.localStorage.clearItem()
}

使用方法 

        在容器模块中加载使用：  import { xxx } from '@/utils/storage.js'

import Vue from 'vue'
import Vuex from 'vuex'
// 导入方法
import { getItem, setItem } from '@/utils/storage.js'

Vue.use(Vuex)

// 这样做的目的可以避免访问和获取数据的名字不一致导致的问题
const USER_KEY = 'toutiao-m-token'

export default new Vuex.Store({
  state: {
    // 当前登录用户的登录状态token等数据
    token: getItem(USER_KEY)
  },
  mutations: {
    setToken (state, data) {
      state.token = data
      // 为了防止页面刷新数据丢失，我们还需要把数据放到本地存储中，这里仅仅是为了持久化数据
      setItem(USER_KEY, data)
    }
  },
  actions: {},
  modules: {}
})