目錄背景功能目的想法來(lái)源實(shí)現(xiàn)setgetdeletePropertypreventExtensionshas總結(jié)背景

localStorage、sessionStorage 這兩個(gè) API 是我們前端日常開(kāi)發(fā)中的存儲(chǔ)的利器， 我們經(jīng)常會(huì)使用它們存儲(chǔ)一些數(shù)據(jù)。我們?nèi)粘Ｔ趯?duì)他們進(jìn)行操作的時(shí)候，對(duì) localStorage、sessionStorage 的使用一般是直接：

localStorage.setItem(xxx, xxx);sessionStorage.setItem(xxx, xxx);localStorage.getItem(xxx);sessionStorage.getItem(xxx);

或者有的同學(xué)還會(huì)這樣簡(jiǎn)單封裝一下：

const getItem = (key) => { const serializedValue = window.localStorage.getItem(key) as any; return JSON.parse(serializedValue);};const setItem = (key, value) => { if (window && window.localStorage) { window.localStorage.setItem(key, JSON.stringify(value)); }};

但是這樣使用起來(lái)雖然問(wèn)題不大，但是總感覺(jué)代碼不夠優(yōu)雅，正好最近封裝了一些底層的基礎(chǔ)庫(kù)，就包括了對(duì)著兩兄弟的封裝。發(fā)現(xiàn)一些比較好玩的東西。小編也是有一些新的體會(huì)和想法，分享給大家。

功能 localStorage、sessionStorage 設(shè)置 localStorage、sessionStorage 獲取 localStorage、sessionStorage 刪除一項(xiàng) localStorage、sessionStorage 清空所有存儲(chǔ)目的

封裝一個(gè) localStorage、sessionStorage API，實(shí)現(xiàn)對(duì) storage 的增、刪、改、查。

想法來(lái)源

大家如果使用過(guò) Vue2.0 ，那你一定知道 Object.defineProperty 方法，這個(gè) API 就是 Vue 響應(yīng)式的核心，用于觀測(cè)數(shù)據(jù)的變化，但是它存在一些弊端：

對(duì)象類型數(shù)據(jù)里添加一對(duì)新的 key/value 或刪除一對(duì)已有的 key/value 時(shí)，它是無(wú)法觀測(cè)到的，導(dǎo)致當(dāng)我們對(duì) object 數(shù)據(jù)添加或刪除值時(shí)，無(wú)法通知依賴，無(wú)法驅(qū)動(dòng)視圖進(jìn)行響應(yīng)式更新。 對(duì)于數(shù)組變化偵測(cè)是 Vue2.0 通過(guò)攔截器實(shí)現(xiàn)的，也就是說(shuō)只要是通過(guò)數(shù)組原型上的方法對(duì)數(shù)組進(jìn)行操作就都可以偵測(cè)到，但是通過(guò)數(shù)組的下標(biāo)來(lái)操作數(shù)據(jù)，就需要手動(dòng)去操作了。

這些問(wèn)題在 Vue 3.0 得到了解決，解決思路是 ES6 中的方法 Proxy 。

Proxy 用于修改某些操作的默認(rèn)行為，等同于在語(yǔ)言層面做出修改，所以屬于一種“元編程”（meta programming），即對(duì)編程語(yǔ)言進(jìn)行編程。

Proxy 可以理解成，在目標(biāo)對(duì)象之前架設(shè)一層“攔截”，外界對(duì)該對(duì)象的訪問(wèn)，都必須先通過(guò)這層攔截，因此提供了一種機(jī)制，可以對(duì)外界的訪問(wèn)進(jìn)行過(guò)濾和改寫。Proxy 這個(gè)詞的原意是代理，用在這里表示由它來(lái)“代理”某些操作，可以譯為“代理器”。

Proxy 是一個(gè)天然的攔截器、代理器，所以我們也可以使用 Proxy 來(lái)代理對(duì) localStorage、sessionStorage 的操作。話不多說(shuō)，直接上代碼。

實(shí)現(xiàn)

