从localStorage中存取值公用方法

我这里想拿一个收藏的需求作为案例来展示这两个方法，收藏这个需求经常遇到，在localStorage中存取值也很常见，话不多说，我们先来看代码：

上面就是实现收藏功能的html代码。关键的三点：一是点击div执行toggleFavorite()，二是根据是否收藏的值来决定收藏上面的图标显示的样式:class="{'active':favorite}"，三是图标下面的收藏/未收藏文字内容的切换。
第二点很基础，我们不用看，第一点是点击的时候执行的方法：

      toggleFavorite(event) {
        this.favorite = !this.favorite
        saveToLocal(this.seller.id, 'favorite', this.favorite)
      },

代码很简单，就是一个切换true和false的作用。然后把切换后的值存入到saveToLocal()，所以，这里就使用到了将值存入到localStorage中的方法。
第三点是一个计算属性，代码也很简单：

   computed: {
      favoriteText() {
        return this.favorite ? '已收藏' : '收藏'
      }
    },

根据this.favorite的值来切换文字。就一行代码。
以上这些内容都依赖this.favorite的值，上面有存入到localStorage的过程，下面就是取的地方：

   data() {
      return {
        favorite: (() => {
          return loadFromLocal(this.seller.id, 'favorite', false)
        })()
      }
    },

在初始化实例的时候，就在取值了，如果取值不成就会赋一个默认值false。
下面我们来看整个存取过程的两个方法的代码：

/**
 * 将值存入localStorage中
 */
export function saveToLocal(id, key, value) {
  // 先从localStorage中取
  let seller = window.localStorage.__seller__
  // 如果没有取到
  if (!seller) {
    // 创建一个新的seller对象
    seller = {}
    // 给seller对象中添加一个新的属性id，并给id赋值为一个空的对象
    seller[id] = {}
  } else { // 如果取到了
    // 先将字符串转换为JSON对象
    seller = JSON.parse(seller)
    // 如果没有指定的id
    if (!seller[id]) {
      // 添加该id，并赋值空对象
      seller[id] = {}
    }
  }
  // 给seller中指定的id的key添加值
  seller[id][key] = value
  // 最后转化为字符串存入localStorage中。
  window.localStorage.__seller__ = JSON.stringify(seller)
}

/**
 * 从localStorage中取值
 * def是默认值，如果取不到就赋值def
 */
export function loadFromLocal(id, key, def) {
  // 取最外层的__seller__
  let seller = window.localStorage.__seller__
  // 如果没有就返回默认值
  if (!seller) {
    return def
  }
  // 取__seller__中指定的id的值，如果有就转化为JSON对象
  seller = JSON.parse(seller)[id]
  // 如果没有就返回默认值
  if (!seller) {
    return def
  }
  // 根据指定的Key取值
  let ret = seller[key]
  // 如果有就取出指定Key的值，没有就返回def
  return ret || def
}

这两个方法是可以公用的，存其他的值也可以适用，最多是名字稍加改动。
下面我们来看整个需求的完整代码：