在vue中封装localStorage

localStorage

• localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

• localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

• localStorage 属性是只读的。

• 提示: 如果你只想将数据保存在当前会话中，可以使用 sessionStorage
  属性，改数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

1.首先在你的vue项目中创建一个storage.js，代码如下：

/**
 * 存储localStorage
 */
export const setStore = (name, content) => {
  if (!name) return
  if (typeof content !== 'string') {
    content = JSON.stringify(content)
  }
  window.localStorage.setItem(name, content)
}

/**
 * 获取localStorage
 */
export const getStore = name => {
  if (!name) return
  return window.localStorage.getItem(name)
}

/**
 * 删除localStorage
 */
export const removeStore = name => {
  if (!name) return
  window.localStorage.removeItem(name)
}

这里简单说明一下：name指的是储存的名字,content指的是你要储存到里面的值。

2.在main.js里面全局注册一下

import { setStore, getStore, removeStore } from '@/libs/storage'
Vue.prototype.setStore = setStore
Vue.prototype.getStore = getStore
Vue.prototype.removeStore = removeStore

3.这样子就完成了，然后你就可以在你需要的地方引入了，例子如下:

mounted () {
    this.setStore('aaa', '123')
  }

然后我们可以在谷歌浏览器里面的application里面查看

这里就完成了。