localStorage eventListener is not called

Question

I added an eventListener to the window DOM-Object and want to keep track of the changes made to localStorage.

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

    <script language="JavaScript"><!-- 
        window.addEventListener('storage', storageEventHandler, false);
        function storageEventHandler(evt){
            console.log("oldValue: " + evt.oldValue );
            console.log("storage event called key: " + evt.key );
            console.log("newValue: " + evt.newValue );

        }
        $(document).ready(function(event) {
            $('#link1').click(function(event){
                event.preventDefault();
                localStorage.setItem('page', 2000);
                console.log(localStorage.getItem('page'));
            });
            $('#link2').click(function(event){
                event.preventDefault();
                localStorage.setItem('page', 998);
                console.log(localStorage.getItem('page'));

            });

         });
    </script>
</head>
</html>

Somehow the storageEventHandler is never called even though the localStorage value is changed when I click link1 or link2. Any help is much appreciated.

whether or not the `storage` event gets fired, depends on the browser. — jAndy, Mar 20 '11 at 19:17
That's correct, see e.g. http://code.google.com/p/chromium/issues/detail?id=48159. — pimvdb, Mar 20 '11 at 20:14
in react i used window.dispatchEvent(new Event("storage")) after changing storage. this will call listeners manually — Dabir Rahamni, May 24 '23 at 12:40

score 47 · Accepted Answer · edited Nov 28 '21 at 15:49

47

Some browsers don't support the storage event, and most of the browsers that do support it will only call it when the storage is changed by a different window/tab. So, open your page up in two windows. Click the links in one window and you will probably see the event in the other.

The assumption is that your page will already know all interactions with localStorage in its own window and only needs notification when a different window changes things. This, of course, is a foolish assumption. But, localStorage is a new thing. Hopefully, they'll eventually figure it all out.

edited Nov 28 '21 at 15:49

Mir-Ismaili

13,974
8
82
100

answered Jul 27 '11 at 14:33

Nathan Bubna

6,823
2
35
36

15

unfortunately, the aforementioned time "eventually" hasn't come yet :( – kumarharsh May 17 '14 at 11:54
Sadly, that's true. I hope to make time to revisit this eventually. I have some wild hack ideas for working around some of these things. I just don't have much time for such experiments these days. – Nathan Bubna May 19 '14 at 15:22
1

http://html5demos.com/storage-events – vsync Jun 15 '14 at 15:14
8

7 years later and this still doesn't work as one would assume. – BML91 Oct 17 '18 at 11:54
1

Not sure why but the "eventually" part hasn't been fixed yet. IMO, that could have been a very useful feature. – M. Nunisa Oct 20 '20 at 03:41
@BML91 Make that ten years – jao Aug 18 '21 at 11:00

score 30 · Answer 2 · answered Sep 26 '13 at 05:19

30

The storage event handler will only affect other windows. Whenever something changes in one window inside localStorage all the other windows are notified about it and if any action needs to be taken it can be achieved by a handler function listening to the storage event.

For same window you have to manually call the storageEventHandler function after localStorage.setItem() is called to achieve the same behaviour in the same window.

answered Sep 26 '13 at 05:19

subham.saha1004

794
8
6

1

That's the answer. Thanks. – user2422869 Apr 02 '15 at 12:40
note: _IE10 : The storage event is fired even on the originating document where it occurred._ [resource](https://caniuse.com/#search=localstorage) – ykaragol Oct 09 '18 at 08:40

localStorage eventListener is not called

2 Answers2

Linked