The drawback of using cookies to store cookies: 1, size limit 4k,2 bandwidth waste, 3. Difficult to operate.
The Web Storage in HTML5 includes two ways of storage: Sessionstorage and Localstorage.
sessionstorage is used to store data locally in a session, which can only be accessed by a page in the same session and destroyed when the session ends. So sessionstorage is not a persistent local store, only session-level storage.
The localstorage is to keep the data on the client's local hardware device, and the data will never expire unless the data is actively deleted.
HTML5 Web Storage browser support situation
Browser support in addition to IE7 and the following are not supported, other standard browsers are fully supported (IE and FF need to run in the Web server), it is worth mentioning that IE always do good, such as IE7, IE6 UserData is actually JavaScript local storage Solution. With simple code encapsulation you can unify to all browsers that support Web storage.
To determine whether the browser supports Localstorage, you can use the following code:
if (window.localstorage) { alert ("Browse support Localstorage")}else{ alert ("Browse temporarily does not support Localstorage")}//or if (typeof Window.localstorage = = ' undefined ') {alert ("Browse temporarily does not support Localstorage")}
Localstorage and Sessionstorage operations
Both Localstorage and Sessionstorage have the same methods of operation, such as SetItem, GetItem, and RemoveItem.
Localstorage and Sessionstorage Methods SetItem store Value
Purpose: Store value in the key field
Usage:. SetItem (key, value)
code example:
Sessionstorage.setitem ("Key", "value"); Localstorage.setitem ("Site", "js8.in");
GetItem Get Value
Purpose: Gets the value that the specified key is stored locally
Usage:. GetItem (Key)
code example:
var value = Sessionstorage.getitem ("key"); var site = localstorage.getitem ("site");
RemoveItem Delete key
Purpose: Deletes the value stored locally by the specified key
Usage:. RemoveItem (Key)
code example:
Sessionstorage.removeitem ("key"); Localstorage.removeitem ("site");
Clear clears all the Key/value
Purpose: Clear all the Key/value
Usage:. Clear ()
code example:
Sessionstorage.clear (); Localstorage.clear ();
Other ways to do this: point operations and []
Web Storage can not only use their own setitem,getitem and other convenient access, but also can be like ordinary objects with the point (.) Operators, and [] the way the data is stored, like the following code:
var storage = Window.localstorage; Storage.key1 = "Hello"; storage["Key2"] = "world"; Console.log (Storage.key1); Console.log (storage["Key2"]);
The key and length properties of Localstorage and Sessionstorage traverse
Sessionstorage and Localstorage provide key () and length to facilitate the implementation of stored data traversal, such as the following code:
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); }
Storage Events
Storage also provides the storage event , which can trigger the storage event when the key value is changed or clear, as the following code adds a listener that changes the storage event:
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;} }
The specific properties of the storage event object are the following table:
Property |
Type |
Description |
Key |
String |
The named key is added, removed, or moddified |
OldValue |
Any |
The previous value (now overwritten), or null if a new item is added |
NewValue |
Any |
The new value, or null if an item is added |
Url/uri |
String |
The page that called the method, the triggered this change |
No umbrella in the original rain
Original address: http://www.cnblogs.com/yuzhongwusan/archive/2011/12/19/2293347.html
Some differences between the sessionstorage and the localstorage of HTML5