| by Arround The Web | No comments

What is the JavaScript StorageEvent newValue Property

JavaScript comes with a wide range of event handlers that perform special tasks based on their names. The “storage” is one such event handler that corresponds to the window interface. It fires when the user changes the local storage items that are stored in the web browser. To access these modified items, JavaScript offers a property named “newValue”. This property fetches the key-value pairs of local storage that have been modified. It is mostly used to retrieve the string that contains the current value of the modified item.

This guide illustrates the objective and the practical implementation of the StorageEvent “newValue” property.

What is the JavaScript StorageEvent “newValue” Property?

The StorageEvent “newValue” is a read-only property that returns the new value of the storage item which has been changed. It corresponds to the “storage” event that occurs when the changes happen in the window’s storage area.

Syntax

event.newValue

The above syntax returns the new changed value of the storage item when the “storage” event triggers.

Example: Applying the StorageEvent “newValue” Property to Return the Changed Storage Item’s New Value

This example utilizes the “newValue” property to retrieve the new value of the changed window’s storage item.

HTML Code

Let’s, overview the following HTML code:

<body align="center">
<h2>JavaScript StorageEvent newValue Property</h2>
<button onclick="change()">Click to Get Old & New(Changed) Storage Item Value</button>
<p id="sample"></p>
<p id="demo"></p>

In the above code lines:

  • The “<body>” tag specifies the body section aligned to “center”.
  • The “<h2>” tag creates the first subheading.
  • The “<button>” tag adds a button with an attached “onclick” event to invoke the user-defined function “change()” upon the event trigger.
  • The “<p>” tag defines an empty paragraph with an id “sample” to display the old value of the storage item.
  • The last “<p>” tag also adds another empty paragraph with a unique id “demo” to show the new value of the changed window’s storage item.

JavaScript Code

Next, follow the below-given code:

<script>
window.addEventListener("storage", myFunc);
localStorage.setItem("Website", "Linuxhint");
function myFunc() {
 var t = "Old Value: " + event.oldValue;
 document.getElementById("sample").innerHTML = t;
 var value = "New Value: " + event.newValue;
  document.getElementById("demo").innerHTML = value;
}
function change() {
 var x = window.open("", "myWindow", "width=200,height=150");
 x
</script>

In the above code lines:

  • First, associate the “storage” event with the newly opened window via the “addEventListener()” method and specify the “myFunc()” function to execute it upon the event trigger.
  • Next, the “localStorage” property is associated with the “setItem()” method to set the specified storage item.
  • After that, “myFunc()” function is defined that firstly shows the old value of the storage item via the “oldValue” property.
  • Now, the “getElementById()” method accesses the empty paragraph via its id “sample” to append it with the storage item value using the “innerHTML” property.
  • Next, the “value” variable is declared to retrieve the storage item’s new value that is changed using the “newValue” property and display it in the added empty paragraph that is fetched through the “document.getElementById()” method.
  • Another function “change()” is defined that uses the window “open()” method to create and open a new window named “myWindow” having the specified dimensions i.e., width and height.
  • Lastly, the “localStorage” property sets the storage item key named “website” having the new value.

Output

The output shows the old as well as the new value of the storage item that is changed upon the button click.

Conclusion

JavaScript offers the special “newValue” property that allows the users to set the new value of the modified storage item. It only works for the other documents window, not for itself. Moreover, it is linked with the “storage” event that only triggers when the changes have been done in local storage content. This guide illustrated the JavaScript StorageEvent newValue property.

Share Button

no related pages

Source: linuxhint.com

Leave a Reply