背景

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

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

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

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));
  }
};

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

功能

• localStorage、sessionStorage 設(shè)置
• localStorage、sessionStorage 獲取
• localStorage、sessionStorage 刪除一項(xiàng)
• localStorage、sessionStorage 清空所有存儲

目的

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

想法來源

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

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

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

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

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

Proxy 是一個天然的攔截器、代理器，所以我們也可以使用 Proxy 來代理對 localStorage、sessionStorage 的操作。話不多說，直接上代碼。

實(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，返回一個 localStorage、sessionStorage 的代理對象，這個代理對象，對 set、get、delete、preventExtensions、in 等操作進(jìn)行劫持。

set

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

storage.a = 1;
// or
storage['a'] = 1;

get

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

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

deleteProperty

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

delete proxyStorageTest.a;

preventExtensions

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

Object.preventExtensions(proxyStorageTest);

has

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

'a' in proxyStorageTest;

總結(jié)

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

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