HTML5 client local storage sessionstorage and storage events

First you can take a look at the JavaScript local storage practices (HTML5 localstorage and IE UserData)
Sessionstorage and the localstorage mentioned above are very familiar, and the method is almost the same:

Very easy to understand interface:

Sessionstorage.getitem (Key): Gets the value that the specified key is stored locally sessionstorage.setitem (key,value) : Store value to key field Sessionstorage.removeitem (key): Deletes the specified key locally stored values Sessionstorage.length is the number of items Sessionstorage

Directly on the demo:http://www.css88.com/demo/sessionstorage/

Similarities and differences of Sessionstorage and Localstorage

Sessionstorage and Localstorage in a different place, the storage of sessionstorage data is specific to a session only, that is, the data is only kept to the browser close, when the browser closes and reopen the page, the previous storage has been cleared. While Localstorage is a persistent store, it is not limited to sessions.

Sessionstorage and Localstorage provide key () and length to facilitate the implementation of stored data traversal, such as the following code:
[code= "JavaScript"]
var storage = Window.localstorage;
For (var i=0, len = storage.length; i < Len; i++) {
var key = Storage.key (i);
var value = Storage.getitem (key);
Console.log (key + "=" + value);
}
[/code]

The clear () function of the sessionstorage and Localstorage is used to clear the local stored data of the same origin, such as Localstorage.clear (), which will delete all local stored localstorage data of the same origin. For session Storage, it empties only the data stored in the current session.

Closing a page causes sessionstorage data to be purged, but refreshing or reopening the new page data is still present if you need to store only a small amount of temporary data. We can use Sessionstorage. Or make small interactions between pages.

Sessionstorage and Localstorage have the same method storage event, and the storage action cannot be canceled in the stored event's handler function. Storing events is just a notification that the browser gives you after the data has changed. The storage event is triggered when the SetItem (), RemoveItem (), or clear () methods are called and the data really changes. Note that the condition here is that the data really has changed. That is, if the current storage area is empty, then calling clear () will not trigger the event. Or you can set a value that is the same as the existing value by SetItem (), and the event is not triggered. It is triggered when a storage area is changed, which contains many useful properties:

• Storagearea: Indicates the storage type (session or local)
• key: The key where the change occurred
• OldValue: The original value of key
• newvalue: New value for key
• url*: Key changes the URL that occurred

* Note: The URL attribute in the earlier specification is the URI attribute. Some browsers publish earlier and do not contain this change. For compatibility reasons, you should check if it exists before using the URL property, and if you do not have a URL attribute, you should use the URI property
If the clear () method is called, then key, OldValue, and newvalue are set to null.
PS. It is normal to store and read in Firefox and Chrome, but there seems to be a problem with triggering the storage event, which does not trigger the storage event of window after SetItem, but accesses a.html and b.html at the same time. The SetItem in page a can trigger the storage event of window in page B, and the same setitem on page B can trigger the storage event of window in page A. In IE9, the setting value of the page itself can trigger the storage event of the current page, and the current page setting can trigger the storage event of the other page in the same "origin", which seems to make more sense.

Directly on the demo, colleagues open the two pages (the code is identical):

Http://www.css88.com/demo/sessionStorage/index2.html

Http://www.css88.com/demo/sessionStorage/index3.html

Thanks: Mr.prime in the storage incident, and also recommended his writing about storage blog: http://www.cnblogs.com/AndyWithPassion/archive/2011/07/04/ Html5_localstorage.html

HTML5 client local storage sessionstorage and storage events