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 localStorage
to comprehend the expiration time of the important thing, or to watch 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 preserving the unique technique after which rewriting the strategy immediately on localStorage like beneath.
Nevertheless, this manner of writing shouldn’t be 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 carefully, setItem and getItem are inherited from Storage __proto__
pseudo property.

Then we immediately override the above localStorage.__proto__
technique.
This implements the actual 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 immediately modify the strategy of localStorage
itself, however wrap a layer on the skin, after which use localStorage
to comprehend the storage operate on the backside layer.
On this manner, the diploma of freedom is comparatively larger, 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’s not doable to mock a way alone just like the above.
Use Object.defineProperty
or Proxy
equal to fully overriding the localStorage
variable. Higher than Part 3 in that the identify has not modified.
4.1 Direct protection, no impact
In the event you use the next technique to cowl immediately, it would haven’t any impact.
window.localStorage = Object.create(null); console.log(window.localStorage); //nonetheless native
We get the property descriptor of localStorage
by means of Object.getOwnPropertyDescriptor
. It may be discovered that there isn’t a writable: true attribute, which implies that localStorage
shouldn’t be immediately writable.

4.2 Overriding with Object.defineProperty
Since there isn’t a writable
attribute, we’ll add one to it. We are able to override localStorage
with Object.defineProperty
.
However you may’t use the above writing technique with one layer exterior. In the event you immediately give the above myLocalStorage
to localStorage
then it would generate infinite recursion (to keep away from deceptive, the flawed writing technique won’t be written right here).
I’ve made a backup of localStorage
right here. In the event you want a local technique then you too can function it.
On this article, we don’t particularly implement a operate akin to setting the expiration time. However discuss easy methods 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.