HTML5 local storage localStorage and sessionStorage, html5localstorage

HTML5 local storage localStorage and sessionStorage, html5localstorage

Html5 local storage is used in recent projects. The following is a summary.

1. html5 storage formats

Local Storage (localStorage & sessionStorage)

Application cache)

IndexedDB and webSQL

2. localStorage & sessionStorage

Expiration time: localStorage is permanently stored and never expires unless it is manually deleted

SessionStorage disappears after the browser is re-opened.

Size: each domain name is 5 MB.

Note: For cookie 1, the size limit seems to be around 4 K, and for IE6, there seems to be a limit on the number of domain names under each domain name. For HTML5 local storage, IE browser has been supported since IE8.

Support

 

IE6 ~ 7. the browser does not yet support it, so traditional cookies are used to keep information, while other browsers use the HTML5 local storage function.

For example:

Var arrDisplay = [0, 1, 1, 1]; // storage, IE6 ~ 7 cookie other browsers HTML5 local storage if (window. localStorage) {localStorage. setItem ("menuTitle", arrDisplay);} else {Cookie. write ("menuTitle", arrDisplay );}

Data Reading:
When we load the page each time, we need to read the corresponding data. As follows:

var strStoreDate = window.localStorage? localStorage.getItem("menuTitle"): Cookie.read("menuTitle");

It should be noted that, although we store arrays, we actually store strings after array characters (CookieAndlocalStorage), So we are processingstrStoreDateMust be processed as a string, similar to the following:

StrStoreDate. split (","). each (function (display, index) {// triggers the corresponding action based on the storage display });

3. The localStorage API and sessionStorage API are consistent.

GetItem // retrieve record

SetItem // set the record

RemoveItem // remove record

Key // obtain the value corresponding to the key

Clear // clear records

Usage: localStorage. clear ();

4. stored content

Array, image, json, style, script... (Any content that can be serialized into strings can be stored ).

In this project, because it is a mobile client, the cookie is not considered as follows:

var localStorageAll =videoData[i][j];if(window.localStorage){        localStorage.setItem("results_All", localStorageAll);       }

Obtain the currently saved content on another page:

Var strStoreDate = localStorage. getItem ("results_All"); if (strStoreDate) {// console. log (strStoreDate);} localStorage. removeItem ("results_All"); // clear after use

5. localStorage instance

The following is an example of a network application:

<! DOCTYPE> 

Now let's take a look at how the resources are stored,

At this time, no matter how you refresh the page or re-open the browser, the stored images exist, unless you manually delete them!
6. locstorage expiration Policy
Because html5 does not set an expiration Policy for the local storage, you can write your own expiration policy program when processing the image expiration Policy, as shown below:
<! DOCTYPE>