亲宝软件园·资讯

展开

Vue思想封装Storage 怎样使用Vue的思想封装一个Storage

拜小白 人气:0
想了解怎样使用Vue的思想封装一个Storage的相关内容吗,拜小白在本文为您仔细讲解Vue思想封装Storage的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue封装storage,vue怎么封装组件,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 API,实现对 storage 的增、删、改、查。

想法来源

大家如果使用过 Vue2.0 ,那你一定知道 Object.defineProperty 方法,这个 API 就是 Vue 响应式的核心,用于观测数据的变化,但是它存在一些弊端:

这些问题在 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;
// or
storage['a'] = 1;

get

拦截对象属性的读取,比如 storage.foo 和 storage['foo']。读取代理对象的属性值,拦截这个获取操作,拿到对应的 key,操作对应的 storage 的 getItem,从相应的 storage 中获取对应的值。

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

deleteProperty

拦截 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,而是引导大家去学习这种思想。

加载全部内容

相关教程
猜你喜欢
用户评论