先部署好整體的邏輯樣式泻云,點擊收藏變紅心固额,未收藏是灰色
磕谅。將收藏狀態(tài)緩存到localstorage里面私爷,這樣的話,刷新狀態(tài)依然是收藏膊夹。
每個商家的頁面url應(yīng)該是有不同商家的id作為url參數(shù)的衬浑,我們要通過一個方法去拿到url
將方法抽離為公共函數(shù),將url 的參數(shù)部分解析成一個對象放刨,里面包含key:value這樣的值
拿到url參數(shù)的方法:window.location.search
使用正則表達式解析url參數(shù)為對象
拓展屬性的方法: Object.assign()
方法:
1.在一開始獲取seller的時候工秩,通過一個立即執(zhí)行函數(shù)獲取id。
APP.vue
2.定義公共方法urlParse
正則http://tool.oschina.net/uploads/apidocs/jquery/regexp.html
然后再頁面引入之后,使用console.log(queryPrama);
會得到結(jié)果:
就是我們想要的結(jié)果助币。
這樣的話浪听,我們通過函數(shù)將url參數(shù)轉(zhuǎn)換成想要的對象格式,并且將它通過id立即執(zhí)行函數(shù)傳給seller, 就可以通過seller.id得到這個對象了眉菱。
在發(fā)送請求時迹栓,將this.seller.id帶上
在XHR異步請求里,可以查看到
請求的文件自己加上了參數(shù)俭缓。
如果要直接使用seller.id 來獲取id的話克伊,需要使用assign來拓展屬性。
輸出結(jié)果是123123尔崔。說明可以直接使用seller.id取到url的id值了答毫。
。下面開始建立緩存
localstorage要與商品不同的id關(guān)聯(lián)起來才可以季春,不能直接寫洗搂。
建立一個管理數(shù)據(jù)存取的js文件? store.js? 。
使用:
引入這兩個方法
在轉(zhuǎn)換收藏狀態(tài)的函數(shù)下面引入方法儲存狀態(tài)
測試:
如果是第一次收藏之前载弄,沒有創(chuàng)建seller的情況下耘拇,控制臺輸入localStorage發(fā)現(xiàn)__seller__字段長度為1,只有一個warn,而收藏之后宇攻,seller字段長度變?yōu)?惫叛,出現(xiàn)seller字段為
再次刷新頁面,依然保持收藏狀態(tài)逞刷。
而取消收藏之后嘉涌,seller字段為:
key的值變?yōu)閒alse了。
再次刷新依然為未收藏夸浅。
設(shè)置localstroge成功仑最。