Use localStorage with JavaScript.
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.
1. Rewrite straight on localStorage
Many builders like the thought of rewriting, first protecting the unique technique after which rewriting the strategy straight on localStorage like under.
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 said, 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.
2. Override the strategy on localStorage.__proto__
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 actual override of the setItem() technique.
Get Sabesan Sathananthan’s tales in your inbox
Be a part of Medium free of charge to get updates from this author.
However there may be 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.
3. Exterior packaging layer
We don’t straight modify the strategy of localStorage itself, however wrap a layer on the surface, after which use localStorage to comprehend the storage perform on the backside layer.
On this manner, the diploma of freedom is comparatively increased, and there’s no compatibility downside in Part 1. Solely the title 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 that you must implement all of the properties and strategies. It isn’t attainable to mock a way alone just like the above.
4. Override localStorage
Use Object.definePropertyor Proxyequal to utterly overriding the localStorage variable. Higher than Part 3 in that the title has not modified.
4.1 Direct protection, no impact
In the event you use the next technique to cowl straight, it’s going to don’t have any impact.
window.localStorage = Object.create(null); console.log(window.localStorage); //nonetheless native
We get the property descriptor of localStorage by Object.getOwnPropertyDescriptor. It may be discovered that there isn’t a writable: true attribute, which signifies that localStorage isn’t straight writable.
4.2 Overriding with Object.defineProperty
Since there isn’t a writableattribute, we’ll add one to it. We will override localStorage with Object.defineProperty.
However you possibly can’t use the above writing technique with one layer outdoors. In the event you straight give the above myLocalStorage to localStorage then it’s going to generate infinite recursion (to keep away from deceptive, the fallacious writing technique is not going to be written right here).
I’ve made a backup of localStorage right here. In the event you want a local technique then you can too function it.
5. Abstract
On this article, we don’t particularly implement a perform comparable to setting the expiration time. However speak about the best way to rewrite localStorage or the strategies in it from one other perspective.
Extra content material at PlainEnglish.io. Join our free weekly e-newsletter. Observe us on Twitter, LinkedIn, YouTube, and Discord.
