Home > Developer > Web Develop
HTML5 provides two new ways to store data on the client:
Note: 1) As long as the browser cookie is cleared, both storage data will be erased 2) for different sites, the data is stored in different regions, each site can only access its own data 3) data between browsers is separate (for example, Firefox uses Localstorage to store a set of data that cannot be read in chrome)
1, most of the current browser has supported the Web storage, of course, can also detect:
1 if (window.localstorage) {2 alert (' Your browser does not support Localstorage '); 3 }45 if (window.sessionstorage) {6 alert (' Your browser does not support Sessionstorage '); 7 }2. Methods
Localstorage,sessionstorage have 4 methods, using the same method, the following localstorage as an example:
Localstorage. SetItem ([string] key, [string] value); Local client stores a string type of data
Localstorage. GetItem ([string] key); Value of the known key value can be read
Localstorage. RemoveItem ([string] key); Delete the item of the specified key
Localstorage. Clear (); Clear Localstorage all key/value keying pairs
3. Example
Record the number of pages entered and see changes in Localstorage and sessionstorage storage data.
Html:
1 <Div>2Number of pages entered (Localstorage):<MarkID= "local"></Mark>Time (s)3 <BR>4Number of pages entered (Sessionstorage):<MarkID= "Session"></Mark>Time (s)5 </Div>
Javascript:
1 //Record Localstorage entry page Count2 varCount1 = Localstorage.getitem (' Localcount ')? parseint (Localstorage.getitem (' Localcount ')) + 1:1;3Localstorage.setitem (' Localcount ', count1);4document.getElementById (' local '). InnerHTML =count1;5 6 //Record Sessionstorage entry page Count7 varCount2 = Sessionstorage.getitem (' Sessioncount ')? parseint (Sessionstorage.getitem (' Sessioncount ')) + 1:1;8Sessionstorage.setitem (' Sessioncount ', count2);9document.getElementById (' Session '). InnerHTML = Count2;
Scenario One: Go to Chrome refresh page 10 times
Scenario Two: Close Chrome and reopen it
Description: The value of Sessionstorage was lost after the page was closed
Scenario Three: The first time you enter Firefox
Description: Data between browsers is separate, Firefox cannot read Chrome's client store data
Scenario Four: Clearing Chrome's Cookies
Note: emptying Cookie,localstorage and sessionstorage data is cleared
Source:
1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title>Store data on the client</title>6 </Head>7 <Body>8 <Div>9Number of pages entered (Localstorage):<MarkID= "local"></Mark>Time (s)Ten <BR> OneNumber of pages entered (Sessionstorage):<MarkID= "Session"></Mark>Time (s) A </Div> - <Script> - if(window.localstorage) {//Sessionstorage the //Record Localstorage entry page Count - varCount1=Localstorage.getitem ('Localcount') ?parseint (Localstorage.getitem ('Localcount')) + 1 : 1; - Localstorage.setitem ('Localcount', count1); - document.getElementById ('Local'). InnerHTML=count1; + - //Record Sessionstorage entry page Count + varCount2=Sessionstorage.getitem ('Sessioncount') ?parseint (Sessionstorage.getitem ('Sessioncount')) + 1 : 1; A Sessionstorage.setitem ('Sessioncount', count2); at document.getElementById ('Session'). InnerHTML=Count2; - } - </Script> - </Body> - </HTML>View Code
H5 Client Storage (Web Storage)
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
