如何使用Vue的思想封裝一個Storage
localStorage、sessionStorage 這兩個 API 是我們前端日常開發中的存儲的利器， 我們經常會使用它們存儲一些數據。我們日常在對他們進行操作的時候，對 localStorage、sessionStorage 的使用一般是直接：
localStorage.setItem(xxx, xxx);sessionStorage.setItem(xxx, xxx);localStorage.getItem(xxx);sessionStorage.getItem(xxx);
或者有的同學還會這樣簡單封裝一下：
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)); }};
但是這樣使用起來雖然問題不大，但是總感覺代碼不夠優雅，正好最近封裝了一些底層的基礎庫，就包括了對著兩兄弟的封裝。發現一些比較好玩的東西。小編也是有一些新的體會和想法，分享給大家。
功能 localStorage、sessionStorage 設置 localStorage、sessionStorage 獲取 localStorage、sessionStorage 刪除一項 localStorage、sessionStorage 清空所有存儲目的封裝一個 localStorage、sessionStorage API，實現對 storage 的增、刪、改、查。
想法來源大家如果使用過 Vue2.0 ，那你一定知道 Object.defineProperty 方法，這個 API 就是 Vue 響應式的核心，用于觀測數據的變化，但是它存在一些弊端：
對象類型數據里添加一對新的 key/value 或刪除一對已有的 key/value 時，它是無法觀測到的，導致當我們對 object 數據添加或刪除值時，無法通知依賴，無法驅動視圖進行響應式更新。 對于數組變化偵測是 Vue2.0 通過攔截器實現的，也就是說只要是通過數組原型上的方法對數組進行操作就都可以偵測到，但是通過數組的下標來操作數據，就需要手動去操作了。這些問題在 Vue 3.0 得到了解決，解決思路是 ES6 中的方法 Proxy 。
Proxy 用于修改某些操作的默認行為，等同于在語言層面做出修改，所以屬于一種“元編程”（meta programming），即對編程語言進行編程。
Proxy 可以理解成，在目標對象之前架設一層“攔截”，外界對該對象的訪問，都必須先通過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫。Proxy 這個詞的原意是代理，用在這里表示由它來“代理”某些操作，可以譯為“代理器”。
Proxy 是一個天然的攔截器、代理器，所以我們也可以使用 Proxy 來代理對 localStorage、sessionStorage 的操作。話不多說，直接上代碼。
實現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(), { /** * 設置 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，返回一個 localStorage、sessionStorage 的代理對象，這個代理對象，對 set、get、delete、preventExtensions、in 等操作進行劫持。
set攔截對象屬性的設置，比如 storage.foo = v 或 storage[’foo’] = v，返回一個布爾值。對代理對象的屬性賦值，攔截這個賦值，操作對應的 storage 的 setItem，就可以直接把值存儲到對應的 storage 中。
storage.a = 1;// orstorage[’a’] = 1;get
攔截對象屬性的讀取，比如 storage.foo 和 storage[’foo’]。讀取代理對象的屬性值，攔截這個獲取操作，拿到對應的 key，操作對應的 storage 的 getItem，從相應的 storage 中獲取對應的值。
console.log(storage.a); // 1deleteProperty
攔截 delete storage[propKey]的操作，返回一個布爾值。這里攔截的是對象的刪除數據操作，內部對 storage 進行 removeItem 的操作，刪除數據。
delete proxyStorageTest.a;preventExtensions
攔截 Object.preventExtensions(storage)，返回一個布爾值。攔截對象的不可擴展操作，內部對對應的 storage 進行 clear 操作，來清除所有的存儲值。
Object.preventExtensions(proxyStorageTest);has
攔截 propKey in proxy 的操作，以及對象的 hasOwnProperty 方法，返回一個布爾值。攔截對象的查詢屬性的操作，查詢某一個 key 是否存在于對應的 storage 中。
’a’ in proxyStorageTest;總結
通過 Proxy 來代理對 localStorage、sessionStorage 的操作，封裝一個 簡單 storage API。Proxy 可用來操作 localStorage、sessionStorage ，也可用來操作 document.cookie 和 indexedDB。當然 Proxy 的功能并不局限于此，它也還有很多其他的用途，例如 Vue 3.0 中對 Proxy 的使用，亦或者其他，這篇文章重點不在于封裝一個簡單的 API，而是引導大家去學習這種思想。
到此這篇關于如何使用Vue的思想封裝一個Storage的文章就介紹到這了,更多相關Vue思想封裝Storage內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備