HTML5 provides sessionstorage and localstorage data storage methods for temporary or permanent storage of client data:
Sessionstorage: Used to save the reply data
Localstorage: For long-term storage of data on the client
Sessionstorage
For the client to save the reply data, save the data for a short time, the essence of saving data is saved in the Session object, close the browser, all the Sessionstorage object saved all the data lost.
Localstorage
Long-term data is saved on the client until it is manually purged. But Localstorage is also not allowed to cross the browser.
The difference between localstorage and cookies
The concept of WEB storage is similar to a cookie, except that it is designed for larger capacity storage. The size of the cookie is limited, and every time you request a new page, the cookie is sent past, which virtually wastes bandwidth, and the cookie needs to specify the scope and cannot be called across domains.
In addition, WEB storage has methods such as setitem,getitem,removeitem,clear, unlike cookies that require front-end developers to encapsulate Setcookie,getcookie themselves.
However, cookies are also not available or missing: The role of cookies is to interact with the server as part of the HTTP specification, whereas Web Storage is only for local "storage" of data (corrections from @otakustay)
Browser support Scenarios
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")}
Operation of Sessionstorage and Localstorage:
Both Localstorage and Sessionstorage have the same methods of operation, such as SetItem, GetItem, and RemoveItem.
Methods of Localstorage and Sessionstorage:
SetItem Store Value
Purpose: Store value in the key field
Usage:. SetItem (key, value)
code example:
Sessionstorage.setitem ("Key", "value"); Localstorage.setitem ("Name", "Happyfish");
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 ("name");
RemoveItem Delete key
Purpose: Deletes the value stored locally by the specified key
Usage:. RemoveItem (Key)
code example:
Sessionstorage.removeitem ("key"); Localstorage.removeitem ("name");
Clear clears all the Key/value
Purpose: Clear all the Key/value
Usage:. Clear ()
code example:
Sessionstorage.clear (); Localstorage.clear ();
Iv. Other methods of operation: Point operation 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"]);
Traversal of Localstorage and Sessionstorage
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.L OG (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 |
HTML5 's Localstorage and Sessionstorage