在vue中封装localStorage

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

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

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

在你的vue项目libs目录中创建一个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)
}

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

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

页面中使用

mounted () {
    this.setStore('luweipai', 'https://www.luweipai.cn')
}

以上这篇在vue中封装localStorage就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。

在vue中封装localStorage

相关推荐

深入理解position sticky 粘性定位

vue3如何解决reactive()响应式对象初始化重新赋值

满屏import优化方案之使用模块重导（Re-export）

微信小程序封装公共弹窗dailog组件-UNIAPP篇

记录几种常用的弹出层动画样式效果

π • 热门