Storage events of localStorge

With the popularity of h5 and mobile development, localStorage is no longer a stranger. I believe that most of my shoes have been touched by it and used it, however, I believe there are still many children's shoes that are hard to understand or even have no contact with. Today we will mainly talk about storage.

First, let's look at w3c descriptions about storage:

4.4 The storage eventThe storage event is fired when a storage area changes, as described in the previous two sections (for session storage, for local storage).When this happens, the user agent must queue a task to fire an event with the name storage, which does not bubble and is not cancelable, and which uses the StorageEvent interface, at each Window object whose Document object has a Storage object that is affected.

It is clear that it is triggered when the stored storage data changes, but it is different from the click events that will bubble and be able to cancel. At the same time, this sentence is the focus, when the storage changes, triggering this event will call the storage events of all other windows in the same domain, however, it triggers storage itself, that is, the current window does not trigger this event (except for the exception of ie, it also triggers storage events ). This sentence is a bit difficult to understand.

DEMO:

Under page a, there is an input box used to store the store. It is bound to a storage event. At this time, write new data and click Save. At this time, the new sotre data is saved, however, the storage event of page a is not triggered,

In page B, the bound storage event is triggered. (Ps: The premise page a and B are in the same domain, and both open different windows in different States );

Page a code:

  
   save<script>  (function(D){    var val = D.getElementsByTagName("input")[0],      btn = D.getElementsByTagName("button")[0];    btn.onclick = function(){      var value = val.value;      if(!value) return;      localStorage.setItem("key", val.value);    };    window.addEventListener("storage", function(e){      console.log(e);    });  })(document);</script>

Page B code:

  
   <script>  window.addEventListener("storage", function(e){    console.log(e);    document.write("oldValue: "+ e.oldValue + " newValue:" + e.newValue)  });</script>

Check whether the storage event is useful here. It is the best choice to use it for Multi-Window communication, for example, the basic data of a public content area is extracted from the store, and most pages in this area are available. When a user opens multiple pages, if data is modified on one of the pages, it is convenient to synchronously update other pages (the current page must be processed in other ways). Of course, it is not only used for inter-window communication, more people can use its features.

Ps:

In addition, the attributes of the stored events in the demo page B are commonly used as follows:

OldValue: The value before update. If this key is newly added, this attribute is null.

NewValue: The updated value. If the key is deleted, this attribute is null.

Url: the url of the webpage that originally triggered the storage event.

Key: The key name of the storage store;

In addition, although the store is good, do not greedy "Cup" Oh, a large number of redundant data storage is the end of the disaster, and the store security is limited, important data should also be noted.