How to use Vue's idea to encapsulate a Storage

background

The two APIs localStorage and sessionStorage are powerful storage tools in our daily front-end development. We often use them to store some data. When we operate them daily, we usually use localStorage and sessionStorage directly:

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

Or some students will simply encapsulate it like this:

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

Although this is not a big problem to use, I always feel that the code is not elegant enough. It happened that I recently encapsulated some underlying basic libraries, including the encapsulation of the two brothers. Found some fun stuff. The editor also has some new experiences and ideas to share with everyone.

Function

• localStorage, sessionStorage settings
• localStorage, sessionStorage acquisition
• Delete one item from localStorage and sessionStorage
• localStorage, sessionStorage clear all storage

Purpose

Encapsulate a localStorage and sessionStorage API to implement adding, deleting, modifying and checking storage.

Idea source

If you have used Vue2.0, you must know the Object.defineProperty method. This API is the core of Vue's responsiveness and is used to observe data changes, but it has some drawbacks:

• When a new key/value pair is added or an existing key/value pair is deleted in object type data, it cannot be observed. As a result, when we add or delete values ​​​​to the object data, we cannot notify the dependencies and cannot drive the view to perform responsive updates.
• Vue2.0 implements array change detection through interceptors, which means that as long as the array is operated through the methods on the array prototype, it can be detected. However, if the data is operated through the array subscript, it needs to be operated manually.

These problems have been solved in Vue 3.0, and the solution is the Proxy method in ES6.

Proxy is used to modify the default behavior of certain operations, which is equivalent to making changes at the language level, so it is a kind of "meta programming", that is, programming the programming language.

Proxy can be understood as setting up a layer of "interception" before the target object. Any external access to the object must first pass through this layer of interception. Therefore, it provides a mechanism to filter and rewrite external access. The original meaning of the word Proxy is agent. It is used here to mean that it "acts as an agent" for certain operations, which can be translated as "agent".

Proxy is a natural interceptor and proxy, so we can also use Proxy to proxy operations on localStorage and sessionStorage. Without further ado, let’s get straight to the code.

accomplish

var proxyStorage = {
  /**
   * @returns Storage Proxy
   * @example
   * proxyStorage.getStorageProxy(localStorage, '_')
   */
  getStorageProxy: (storage, prefix) => {
    if (!storage)
      return false;
    const getKey = (prop) => `${prefix}.${String(prop)}`;
    return new Proxy(new Object(), {
      /**
       * Set 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;
      },
      /**
       * Get storage
       * @returns boolean
       * @example
       * const storageProxy = proxyStorage.getStorageProxy(localStorage, '_');
       * console.log(storageProxy.a);
       */
      get(_, prop) {
        return JSON.parse(storage.getItem(getKey(prop)) || '');
      },
      /**
       * Delete storage
       * @returns boolean
       * @example
       * const storageProxy = proxyStorage.getStorageProxy(localStorage, '_');
       * delete storageProxy.a;
       */
      deleteProperty(_, prop) {
        storage.removeItem(getKey(prop));
        return true;
      },
      /**
       * Clear storage
       * @returns boolean
       * @example
       * const storageProxy = proxyStorage.getStorageProxy(localStorage, '_');
       * Object.preventExtensions(storageProxy);
       */
      preventExtensions(target) {
        Object.preventExtensions(target);
        storage.clear();
        return true;
      },
      /**
       * Query 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, '_');

Use Proxy to return a proxy object of localStorage and sessionStorage. This proxy object hijacks operations such as set, get, delete, preventExtensions, and in.

set

Intercepts the setting of an object property, such as storage.foo = v or storage['foo'] = v, and returns a boolean value. Assign values ​​to the properties of the proxy object, intercept the assignment, operate the setItem of the corresponding storage, and then you can directly store the value in the corresponding storage.

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

get

Intercepts the reading of object properties, such as storage.foo and storage['foo']. Read the attribute value of the proxy object, intercept the acquisition operation, get the corresponding key, operate the getItem of the corresponding storage, and obtain the corresponding value from the corresponding storage.

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

deleteProperty

Intercept the delete storage[propKey] operation and return a Boolean value. What is intercepted here is the operation of deleting data of the object, and the operation of removeItem is performed on the storage internally to delete the data.

delete proxyStorageTest.a;

preventExtensions

Intercept Object.preventExtensions(storage) and return a Boolean value. Intercept the non-extensible operation of the object, and perform a clear operation on the corresponding storage internally to clear all stored values.

Object.preventExtensions(proxyStorageTest);

has

Intercepts operations on propKey in proxy, and the hasOwnProperty method of an object, returning a boolean value. Intercept the operation of querying attributes of an object and query whether a key exists in the corresponding storage.

'a' in proxyStorageTest;

Summarize

Use Proxy to proxy operations on localStorage and sessionStorage, and encapsulate a simple storage API. Proxy can be used to operate localStorage, sessionStorage, document.cookie and indexedDB. Of course, the function of Proxy is not limited to this. It also has many other uses, such as the use of Proxy in Vue 3.0, or others. The focus of this article is not to encapsulate a simple API, but to guide everyone to learn this idea.

This is the end of this article on how to use Vue's ideas to encapsulate a Storage. For more relevant Vue ideas to encapsulate Storage, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!