30

Is there any way to detect any change in HTML5 localStorage and then call certain functions if there is any change indeed? I have certain keys stored with names as "e1", "e2", "e3", and so on...

i want to detect if any key is removed or added and then trigger some functions if there is any change...

Devashish
  • 1,159
  • 1
  • 9
  • 18
  • possible duplicate of [How to bind to localStorage change event using jQuery for all browsers?](http://stackoverflow.com/questions/4671852/how-to-bind-to-localstorage-change-event-using-jquery-for-all-browsers) – Blazemonger Apr 10 '14 at 17:19

2 Answers2

39

According to specs Storage interface emits storage event on global objects which it affects.

So in your case you may just add handler

window.addEventListener("storage", function () {
    // do your checks to detect
    // changes in "e1", "e2" & "e3" here
}, false);

There is no need for jQuery even.

nilfalse
  • 2,332
  • 2
  • 19
  • 16
  • 10
    @madprops because events will be fired in secondary tabs (at same domain), not in master tab. https://stackoverflow.com/a/4689033/1221082 – Denis Nov 09 '17 at 15:09
  • 2
    According to spec, this won't be fired on same page or tab making the change. Only on other tabs. – Aaron Mar 10 '20 at 19:27
1

The localDataStorage interface (a handy wrapper for the HTML5 localStorage API) conveniently fires change events on the same page/tab/window in which the storage event occurred. Disclaimer: I am the author of the interface.

Once you install localDataStorage, this sample code will let you see those change events:

function nowICanSeeLocalStorageChangeEvents( e ) {
    console.log(
        "subscriber: "    + e.currentTarget.nodeName + "\n" +
        "timestamp: "     + e.detail.timestamp + " (" + new Date( e.detail.timestamp ) + ")" + "\n" +
        "prefix: "        + e.detail.prefix    + "\n" +
        "message: "       + e.detail.message   + "\n" +
        "method: "        + e.detail.method    + "\n" +
        "key: "           + e.detail.key       + "\n" +
        "old value: "     + e.detail.oldval    + "\n" +
        "new value: "     + e.detail.newval    + "\n" +
        "old data type: " + e.detail.oldtype   + "\n" +
        "new data type: " + e.detail.newtype
    );
};
document.addEventListener(
    "localDataStorage"
    , nowICanSeeLocalStorageChangeEvents
    , false
);

The example nowICanSeeLocalStorageChangeEvents() function just spits out key details, but you could easily use it to take specific actions like you mentioned.

For example, if you add a new key

lds.set( 'e2', 101 );

then you'll get something like

message: create new key
method: set
key: e2
old value: undefined
new value: 101
old data type: undefined
new data type: integer

When you delete a key

lds.remove( 'e2' );

then you'll see something like

message: remove key
method: remove
key: e2
old value: 101
new value: undefined
old data type: integer
new data type: undefined

so you can easily respond to local storage key events.

Mac
  • 1,199
  • 18
  • 24
  • 2
    Why does ugly(fied) code even exist on github? We people like to be free and open! You should never use a open-source licence (like BSD) to pulish your close source software – alphakevin May 08 '21 at 07:23
  • localStorage.clear() doesn't seem to fire the listener for whatever reason. Is it on purpose? – Eli Mashiah Oct 25 '21 at 10:56
  • @EliMashiah: The clear() method does not fire the the custom change event. Good catch! This is an oversight on my part. I'll add this fix to the next minor release. Thanks again! – Mac Oct 26 '21 at 18:30
  • @EliMashiah: patch 1.3.1 of [localStorage](https://github.com/macmcmeans/localDataStorage) fixes the error you discovered. Thanks for spotting it! – Mac Feb 21 '22 at 23:44