在vue中优雅的使用LocalStrong

Posted 2020-09-15 wmui

h5的LocalStrong帮我们缓存一些数据到本地，最常用的使用场景，比如京东购物在未登陆的状态下，把商品加入购物车，收藏某个商品。当我们把url复制到另外一个浏览器，购物车就是空的。

以下是一个简单的商品收藏小demo,让我们在未登陆的状态下收藏某个商品。这个例子是学习vue时，看了仿饿了么教程，并把它提取出来，已做备用。

stroe.js：

// 此函数用来缓存数据
export function saveToLocal(id, key, value) {
    // 创建储存对象
    let seller = window.localStorage.__seller__;
    if (!seller) {
        seller = {};
        // 通过id向__seller__添加一个空缓存对象
        seller[id] = {};
    } else {
        // eg: JSON.parse(‘{"1":"123","2":"456"}‘) 
        // result: {1:"123",2:"456"}
        seller = JSON.parse(seller);
        if (!seller[id]) {
            seller[id] = {};
        }
    }
    seller[id][key] = value;
    // localStorage只能存储字符串
    // eg: JSON.stringify({1:"123",2:"456"}) 
    // result: "{"1":"123","2":"456"}"
    window.localStorage.__seller__ = JSON.stringify(seller);
};

// 此函数返回一个布尔值
export function loadFromLocal(id, key, def) {
    let seller = window.localStorage.__seller__;
    // 默认值
    if (!seller) {
        return def;
    }
    // 从id下获取缓存的对象
    seller = JSON.parse(seller)[id];
    if (!seller) {
        return def;
    }
    let ret = seller[key];
    return ret || def;
};

使用方法：

<tempalte>
  <div class="favorite" @click="toggleFavorite">
    <span :class="{‘active‘:favorite}">?</span>
  </div>
</tempalte>
<script>
import {saveToLocal, loadFromLocal} from ‘store.js‘;
export default {
  // 父组件传过来一个id
  props: [‘id‘],
  data() {
    return {
      favorite: (() => {
        // 返回该id下 key为favorite的所对应的value,默认为false
        return loadFromLocal(this.id, ‘favorite‘, false);
      })()
    }
  }
  methods: {
    toggleFavorite() {
      this.favorite = !this.favorite;
      // 把该id下 key为favorite的所对应的value 缓存起来
      saveToLocal(this.id, ‘favorite‘, this.favorite);
    }
  }
}
</script>
<style>
.active {
  color: red;
}
</style>

代码加了注释