[ad_1]
Use localStorage with JavaScript.
I typically need to rewrite localStorage to implement a sure perform. What are the strategies to rewrite the strategies in localStorage? There are numerous builders who need to rewrite the strategies in localStorageto appreciate 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 thought of rewriting, first retaining the unique technique after which rewriting the tactic straight on localStorage like beneath.
Nonetheless, this fashion of writing shouldn’t be overriding the tactic setItem(), however so as to add a setItem attribute to localStorage. When the worth attribute of the tactic is asserted, the native setItem() technique is overwritten.
I haven’t examined it an excessive amount of, however in some browsers, this attribute will likely be ignored and inflicting our rewriting to fail.
If we glance intently, setItem and getItem are inherited from Storage __proto__ pseudo property.
Then we straight override the above localStorage.__proto__ technique.
This implements the true override of the setItem() technique.
However there’s nonetheless an issue right here. Each localStorage and 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 surface, after which use localStorage to appreciate the storage perform on the backside layer.
On this means, the diploma of freedom is comparatively greater, and there’s no compatibility downside in Part 1. Solely the title 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 have to implement all of the properties and strategies. It isn’t doable to mock a technique alone just like the above.
Use Object.definePropertyor Proxyequal to fully overriding the localStorage variable. Higher than Part 3 in that the title has not modified.
4.1 Direct protection, no impact
Should you use the next technique to cowl straight, it should don’t have any impact.
window.localStorage = Object.create(null); console.log(window.localStorage); //nonetheless native
We get the property descriptor of localStorage by way of Object.getOwnPropertyDescriptor. It may be discovered that there isn’t any writable: true attribute, which implies that localStorage shouldn’t be straight writable.
4.2 Overriding with Object.defineProperty
Since there isn’t any writableattribute, we’ll add one to it. We are able to override localStorage with Object.defineProperty.
However you possibly can’t use the above writing technique with one layer outdoors. Should you straight give the above myLocalStorage to localStorage then it should generate infinite recursion (to keep away from deceptive, the fallacious 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 corresponding to setting the expiration time. However discuss learn how to rewrite localStorage or the strategies in it from one other perspective.
Extra content material at PlainEnglish.io. Join our free weekly e-newsletter. Comply with us on Twitter, LinkedIn, YouTube, and Discord.
[ad_2]