How do I encapsulate localStorage and sessionStorage in a VUE project

1. Let me put this file inplugin/db/In a folder named index.js, the contents of the file are as follows:

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
Copy the code

2. Directly into the mixin
   

   

3. Reference it in main.js