封装localStorage的读取（命名空间）

1、utils/utils.js

const namespace = 'mall'

export function setItem(key, value) {
  let storage = window.localStorage.getItem(namespace)
  storage = storage ? JSON.parse(storage) : {}
  storage[key] = value
  window.localStorage.setItem(namespace, JSON.stringify(storage))
}

export function getItem(key) {
  let storage = window.localStorage.getItem(namespace)
  if (!storage) return false
  storage = JSON.parse(storage)
  const flag = storage[key]
  return flag || false
}

2、使用

    <span class="iconfont icon-like" :class="{'active': like}" @click="handleToggle">span>

import { setItem, getItem } from '@/utils/utils'
export default {
  data() {
    return { like: false }
  },
  methods: {
    handleToggle() {
      this.like = !this.like
      // localStorage.setItem('like', this.like) // 原来的写法
      setItem('like', this.like)
    }
  },
  created() {
    // this.like = localStorage.getItem('like') // 原来的写法
    this.like = getItem('like')
  }
}

 

封装之后的好处：

　　1、使用命名空间，将一个项目中的公共状态存在一个变量内

　　2、读取更加方便，省去了字符串和对象之间的来回转换