JavaScript storage Event storageArea Property: Storage Object

Table of Contents

JavaScript `storage` Event `storageArea` Property: Understanding the Storage Object

The storage event in JavaScript is triggered whenever changes are made to web storage (either localStorage or sessionStorage). This event provides valuable information about the changes, including which storage area was modified. The storageArea property of the storage event gives you a direct reference to the storage object (localStorage or sessionStorage) that triggered the event. Understanding this property is crucial for building responsive and synchronized web applications.

What is the `storageArea` Property?

The storageArea property of the storage event is a read-only property that returns a reference to the Storage object that was modified. This could be either the localStorage or the sessionStorage object, depending on where the change occurred. This allows you to determine which storage area triggered the event and how to handle it accordingly.

Syntax

The syntax for accessing the storageArea property is:

event.storageArea;

Here, event is the storage event object.

Key Aspects

Read-Only: The storageArea property is read-only, meaning you cannot set it to another value.
Storage Object: It provides an object identical to what you would access through localStorage or sessionStorage.
Contextual: It gives you the context of where the change occurred, which is vital for maintaining consistency between different browser tabs or windows.

Purpose of the `storageArea` Property

The primary purpose of the storageArea property is to allow you to identify the specific storage object that caused the storage event to fire. This is particularly useful in situations where you’re using both localStorage and sessionStorage within the same application and need to handle changes differently based on which storage area was affected.

Examples of Using the `storageArea` Property

Let’s look at some practical examples of how to use the storageArea property to enhance your web applications.

Basic Example: Identifying the Storage Area

This example demonstrates how to use the storageArea property to identify whether the event was triggered by localStorage or sessionStorage.

<!DOCTYPE html>
<html>
<head>
    <title>Storage Area Example</title>
</head>
<body>
    <h1>Storage Area Property Example</h1>
    <p id="storageOutput1">No storage event triggered yet.</p>

    <script>
        window.addEventListener('storage', function(event) {
            const outputElement1 = document.getElementById('storageOutput1');
            if (event.storageArea === localStorage) {
                outputElement1.textContent = 'localStorage was modified.';
            } else if (event.storageArea === sessionStorage) {
                outputElement1.textContent = 'sessionStorage was modified.';
            } else {
                outputElement1.textContent = 'Some other storage area was modified.';
            }
        });
        //Example to trigger localStorage event
        localStorage.setItem('testKey1', 'testValue1');


</script>
</body>
</html>

Output:

Initially:

No storage event triggered yet.

After triggering localStorage update (either by opening this page in two tabs or using browser’s console to modify storage).

localStorage was modified.

Explanation:

An event listener is set up to listen for the storage event on the window object.
The storageArea property of the event object is compared with localStorage and sessionStorage to determine which storage was modified.
The appropriate message is then displayed in the p element based on which storage triggered the event.
Initial localStorage.setItem at end of script triggers and changes the value to localStorage was modified.

Example: Syncing Storage Changes Across Tabs

This example shows how you can use the storageArea property to keep data in sync across multiple browser tabs when one tab modifies local storage.

<!DOCTYPE html>
<html>
<head>
    <title>Storage Area Sync</title>
</head>
<body>
    <h1>Storage Sync Across Tabs</h1>
    <p>Key: <span id="syncKey"></span>, Value: <span id="syncValue"></span></p>

    <script>
        const syncKeyElement = document.getElementById('syncKey');
        const syncValueElement = document.getElementById('syncValue');
        const initialKey = 'syncKey1';
        const initialValue = localStorage.getItem(initialKey) || 'Initial Value';
        syncKeyElement.textContent = initialKey;
        syncValueElement.textContent = initialValue;

        window.addEventListener('storage', function(event) {
            if (event.storageArea === localStorage && event.key === initialKey) {
                syncKeyElement.textContent = event.key;
                syncValueElement.textContent = event.newValue;
            }
        });

        //Example to trigger change.
        localStorage.setItem(initialKey, 'updated value');


</script>
</body>
</html>

Output:

Initially:

Key: syncKey1, Value: Initial Value

After triggering localStorage update (either by opening this page in two tabs or using browser’s console to modify storage).

Key: syncKey1, Value: updated value

Explanation:

It sets up the event listener to respond to storage events.
When a storage event occurs, it checks if the modified storage area is localStorage and if the modified key is the same as initialKey
If these conditions are met, the application updates the displayed key and value.
Example at end of the script demonstrates how an external change to localStorage triggers the updates.

Example: Dynamic UI Update Based on Storage

In this more complex example, let’s modify the UI based on changes in local storage. We will create an input field, and the value in the field will be updated across all open tabs whenever there’s a change in the localStorage.

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic UI Update</title>
</head>
<body>
    <h1>Dynamic UI Update on Storage Change</h1>
    <label for="storageInput">Input Value:</label>
    <input type="text" id="storageInput" value="">

    <script>
    const storageInput1 = document.getElementById('storageInput');
    const storageKey1 = 'uiInput';

    //Initialize value from storage if available
    storageInput1.value = localStorage.getItem(storageKey1) || '';

    storageInput1.addEventListener('input', function() {
      localStorage.setItem(storageKey1, this.value);
      });

    window.addEventListener('storage', function(event) {
        if(event.storageArea === localStorage && event.key === storageKey1) {
        storageInput1.value = event.newValue;
        }
     });


</script>
</body>
</html>

Output:

Initially: An empty text input field

After modifying input in one tab and the second tab is opened:

The second tab will display the value already entered in the first tab
Modifying the text field in any tab will update the values in other open tabs.

Explanation:

An input field is set up to handle user input.
The initial input value is set from localStorage if found.
The event listener is added on input change to update local storage.
Storage event listener is set up to update input value when storage event is triggered by other tabs.

Browser Support

The storageArea property of the storage event has excellent support across all modern browsers, including Chrome, Firefox, Safari, and Edge. This broad compatibility ensures that you can rely on this property for your web applications without worrying about browser-specific issues.

Browser	Support
Chrome	Fully Supported
Firefox	Fully Supported
Safari	Fully Supported
Edge	Fully Supported
Opera	Fully Supported

Key Takeaways

The storageArea property of the storage event provides a direct reference to the Storage object that was modified.
It allows you to distinguish between changes made to localStorage and sessionStorage.
It is essential for synchronizing data and UI updates across multiple browser tabs or windows.
It has robust browser support, making it a reliable feature for web applications.
It enables creating highly interactive and responsive user experiences that react dynamically to storage changes.

By understanding and utilizing the storageArea property, you can build more sophisticated and robust web applications that can efficiently manage and synchronize data across different browser contexts. This is particularly useful for applications that require real-time updates and shared data storage. 🚀