Quoted on "h5 mobile web Development Guide":
"When the homology of the page a page changed localStorage, the rest of the page as long as homologous registered a storage event triggers"
Therefore, examples localStorage storage operation requires the following conditions:
The same browser page opens two homologous
One page modify localStorage
Another website registered storage event
Storage Event
In some complex cases, when multiple pages need to access data stored locally, you need a storage area when the content is changed, can notify the relevant page.
Web Storage API built a set of event notification mechanism, when the contents of the storage area is changed (including add, modify, delete data), it will automatically trigger the storage event, and sends it to all interested listeners. So, if you need to track changes in the storage area, you need to listen for storage in the event concerned the storage area of the page content.
LocalStorage support all the browsers support storage events, including IE8. IE 8 but does not support the W3C standard addEventListener. Therefore, in order to monitor storage event, an event which also need to detect the browser's support:
if (window.addEventListener) {
window.addEventListener("storage", handleStorage, false);
} else {
window.attachEvent("onstorage", handleStorage);
}
handleStorage callback function accepts a parameter StorageEvent, in IE, StorageEvent window.event object is stored in the inside.
function handleStorage(e) {
if (!e) {
e = window.event;
}
}
In this case, the variable e is a StorageEvent object that has many useful properties. These attributes and meanings Table:
Table Properties object and meaning StorageEvent
Property Meaning
key set or remove or modify key. When you call clear (), it was null.
oldValue change the old value before. If you are new elements, was null.
NewValue the new value after the change. If you delete an element, it was null.
storageArea This attribute is a reference to the object localStorage sessionStorage or changes
URL url triggered this change event page
After obtaining these properties, you can do whatever you want. Next, through a complete example to show you the storage localStorage event mechanism.
Suppose there are two pages save.html and show.html, trigger data changes save the page, the page will be displayed in the show-related information via pop.
In the save page, there is a text box and a Save button after entering user data text box, click the Save button, it will call saveItem () function saves the user's input to the local store. code show as below:
<input type="text" id="data" placeholder="input date to save">
<button onClick="saveItem()">保存</button>
<script>
function saveItem() {
var data = document.getElementById("data").value;
localStorage.setItem("data", data);
}
</script>
In the show page, register an event listener function to monitor storage event, because it changes the contents of the storage area concerned:
<script>
if (window.addEventListener) {
window.addEventListener("storage", showStorage);
} else {
window.attachEvent("onstorage", showStorage);
}
function showStorage(e) {
if (!e) {
e = window.event;
}
var str = "key: " + e.key +
"\nnewValue: " + e.newValue +
"\noldValue: " + e.oldValue +
"\nurl: " + e.url +
"\nstorageArea: " + e.storageArea;
alert(str);
}
</script>
At this point, if you save the page to change the contents of the storage area, it will automatically trigger the storage event page and send it to all listeners storage events.
It should be noted that only the contents of the data does time change, it will trigger the storage event. If the value is set to a value of exactly the same, or delete a stored item does not exist, it will not trigger the storage event. And, storage event is sent only to homologous, but in the other pages open, but does not send the page to trigger a change in itself (ie save.html) and is off the page. Therefore, this example should get the page from the Web server.