var proxyStorage = { /** * 返回 Storage 代理 * @returns Proxy * @example * proxyStorage.getStorageProxy(localStorage, ’_’) */ getStorageProxy: (storage, prefix) => { if (!storage) return false; const getKey = (prop) => `${prefix}.${String(prop)}`; return new Proxy(new Object(), { /** * 設(shè)置 storage * @returns boolean * @example * const storageProxy = proxyStorage.getStorageProxy(localStorage, ’_’); * storageProxy.a = 1; */ set(target, prop, value) {target[prop] = value;storage.setItem(getKey(prop), JSON.stringify(value));return true; }, /** * 獲取 storage * @returns boolean * @example * const storageProxy = proxyStorage.getStorageProxy(localStorage, ’_’); * console.log(storageProxy.a); */ get(_, prop) {return JSON.parse(storage.getItem(getKey(prop)) || ’’); }, /** * 刪除 storage * @returns boolean * @example * const storageProxy = proxyStorage.getStorageProxy(localStorage, ’_’); * delete storageProxy.a; */ deleteProperty(_, prop) {storage.removeItem(getKey(prop));return true; }, /** * 清空 storage * @returns boolean * @example * const storageProxy = proxyStorage.getStorageProxy(localStorage, ’_’); * Object.preventExtensions(storageProxy); */ preventExtensions(target) {Object.preventExtensions(target);storage.clear();return true; }, /** * 查詢 storage * @returns boolean * @example * const storageProxy = proxyStorage.getStorageProxy(localStorage, ’_’); * ’a’ in storageProxy; */ has(target, prop) {try { return !!storage.key(prop);} catch (error) { return false;} } }); },};var proxyStorageTest = proxyStorage.getStorageProxy(localStorage, ’_’);

利用 Proxy，返回一個(gè) localStorage、sessionStorage 的代理對(duì)象，這個(gè)代理對(duì)象，對(duì) set、get、delete、preventExtensions、in 等操作進(jìn)行劫持。

set

攔截對(duì)象屬性的設(shè)置，比如 storage.foo = v 或 storage[’foo’] = v，返回一個(gè)布爾值。對(duì)代理對(duì)象的屬性賦值，攔截這個(gè)賦值，操作對(duì)應(yīng)的 storage 的 setItem，就可以直接把值存儲(chǔ)到對(duì)應(yīng)的 storage 中。

storage.a = 1;// orstorage[’a’] = 1;get

攔截對(duì)象屬性的讀取，比如 storage.foo 和 storage[’foo’]。讀取代理對(duì)象的屬性值，攔截這個(gè)獲取操作，拿到對(duì)應(yīng)的 key，操作對(duì)應(yīng)的 storage 的 getItem，從相應(yīng)的 storage 中獲取對(duì)應(yīng)的值。

console.log(storage.a); // 1deleteProperty

攔截 delete storage[propKey]的操作，返回一個(gè)布爾值。這里攔截的是對(duì)象的刪除數(shù)據(jù)操作，內(nèi)部對(duì) storage 進(jìn)行 removeItem 的操作，刪除數(shù)據(jù)。

delete proxyStorageTest.a;preventExtensions

攔截 Object.preventExtensions(storage)，返回一個(gè)布爾值。攔截對(duì)象的不可擴(kuò)展操作，內(nèi)部對(duì)對(duì)應(yīng)的 storage 進(jìn)行 clear 操作，來(lái)清除所有的存儲(chǔ)值。

Object.preventExtensions(proxyStorageTest);has

攔截 propKey in proxy 的操作，以及對(duì)象的 hasOwnProperty 方法，返回一個(gè)布爾值。攔截對(duì)象的查詢屬性的操作，查詢某一個(gè) key 是否存在于對(duì)應(yīng)的 storage 中。

’a’ in proxyStorageTest;總結(jié)

通過(guò) Proxy 來(lái)代理對(duì) localStorage、sessionStorage 的操作，封裝一個(gè) 簡(jiǎn)單 storage API。Proxy 可用來(lái)操作 localStorage、sessionStorage ，也可用來(lái)操作 document.cookie 和 indexedDB。當(dāng)然 Proxy 的功能并不局限于此，它也還有很多其他的用途，例如 Vue 3.0 中對(duì) Proxy 的使用，亦或者其他，這篇文章重點(diǎn)不在于封裝一個(gè)簡(jiǎn)單的 API，而是引導(dǎo)大家去學(xué)習(xí)這種思想。

到此這篇關(guān)于如何使用Vue的思想封裝一個(gè)Storage的文章就介紹到這了,更多相關(guān)Vue思想封裝Storage內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！