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

  • 相关阅读:
    ProjectEuler 13
    ProjectEuler 8
    ProjectEuler 5
    ProjectEuler 6
    ProjectEuler 7
    ProjectEuler 9
    日程管理系统维护改善1
    日程管理系统改错
    android作业Text
    四则运算
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15188619.html
Copyright © 2011-2022 走看看