• 封装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、读取更加方便,省去了字符串和对象之间的来回转换

  • 相关阅读:
    LeetCode Notes_#705_设计哈希集合
    LeetCode Notes_#706_设计哈希映射
    【问题记录】用坚果云同步小书匠数据库发生冲突
    Java设计模式5
    Java设计模式4
    Java设计模式3
    Java设计模式2
    Java设计模式1
    tiantian1412/NTU-HsuanTienLin-MachineLearning
    Jing--Li / book
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15188619.html
Copyright © 2020-2023  润新知