Get a thorough understanding of HTML5 local Storage technology (i)

1. Cookies

The use of cookies is extensive, but there are several questions:

(1) Each HTTP request will be carried on the head, wasting resources

(2) Each domain client can store only 4K size

(3) will cause pollution to the main domain

(4) Cookies are not safe to transmit in plaintext

2, UserData (only IE support)

3. Other non-mainstream programmes

Second, H5 related storage knowledge

1. Local Storage webstorage (Localstorage & Sessionstorage)

Browser support Scenarios

(1) Life cycle

• Localstorage permanent storage Unless the display is removed or emptied, the sessionstorage effectively close page during the page session will be cleared (the Refresh page will not be cleared);

(2) API (LS and SS are the same)

• Length//storage The number of key-value pairs is read-only
• SetItem//Add key-value pair key value
• GetItem//Get key-value pairs based on key
• Key//Key name can be obtained based on the Index property
• RemoveItem//Remove key-value pairs based on key
• Clear//clear

(3) storage type and size

• WebStorage stored string (as long as it can be serialized as a string)
• 5M under each domain name

(4) Storage Event

Trigger Storage event when WebStorage changes

• Key: Name
• OldValue: Modify the previous value
• NewValue: The value after modification
• URL: The URL of the page that triggered the change
• Storagearea: Storage of change

(5) Precautions for use

• Different browser data stores are independent of each other, Chrome's localstorage can not be accessed on the FF
• When using to detect whether the browser is supported (do not use Window.localstorage to detect the existence of objects, you should set a piece of data and then catch the exception)
• Since LS is a permanent storage, update policy should be done to control expiration

1234567891011121314

function set(key,vel){    varcurTime = newDate().getTime();    localStorage.setItem( key , JSON.stringify({data:vel , time:curTime }) );}functionget(key,exp){    var data = locaStorage.getItem(key);    vardataObj = JSON.parse(data);    if(newDate().getTime()-dataObj.time<exp){        returndataObj.data;    }else{        alert(‘已过期！‘);    }}

• There is no data sharing between subdomains-transfer data using a cross-domain method

Special attention:

WebStorage is good but is not used to completely replace cookies, it should be used in cases where cookies should not have been used but have to use cookies.

With WebStorage cookies should only do what it should do--as a channel for clients to interact with the server, keeping the client state.

Get a thorough understanding of HTML5 local Storage technology (i)