背景

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ò)濾和改寫(xiě)。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;
// or
storage['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); // 1

deleteProperty

攔截 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)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論