Home > Developer > Web Develop
In the early days of the web, cookies were used to store simple information such as user names on the client, however, the following issues existed in the use of cookies for storing permanent data.
The size of 1.cookies is limited to 4kB and is not suitable for large amounts of data storage.
2. The browser also restricts the number of cookies that the site can store on the user's computer.
3 cookies are sent along with the HTTP transaction, and therefore a portion of the bandwidth is wasted.
HTML5 provides local storage capabilities, a key-value-to-storage solution, and supports a web of at least 4M,HTML5 to provide two client-side storage options.
1.localStorage: is a data storage method that has no time limit and can be persisted to the client.
Sessionstorage: Refers to a session of the data store, the data will be saved in the Session object, when the browser is closed, the data is deleted.
Before using Web Storage, you should check whether your browser supports localstorage and sessionstorage (I7 not supported below)
Judging method
if (typeof (Localstorage!== ' undefined ') {
};
or if (window.localstorage) {
}
Properties and methods supported by Web Storage
GetItem (Key): Gets the value stored by the specified key
Key (Index) method: Returns the key value of the corresponding index in the list
Length property: Returns the lengths of the Key/value queue
RemoveItem (Key) method: Removes a corresponding key-value pair from the storage.
SetItem (Key,value) Method: Stores value to the field specified by key.
Clear () Method: Remove All content
Note: The method of getting key/value, in addition to using the SetItem () and GetItem () methods, provides an easy way to: Set method: Sessionstorage.somekey = ' somevalue '
Method of obtaining: Alert (Sessionstorage.somekey);
Here's an example to illustrate.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title></title> <Linkhref= "Localstorage.css"type= "Text/css"rel= "stylesheet"/> <Scriptsrc= "Storage.js"type= "Text/javascript"></Script></Head><Body><inputID= "T1"type= "text" /><ButtonID= "Add" >Add to</Button><ButtonID= ' Remove '>Delete</Button><BR/><textareaID= "T2"ReadOnly= "ReadOnly"></textarea></Body></HTML>
Css
#t2 { width:500px; height:400px; margin-top:10px;}Js
Window.onload =function(){ varContent = document.getElementById (' t1 '); varBTN1 = document.getElementById (' Add '); varBTN2 =document.getelementbyid (' Remove '); Btn1.addeventlistener (' Click ', Saveinfo); Btn2.addeventlistener (' Click ', Clearinfo); functionSaveinfo () {if(typeofLocalstorage!== ' undefined '){ if(localstorage.storage) {localstorage.storage+ = Content.value + ' \ n release time: ' + (NewDate ()). toDateString () + ' \ n '; }Else{localstorage.storage= Content.value + ' \ n release time: ' + (NewDate ()). toDateString () + ' \ n '; } showinfo ()}Else{alert (' Unable to store! ') } } functionClearinfo () {Localstorage.removeitem (' Storage '); Showinfo ()}functionShowinfo () {vartxt = document.getElementById (' T2 '); if(localstorage.storage) {txt.value=localstorage.getitem (' storage '); }Else{txt.value= ' no content! ‘ } }}
HTML5 localstorage Explanation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
