I usually need to rewrite
localStorage to implement a sure operate. What are the strategies to rewrite the strategies in
localStorage? There are numerous builders who need to rewrite the strategies in
localStorageto understand 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 maintaining the unique technique after which rewriting the strategy instantly on localStorage like beneath.
Nonetheless, this fashion of writing isn’t overriding the strategy
setItem(), however so as to add a
setItem attribute to
localStorage. When the worth attribute of the strategy is asserted, the native
setItem() technique is overwritten.
I haven’t examined it an excessive amount of, however in some browsers, this attribute can be ignored and inflicting our rewriting to fail.
If we glance intently, setItem and getItem are inherited from Storage
__proto__ pseudo property.
Then we instantly 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 instantly modify the strategy of
localStorage itself, however wrap a layer on the skin, after which use
localStorage to understand the storage operate on the backside layer.
On this method, the diploma of freedom is comparatively greater, and there’s no compatibility downside in Part 1. Solely the identify used has modified and the properties and strategies in
localStorage are utterly blocked.
If you wish to use a customized object with out the pack then you want to implement all of the properties and strategies. It isn’t potential to mock a way alone just like the above.
Proxyequal to utterly overriding the
localStorage variable. Higher than Part 3 in that the identify has not modified.
4.1 Direct protection, no impact
In case you use the next technique to cowl instantly, it should 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 isn’t any writable: true attribute, which signifies that
localStorage isn’t instantly writable.
4.2 Overriding with Object.defineProperty
Since there isn’t any
writableattribute, we are going to add one to it. We will override
However you possibly can’t use the above writing technique with one layer exterior. In case you instantly give the above
localStorage then it should generate infinite recursion (to keep away from deceptive, the mistaken writing technique won’t be written right here).
I’ve made a backup of
localStorage right here. In case you want a local technique then you can even function it.
On this article, we don’t particularly implement a operate corresponding to setting the expiration time. However speak about tips on how to rewrite
localStorage or the strategies in it from one other perspective.
Extra content material at PlainEnglish.io. Join our free weekly publication. Observe us on Twitter, LinkedIn, YouTube, and Discord.