| by Arround The Web | No comments

What is the Use of StorageEvent storageArea Property in JavaScript

JavaScript is a versatile programming language that comes with a large variety of interactive event handlers that are helpful to perform special tasks based on their names. One such event is a “storage” event handler that is associated with the storage area (local storage) key-value pairs that have been changed. These key-value pairs are of “local” or “session” storage and are also known as the storage “object”. It assists the users to add, remove or modify the stored data.

This article demonstrates the use of the StorageEvent “storageArea” property in JavaScript.

What is the Use of StorageEvent “storageArea” Property in JavaScript?

The “StorageEvent” comes with the “storageArea” read-only property that retrieves the storage object of the changed/modified storage item. It corresponds to the “storage” event handler that only fires when the window’s storage area changes. It is such that the storage event triggers when the other window changes except itself.

Syntax

event.storageArea

According to the above syntax, the “storageArea” property does not require any additional parameter and returns an “Object” of the storage item.

Example: Applying the StorageEvent “storageArea” Property to Return the Object of the Changed Storage Item

This section shows the practical implementation of the “storageArea” property. In this example, it returns the object of the modified storage item.

HTML Code

Let’s, go through the given HTML code:

<body align="center">

<h2>JavaScript StorageEvent storageArea Property</h2>
<button onclick="change()">Click to Get Storage Object</button>
<p id="demo"></p>

</body>

In the above lines of code:

  • First, the “<body>” tag creates a body section aligned to “center”.
  • Next, the “<h2>” tag defines a level 2 subheading.
  • After that, the “<button>” tag creates a button with an attached “onclick” event to invoke the user-defined function “change()” on button click.
  • Lastly, the “<p>” tag adds an empty paragraph with the id “demo” to display the storage object as the standard output.

JavaScript Code

Next, proceed with the below-stated code:

<script>
window.addEventListener("storage", myFunc);
function myFunc() {
 var t = event.storageArea;
 document.getElementById("demo").innerHTML = t;
}
function change() {
 var x = window.open("", "myWindow", "width=150,height=150");
 x.localStorage.setItem("time", Date());
}
</script>

In the above code lines:

  • First, a “storage” event is associated with the newly opened window via the “addEventListener()” method to execute the function “myFunc()” upon the event trigger.
  • Next, the function “myFunc()” is defined that defines a variable “t” to display the object of the storage item that is retrieved using the “storageArea” property.
  • After that, it utilizes the “getElementById()” method to access the included empty paragraph via its id “demo” and display the object in it(paragraph) using the “innerHTML” property.
  • Another function “change()” is defined that applies the window “open()” method to open a new window named “myWindow” with the specified width and height, respectively.
  • The “change()” function also utilizes the “localStorage” property that sets the key named “time” with a current date as its value.
  • Algorithm: It is such that the former function including the “storageArea” property returns the object upon opening a new window in the latter function upon the button click.

Output

The output displays the storage object upon opening a new window at the button click with the help of the “storageArea” property.

Conclusion

JavaScript provides a special “storageArea” property to retrieve the object of the changed storage item. It corresponds to the “storage” event handler that only fires when the window’s storage area changes. This guide provided a brief description of the JavaScript StorageEvent “storageArea” property.

Share Button

no related pages

Source: linuxhint.com

Leave a Reply