1、封裝本地存儲函數
/**
* 用來儲存 localStorage
* @param {string} id 唯一id，例如商家的id
* @param {string} key 標示
* @param {string} value 新增&修改的值
*/
export function saveToLocal(id, key, value) {
let seller = window.localStorage.__seller__; // __seller__ 存放所有的值
if (!seller) { // 第一次存儲 --> {"1234567":{}}
seller = {}; // 如果seller不存在則等於空
seller[id] = {}; // 每個id都是單獨的object
} else {
seller = JSON.parse(seller); // --> {"1234567":{"favorite":true}}
if (!seller[id]) { // 拿到值之後判斷是否由當前這個商家
seller[id] = {}; // 沒有的話就重新搞一個對象存放這個商家
}
}
seller[id][key] = value; // id object 的 key就是我們的value
window.localStorage.__seller__ = JSON.stringify(seller);
};
/**
* 用來讀取 localStorage
* @param {*} id 唯一id
* @param {*} key 標識
* @param {*} def 讀取不到數據返回的默認值
*/
export function loadFromLocal(id, key, def) {
let seller = window.localStorage.__seller__;
if (!seller) {
return def; // 還是返回一個false
}
seller = JSON.parse(seller)[id];
if (!seller) { // 如果取不到我們傳入的 id
return def;
}
// 如果ret裏面有這個唯一標示爲undfined的時候，可能商家已經換了我們 返回一個false
let ret = seller[key];
return ret || def;
};
2、引到應用組件中 import {saveToLocal, loadFromLocal} from 'common/js/store'; // 引入存儲方法loadFromLocal
data() {
return {
// favorite: false // 寫死的
favorite: (() => { // 用一個立即執行函數讀取本地數據
return loadFromLocal(this.seller.id, 'favorite', false);
})()
};
},