THML5 Local Storage Web Storage

Web Storage Introduction

HTML5 defines the local storage specification Web Storage, which provides two types of storage API Sessionstorage and localstorage, The difference between the length of time the data is saved and how the data is Shared.

? Localstorage is stored locally, the data store is permanent, unless the user or program deletes it;

? Sessionstorage is valid during the session, the data is deleted automatically after the browser is closed;

Localstorage is a domain-based, any page within that domain can be accessed, sessionstorage in the window that holds it, and a new window created by the current window is valid until the associated tab is closed;

Before the web storage, the data is stored on the client through a cookie. But because

The browser can save a few cookies. There is no limit to the 50 cookie,safari/webkit that can be saved per domain, such as Ie8,firefox,opera. A cookie can hold up to about 4096B of Data.

For each request, the cookie is stored in the request header and transmitted to the server Side. But if the request header
Size exceeds the limit, the server will not be able to handle it.

therefore, cookies are not suitable for storing large amounts of Data. It is more suitable for storing large amounts of data than using Web Storage.

Web Storage Browser compatibility scenarios

Both the Android platform and the IOS Platform's respective browsers basically support the Web Storage local storage Feature. Mobile devices on the market today, in addition to Android phones and iphone phones, more and more tablet computers are available, and basically rely on two kinds of platforms. Using the Web Storage on the mobile side we hardly need to consider whether the browser supports it, and of course, from the rigor of the code, it is advisable to check the browser for support before Use.

If (window.localstorage) {alert (' browser supports Localstorage ');} Else{alert (' Browser does not support Localstorage ');} or if (typeof (window.localstorage) = = ' undefined ') {alert (' Browser does not support Localstorage ');} Else{alert (' Browser Support Localstorage ');};

Localstorage and Sessionstorage operations

Localstorage and sessionstorage all have the same method of operation

SetItem Store Value

Sessionstorage.setitem ("key", "value") Localstorage.setitem ("site", "fy98.com")

GetItem Get Value

var value = Sessionstorage.getitem ("key") var site = Localstorage.getitem ("site")

　　RemoveItem Delete key

Sessionstorage.removeitem (' key ') localstorage.removeitem (' site ')

　　Clear clears all the Key/value

Sessionstorage.clear () localstorage.clear ()

　　Other methods . of operation and [] access

The Web storage not only can be conveniently accessed with its own setitem,getitem, but can also be stored in the same way as a normal object using the Dot. operator and [].

var storage = Window.localstorage;storage.key1 = ' Hello '; storage[' key2 '] = ' World '; console.log (storage.key1); Console.log (storage["key2"]);

　　Traverse

var storage = Window.localstorage;storage.key1 = ' Hello '; storage[' key2 '] = ' World '; var len = storage.length;for (var i = 0 ; I < len; I++) {var key = Storage.key (i), var value = Storage.getitem (key), console.log (key + "=" + value);};

　　Storage Event Monitoring

While the Storage is being accessed, the data can be monitored using the HTML5 Web Storage Api's built-in event listener, with any changes to the data in the Storage, and the Storage listener can capture the interface definition:

Interface storageevent:event {  readonly attribute domstring key;  ReadOnly attribute domstring? oldValue;  ReadOnly attribute domstring? newvalue;  ReadOnly attribute domstring url;  ReadOnly attribute Storage? storagearea;};

? Key indicates the name of the key in the Property.

? OldValue the key value before the Update.

? NewValue the key value after the data has been updated.

? The URL records the source address when the Storage event Occurs.

? Storagearea points to an event listener corresponding to the storage Object.

Register for monitoring using the standard event registration method Addeventlistener:

If (window.addeventlistener) {window.addeventlistener ("storage", handle_storage, false);} else if (window.attachevent) {window.attachevent ("onstorage", handle_storage);}; function Handle_storage (e) {if (!e) {e = window.event;} Console.log (' fire on storage ');}

　　

THML5 Local Storage Web Storage