标签：back logs ack bsp efault imp key 例子 京东购物
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>
代码加了注释
标签：back logs ack bsp efault imp key 例子 京东购物
原文地址：http://www.cnblogs.com/yesyes/p/6789025.html
