storage

16 March, 2023

Contributors

Milsaware

@milsaware

About

The storage event is a browser event that is triggered when changes are made to the storage area (either localStorage or sessionStorage) of a document in a different window or tab. When this event is fired, the browser updates the storage area of the current window/tab to reflect the changes made in the other window/tab.

The storage event is useful for implementing real-time synchronisation of data between different browser windows or tabs that are viewing the same application. For example, if a user is working on an application in one tab and makes changes to a data object, those changes can be automatically updated and reflected in other open tabs of the same application using the storage event.

Event listener

Here is an example of how to use the addEventListener() method to handle the storage event:

// add event listener for storage event
window.addEventListener('storage', function(event) {
    console.log('Storage event fired!');

    // check if the storage area was modified
    if (event.storageArea === localStorage) {
        console.log('localStorage was modified');
    } else if (event.storageArea === sessionStorage) {
        console.log('sessionStorage was modified');
    }

    // get the key and values that were changed
    const key = event.key;
    const oldValue = event.oldValue;
    const newValue = event.newValue;

    // update the UI based on the changes
    console.log('Key ' + key + ' was changed from ' + oldValue + ' to ' + newValue);
});

Here, the addEventListener() method is used to add an event listener to the window object that listens for the storage event. When the event is fired, the callback function is called and the event object is passed as a parameter. The console.log() method is used to output information about the event to the console.

Inside the callback function, the storageArea property of the event object is used to check which storage area was modified (localStorage or sessionStorage). Then, the key, oldValue, and newValue properties of the event object are used to get the key and values that were changed. Finally, the console.log() method is used to output information about the key and value changes to the console.

Property

Here's an example of how to use the onstorage property:

// Define the function to handle storage events
function handleStorageEvent(event) {
    console.log(`Storage event detected - ${event.key}: ${event.newValue}`);
}

// Assign the function to the onstorage property of the window object
window.onstorage = handleStorageEvent;

Here, the handleStorageEvent function will be called whenever a change is made to the storage area, and it will log a message to the console with information about the change.

Inline

The onstorage attribute can also be used inline in HTML:

<body onstorage="console.log('Storage event detected - ' + event.key + ': ' + event.newValue);">
    <h1>onstorage inline example</h1>
    <p>This is an example of using the onstorage property inline.</p>
</body>

Here, the onstorage attribute is added to the body element and is assigned a function that will be called whenever a change is made to the storage area. The function logs a message to the console with information about the change, just like in the previous example.

While using the onstorage property inline is possible, it is generally not recommended because it can make the HTML code less readable and harder to maintain. It's better to separate the JavaScript code from the HTML and define event handlers using the addEventListener method or by assigning a function to the onstorage property in a separate JavaScript file.

Programmatic trigger

There is no storage() method to trigger storage events programmatically in JavaScript. The storage event is triggered automatically by the browser when a change is made to the storage area (localStorage or sessionStorage).

However, you can change the storage data programmatically using the setItem() method or the removeItem() method of the localStorage or sessionStorage objects, and the storage event will be triggered automatically if there is a change in the storage area.

// Set an item in the localStorage
localStorage.setItem('myKey', 'myValue');

// Remove an item from the sessionStorage
sessionStorage.removeItem('myOtherKey');

Here, the setItem() method is used to add a new key-value pair to the localStorage, and the removeItem() method is used to remove a key-value pair from the sessionStorage. Whenever these methods are called, a storage event will be triggered automatically if there is a change in the storage area, and any event listeners that have been registered for the storage event will be called.

javascript