我这里想拿一个收藏的需求作为案例来展示这两个方法，收藏这个需求经常遇到，在localStorage中存取值也很常见，话不多说，我们先来看代码：
<template>
<div class="favorite" @click="toggleFavorite">
<span class="icon-favorite" :class="{'active':favorite}"></span>
<span class="text">{{favoriteText}}</span>
</div>
</template>
上面就是实现收藏功能的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
}
这两个方法是可以公用的，存其他的值也可以适用，最多是名字稍加改动。
下面我们来看整个需求的完整代码：
<template>
<div class="favorite" @click="toggleFavorite">
<span class="icon-favorite" :class="{'active':favorite}"></span>
<span class="text">{{favoriteText}}</span>
</div>
</template>
<script>
import { saveToLocal, loadFromLocal } from './../../common/js/store'
export default {
props: {
seller: {
type: Object
}
},
data() {
return {
favorite: (() => {
return loadFromLocal(this.seller.id, 'favorite', false)
})()
}
},
computed: {
favoriteText() {
return this.favorite ? '已收藏' : '收藏'
}
},
methods: {
toggleFavorite(event) {
this.favorite = !this.favorite
saveToLocal(this.seller.id, 'favorite', this.favorite)
}
}
}
</script>
