如何使用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; // 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，而是引导大家去学习这种思想。
栏 目：vue
本文地址：http://www.codeinn.net/misctech/212467.html
