I usually need to rewrite
localStorage to implement a sure perform. What are the strategies to rewrite the strategies in
localStorage? There are lots of builders who need to rewrite the strategies in
localStorageto comprehend the expiration time of the important thing, or to observe the learn and write of the important thing. So what are the strategies to override the strategies in
localStorage. That is my forty third Medium article.
Many builders like the concept of rewriting, first retaining the unique technique after which rewriting the tactic straight on localStorage like beneath.
Nevertheless, this fashion of writing isn’t overriding the tactic
setItem(), however so as to add a
setItem attribute to
localStorage. When the worth attribute of the tactic is said, the native
setItem() technique is overwritten.
I haven’t examined it an excessive amount of, however in some browsers, this attribute shall be ignored and inflicting our rewriting to fail.
If we glance carefully, setItem and getItem are inherited from Storage
__proto__ pseudo property.
Then we straight override the above
This implements the true override of the
However there’s nonetheless an issue right here. Each
sessionStorage inherit from Storage. After rewriting the properties or strategies on
localStorage.__proto__, the strategies in
sessionStorage are additionally rewritten.
We don’t straight modify the tactic of
localStorage itself, however wrap a layer on the skin, after which use
localStorage to comprehend the storage perform on the backside layer.
On this manner, the diploma of freedom is comparatively larger, and there’s no compatibility drawback in Part 1. Solely the identify used has modified and the properties and strategies in
localStorage are fully blocked.
If you wish to use a customized object with out the pack then you could implement all of the properties and strategies. It isn’t attainable to mock a technique alone just like the above.
Proxyequal to fully overriding the
localStorage variable. Higher than Part 3 in that the identify has not modified.
4.1 Direct protection, no impact
Should you use the next technique to cowl straight, it is going to haven’t any impact.
window.localStorage = Object.create(null); console.log(window.localStorage); //nonetheless native
We get the property descriptor of
Object.getOwnPropertyDescriptor. It may be discovered that there is no such thing as a writable: true attribute, which signifies that
localStorage isn’t straight writable.
4.2 Overriding with Object.defineProperty
Since there is no such thing as a
writableattribute, we’ll add one to it. We are able to override
However you may’t use the above writing technique with one layer exterior. Should you straight give the above
localStorage then it is going to generate infinite recursion (to keep away from deceptive, the incorrect writing technique won’t be written right here).
I’ve made a backup of
localStorage right here. Should you want a local technique then you may as well function it.
On this article, we don’t particularly implement a perform resembling setting the expiration time. However discuss the way to rewrite
localStorage or the strategies in it from one other perspective.