我是怎么在vue项目中封装localStorage和sessionStorage

1. 我把这个文件放到plugin/db/的一个文件夹下,命名为index.js,文件内容如下:

plugin/db/index.js
/**
 * localStorage and sessionStorage basic operation
 */
const ls = localStorage
const ss = sessionStorage
const db = {
  ls: {
    get (key) {
      try {
        return JSON.parse(ls.getItem(key))
      } catch (err) {
        return ls.getItem(key)
      }
    },
    set (key, value) {
      ls.setItem(key, JSON.stringify(value))
    },
    remove (key) {
      ls.removeItem(key)
    },
    clear () {
      ls.clear()
    }
  },
  ss: {
    get (key) {
      try {
        return JSON.parse(ss.getItem(key))
      } catch (err) {
        return ss.getItem(key)
      }
    },
    set (key, value) {
      ss.setItem(key, JSON.stringify(value))
    },
    remove (key) {
      ss.removeItem(key)
    },
    clear () {
      ss.clear()
    }
  }
}
export default db

2. 直接放到mixin中

   
   
   image

3.在main.js中引用

image