博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
仿饿了么收藏功能
阅读量:5143 次
发布时间:2019-06-13

本文共 2440 字,大约阅读时间需要 8 分钟。

商家收藏这一功能为例: 

1. 首先App.vue中根据url 设置好 商家的id

2、seller.vue: 设置和读取localstorage

{
{favoriteText}}
----import {saveToLocal,loadFromLocal} from '../../common/js/store.js'export default{ props:{ seller: { type: Object } }, data(){ return{ favorite: (()=>{ return loadFromLocal(this.seller.id,'favorite',false); })() } }, computed:{ favoriteText(){ return this.favorite? '已收藏': '收藏'; } }, methods:{ toggleFavorite(event){ if(!event._constructed){ return; } this.favorite = !this.favorite; saveToLocal(this.seller.id, 'favorite', this.favorite); } }}

3、保存的读取localStorage的接口—-store.js:

/** * [保存数据到localstorage] * @param  {[Number]} id  [商家id] * @param  {[type]} key [属性值] * @param  {[type]} value [value值] * @return {[type]}       [description] */export function saveToLocal(id, key, value) {    let seller = window.localStorage.__seller__;    if (!seller) {        seller = {};        seller[id] = {};    } else {        seller = JSON.parse(seller);        if (!seller[id]) {            seller[id] = {};        }    }    seller[id][key] = value;    window.localStorage.__seller__ = JSON.stringify(seller);};/** * [从localstorage读取数据] * @param  {[Number]} id  [商家id] * @param  {[type]} key [属性值] * @param  {[type]} def [属性值的默认取值,当没有保存key时,返回默认值] * @return {[type]}     [属性值对应的value值] */export function loadFromLocal(id, key, def) {    let seller = window.localStorage.__seller__;    if(!seller){        return def;    }    seller = JSON.parse(seller);    if(!seller[id]){        return def;    }    let ret = seller[id][key];    return ret || def;}

4.util.js:

/** * [解析url参数] * @example ?id=12345&a=1 * @return Object {id:12345,a:1} */export function urlParse(){    let url = decodeURIComponent(window.location.search);    let obj = {};    let reg = /[?&][^?&]+=[^?&]+/g;    //['?id=12345','a=1']    let arr = url.match(reg);    if(arr){        arr.forEach((item)=>{            let  tempArr =  item.substring(1).split('=');            let key = decodeURIComponent(tempArr[0]);            let value = decodeURIComponent(tempArr[1]);            obj[key] = value;        })    }    return obj;}  

  原文链接:http://blog.csdn.net/u013217071/article/details/73379128

转载于:https://www.cnblogs.com/karila/p/7803763.html

你可能感兴趣的文章
开启GD拓展
查看>>
JQUERY 大于
查看>>
ZooKeeper做独立server执行(上)
查看>>
《经济地理与企业兴衰》学习笔记
查看>>
正确 C# 未来的期望
查看>>
【UVA】434-Matty's Blocks
查看>>
五、宽度优先搜索(BFS)
查看>>
运行一个窗体直接最大化并把窗体右上角的最大化最小化置灰
查看>>
Android开发技术周报 Issue#80
查看>>
hadoop2.2.0+hive-0.10.0完全分布式安装方法
查看>>
WebForm——IIS服务器、开发方式和简单基础
查看>>
小实验3:实现haproxy的增、删、查
查看>>
Angular中ngModel的$render的详解
查看>>
读《格局》| 未到年纪的真理
查看>>
[转]《城南旧事》里的《送别》
查看>>
07动手动脑
查看>>
django知识点总结
查看>>
C++ STL stack、queue和vector的使用
查看>>
第二章读书笔记
查看>>
redis-cluster
查看>>