脚本宝典收集整理的这篇文章主要介绍了如何使用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 等操作进行劫持。
拦截对象属性的设置，比如 storage.foo = v 或 storage['foo'] = v，返回一个布尔值。对代理对象的属性赋值，拦截这个赋值，操作对应的 storage 的 setItem，就可以直接把值存储到对应的 storage 中。
storage.a = 1; // or storage['a'] = 1;
拦截对象属性的读取，比如 storage.foo 和 storage['foo']。读取代理对象的属性值，拦截这个获取操作，拿到对应的 key，操作对应的 storage 的 getItem，从相应的 storage 中获取对应的值。
console.log(storage.a); // 1
拦截 delete storage[propKey]的操作，返回一个布尔值。这里拦截的是对象的删除数据操作，内部对 storage 进行 removeItem 的操作，删除数据。
delete proxyStorageTest.a;
拦截 Object.preventExtensions(storage)，返回一个布尔值。拦截对象的不可扩展操作，内部对对应的 storage 进行 clear 操作，来清除所有的存储值。
Object.preventExtensions(proxyStorageTest);
拦截 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的思想封装一个Storage的文章就介绍到这了,更多相关Vue思想封装Storage内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的如何使用Vue的思想封装一个Storage全部内容，希望文章能够帮你解决如何使用Vue的思想封装一个Storage所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。