Saturday, May 25, 2024
HomeSoftware EngineeringLearn how to Override Strategies in localStorage? | by Sabesan Sathananthan

Learn how to Override Strategies in localStorage? | by Sabesan Sathananthan

Use localStorage with JavaScript.

Photograph by Lia Trevarthen on Unsplash

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 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.

Many builders like the concept of ​​rewriting, first retaining the unique methodology after which rewriting the strategy immediately on localStorage like beneath.

Nonetheless, this fashion of writing will not be 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() methodology 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 carefully, setItem and getItem are inherited from Storage __proto__ pseudo property.

Then we immediately override the above localStorage.__proto__ methodology.

This implements the actual 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 immediately 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 method, the diploma of freedom is comparatively larger, and there’s no compatibility drawback 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 it’s worthwhile 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 title has not modified.

4.1 Direct protection, no impact

In the event you use the next methodology to cowl immediately, it can haven’t 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 will not be immediately writable.

4.2 Overriding with Object.defineProperty

Since there isn’t any writableattribute, we are going to add one to it. We are able to override localStorage with Object.defineProperty.

However you may’t use the above writing methodology with one layer outdoors. In the event you immediately give the above myLocalStorage to localStorage then it can 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. In the event you want a local methodology then you can even function it.

On this article, we don’t particularly implement a perform akin to setting the expiration time. However discuss how you can rewrite localStorage or the strategies in it from one other perspective.

Extra content material at Join our free weekly publication. Comply with us on Twitter, LinkedIn, YouTube, and Discord.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments