gpt4 book ai didi

javascript - sessionStorage 代理类作用域

转载 作者:行者123 更新时间:2023-11-30 09:30:56 27 4
gpt4 key购买 nike

我想知道如何从我的自定义方法中访问 native sessionStorage 范围。

我的例子:

https://jsfiddle.net/3mc7ao7j/1/

在第 3 行,我希望能够在对数据执行更改后代理到我的 native sessionStorage

我如何再次访问该范围?我知道我可以打电话:

sessionStorage.setItem()

但这很有效,因为它是全局可用的,而且这样做感觉不对。主要是因为我还想知道如何在没有全局可用对象的情况下执行此操作,以便我可以学习如何代理其他对象。

最佳答案

一些 window 对象,如 location 是只读的,在它们之上创建抽象或使用 DI 进行测试可能很有用。

sessionStorage 应该按原样使用。通常不需要对其进行抽象。如果要扩展或修改其功能,可以创建自定义类。它可以实现 Storage界面或拥有自己的界面。

Proxy 的使用在这里是不合理的。它很慢并且限制了代码在 ES5 环境中的使用。

自定义类或对象可以只包装原始的sessionStorage 方法。由于 Storage API 很小,包装器类导致大约 20 行代码:

class CustomSessionStorage {
get length() {
return sessionStorage.length;
}

getItem(key) {
return sessionStorage.getItem(key);
}
...
}

sessionStorage 对象是奇异的。虽然继承自Storage,但Storage不是构造函数,sessionStorage方法应该直接绑定(bind)到sessionStorage,所以不可能让它只与 CustomSessionStorage.prototype = sessionStorage 一起工作。此外,sessionStorage 还应绑定(bind) length 属性描述符。

扩展它的更通用的方法是提供一个包装原始方法并可以进一步扩展的基类:

function BaseSessionStorage() {}

for (let prop of Object.getOwnPropertyNames(Storage.prototype)) {
if (typeof sessionStorage[prop] === 'function') {
// bind all sessionStorage methods
BaseSessionStorage.prototype[prop] = sessionStorage[prop].bind(sessionStorage);
} else {
// a proxy for other props, length is read-only getter
Object.defineProperty(BaseSessionStorage.prototype, prop, {
get: () => sessionStorage[prop],
set: val => { sessionStorage[prop] = val }
});
}
}

class CustomSessionStorage extends BaseSessionStorage {
getItem(key) {
return super.getItem(key);
}
// the rest of API is inherited
}

关于javascript - sessionStorage 代理类作用域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46339476/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com