Is it possible to override Local Storage and Session Storage separately in HTML5?

Question

I know it's possible to override the HTML5 storage APIs by overriding Storage.prototype.getItem, setItem, removeItem and clear. But that will override those methods for both local storage and session storage.

Is it possible to just override one and not the other? Or to override both separately?

A little context: I have an existing app that makes very heavy use of both local storage and session storage. I want to add some temporary code to mirror the stuff in local storage in another storage mechanism, but I don't want to drag the session storage contents along with it.

I could update every reference to localStorage to call some wrapper function that could do the mirroring, but I really don't want to update all those calls. It would be way cleaner if I could localize this code by overriding a single set of storage methods.

Brnaba

I'm not sure but the fact that you are trying to override them at all is disturbing. – Bryce

I added some context to the question. Independent of all that, I'm also just genuinely curious :) – Brnaba

Another reason could be privacy concerns (think of GDPR cookie consent banners). As local storage is comparable to cookies. If a user opts-out of all cookies then in this case I want all calls to localStorage.setItem() to do nothing. Overriding this methods in a central place might be easier and avoids touching multiple places in your code. – Greene

Answer 1

There are several possibilities to achieve what you want. But remember, none of them should be used in production environment.

The first option detects if setItem method was called by sessionStorage or localStorage object. You could write it this way:

var _setItem = Storage.prototype.setItem;

Storage.prototype.setItem = function(key, value) { 
    if (this === window.localStorage) {
         // do what you want if setItem is called on localStorage
    } else {
         // fallback to default action
         _setItem.apply(this, arguments);
    }
}

The second one, replaces prototype of sessionStorage or localStorage object. It may look like this:

localStorage.__proto__ = Object.create(Storage.prototype);
localStorage.__proto__.setItem = function() {
    // your logic here
}

Notice, that I used __proto__ pseudo property which is non-standard, but exposed in Chrome and Firefox. (Don't know about Opera, Safari and others). However, as you can see it might be helpful during development.

Stempson

That first option is exactly what I was looking for. Thanks! – Brnaba

Why shouldn't they be used in productive environments? – Arhat

@Arhat Because they are unreliable hacks on the native objects, and they might break from one browser version to the next – Coexecutor

Answer 2

Yes, Local Storage and Session Storage override separately in HTML5

localStorage.setItem('name', Krishna); //here local storege value is Krishna
sessionStorage.name = "Krishna"; //here Session storege value is Krishna

In below we override Local Storage and Session Storage value separately

localStorage.setItem('name', Sri); //here local storege value is Sri
sessionStorage.name = "Pal"; //here Session storege value is Pal

Explain

you have answered a totally different question – Fritzsche