Use localStorage with JavaScript.
I typically need to rewrite localStorage to implement a sure operate. What are the strategies to rewrite the strategies in localStorage? There are lots of 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 holding the unique methodology after which rewriting the tactic straight on localStorage like under.
Nevertheless, this manner of writing will not 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() methodology 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 straight override the above localStorage.__proto__ methodology.
This implements the true override of the setItem() methodology.
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.
We don’t straight modify the tactic 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 fully blocked.
If you wish to use a customized object with out the pack then it’s good to implement all of the properties and strategies. It isn’t attainable to mock a way alone just like the above.
Use Object.definePropertyor Proxyequal to fully overriding the localStorage variable. Higher than Part 3 in that the identify has not modified.
4.1 Direct protection, no impact
If you happen to use the next methodology to cowl straight, it is going to haven’t any impact.
window.localStorage = Object.create(null); console.log(window.localStorage); //nonetheless nativeWe get the property descriptor of localStorage via Object.getOwnPropertyDescriptor. It may be discovered that there isn’t a writable: true attribute, which signifies that localStorage will not be 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’ll be able to’t use the above writing methodology with one layer outdoors. If you happen to straight give the above myLocalStorage to localStorage then it is going to generate infinite recursion (to keep away from deceptive, the improper writing methodology won’t be written right here).
I’ve made a backup of localStorage right here. If you happen to want a local methodology then you may also function it.
On this article, we don’t particularly implement a operate comparable to setting the expiration time. However speak about the right 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.