HTML5 Localstorage and sessionstorage of Web Storage

What is Localstorage

A few days ago in the old project found that the operation of the cookie is very strange, the consultation is to cache some information to avoid passing the parameters on the URL, but did not consider the cookie will cause problems:

①cookie size limit of about 4k, not suitable for the storage of business data ②cookie each time with the HTTP transaction sent, wasting bandwidth

Localstorage can be said to be optimized for cookies, which makes it easy to store data in the client and not be transmitted with HTTP, but not without problems:

①localstorage size is limited to about 5 million characters, each browser is inconsistent ②localstorage in privacy mode is not readable ③localstorage is the essence of reading and writing files, the data will be compared card (Firefox will be a one-time import data into memory, It's scary when you think about it. ④localstorage cannot be crawled by crawlers, do not use it to completely replace URL parameters

　　

HTML5 provides two ways to store data on the client:

• Localstorage-persistent data storage without time limit, as long as you don't actively delete how long you can save.
• Sessionstorage-Data storage for a session, which can only be accessed by a page in the same session, and then destroyed when the session ends (for example, if you close the page and reopen it after storing some data on the page), the stored data is not available. So sessionstorage is not a persistent local store, only session-level storage.

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")}

Use of Localstorage

Both Localstorage and Sessionstorage have the same methods of operation, such as SetItem, GetItem, RemoveItem, clear, and so on.

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 ();

Original:

Https://www.cnblogs.com/yexiaochai/p/4509472.html

Https://www.cnblogs.com/qiutianlidehanxing-blog/p/5953746.html

HTML5 Web Storage localstorage and Sessionstorage