Home > Developer > Web Develop
The local storage Web storage is actually an improved version of the HTML4 cookie storage mechanism. The purpose of this is to store useful information on a local computer or mobile device in a Web site, and then read the information locally as needed.
There are two types of storage APIs for Web Storage:
The difference between the two is the life cycle: The former is valid during the session, and the latter is stored permanently locally, unless the user or program performs a delete operation on it.
Browser support situation: IE8.0 above, Chrome3.0 above.
API Introduction Browser support condition detection<! DOCTYPE html><html><head><title>Browser support Scenarios</title></head><body><script> if(window.localstorage) {alert ("browser support Localstorage");} if (Window.sessionstorage) {Alert ("browser supports Sessionstorage");}</script></body></html>The above method allows you to monitor whether the browser supports two APIs for Web storage.
LocalstorageLocalstorage uses key-value pairs to store data in a single attribute: length, and 5 operations: Key, SetItem, GetItem, RemoveItem, and clear. Here is an example of using these methods and properties:
<! DOCTYPE html><html><head><title>Localstorage</title></head><body><div id="x"></div><script type =< Span class= "Hljs-value" > "Text/javascript" ; //Storage Data Localstorage.setitem ("1","Moon Light Before Bed"); //Eject the size of the existing storage data alert (localstorage.length); //Eject all keys (starting from 0) for (var i=0; i<localstorage.length;i++) {Alert (Localstorage.key (i));} var x = document.getElementById ("x"); //Read data x.innerhtml = Localstorage.getitem ("1"); /*//Delete Data Localstorage.removeitem ("1");//Clear All data localstorage.clear (); Alert (Localstorage.getitem ("1"); */ </script></body></html>This file is best deployed on a PHP (Java ee, etc) server platform, and it may not be possible to open it directly on IE.
After you delete the code comment for the data, we can reopen it once (that is, store the data again), and then create a new page to read the data, and we can see that the data is still there, which shows that the localstorage life cycle is the permanent storage of the data.
New page to read data from:
<! DOCTYPE html><html><head><title>Localstorage</title></head><body><div id="x"></div><script type="Text/javascript"> var x = document.getElementById ("x"); //Read data x.innerhtml = Localstorage.getitem ("1");</script></body></html>Two pages will show "moon Light in front of the bed".
Note here: The data stored between different browsers is independent of each other, and if the data stored by IE is used, then the use of WebKit is not readable. so two files must be used in the same browser (in the domestic browser, it is necessary to use the same mode, either compatible, or high speed. ）
SessionstorageSessionstorage is used in the same way as localstorage, and the difference between the two is that the data is still in localstorage after the page is closed, and the sessionstorage data is gone.
After you have replaced the local two file with the session, open it and we'll see a page that says "Moonlight in front of the bed", while another page doesn't show or display "null", which is the difference in life cycle.
"HTML5 and CSS3 Basics" HTML5 Local 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
