Web Storage Technology--webstorage

In web development, you will inevitably encounter data that needs to be saved temporarily or permanently.

Traditional cookies are stored on the client side, or by SessionID associated session objects (such as the HttpSession object of the servlet) on the server.

The downside is that cookies are too small, only 4k, and can't cope with today's big data age. and save on the server side a lot of time is not necessary at all, local save a bit, why do you interact with the server?

So HTML5 unveiled a new storage technology: WebStorage

WebStorage divided into Localstorage and the Sessionstorage ( there was a Globalstorage , but in HTML5 has been Localstorage replaced )

Localstorage:

That is, Window.localstorage, the Setitem/getitem to save the fetch data. Once saved, you can only manually call Clear/removeitem to clean up.

Example Demo: Enter personal information on the page, submit the form, you want to save the data locally, the next time you open the same screen from the local extraction of data automatically fill in the form, you can save each manual fill the trouble.

Click Submit form to save the data in the local code:

function doaply () {var info = {          //Saves the contents of the form in the object in order to json the object name: "", Male: "", Address: ", Phone:" "};info.name = Docum Ent.getelementbyid ("InputName"). Value;  On the page get Namevar temp = document.getelementsbyname ("male");           On the page get Malefor (var i=0; i<temp.length; i++) {if (temp[i].checked) {info.male = Temp[i].value;}} info.address = document.getElementById ("inputaddress"). Value;  On the page get Addressinfo.phone = document.getElementById ("Inputphone"). Value;      Page to get the phone       localstorage.setitem ("Mypage_info", Json.stringify (Info));   After the object is JSON, use the SetItem method to save to Localstorage Document.p.submit ();}

Check the browser-side of the localstorage, and indeed have been saved successfully

Open the page again, read the data from the Localstorage, and automatically populate the page table dropdowns:

Window.onload = init;function init () {(key in localstorage) {if (key = = "Mypage_info") {var Info = Json.parse (localstor Age[key]);    Parses a JSON string into an object document.getElementById ("InputName"). Value = Info.name;   The object's properties are now populated into the page form var temp = document.getelementsbyname ("male"), for (var i=0; i<temp.length; i++) {if (Temp[i]. Value = = Info.male) {temp[i].checked = true;}} document.getElementById ("Inputaddress"). Value = Info.address;document.getelementbyid ("Inputphone"). Value = Info.phone;break;}}}

Done!

Wait... Why do the above code package the data in JSON format? Because Localstorage is the BOM object of the browser, it is simply global. If the data of the page is saved (rather than packaged), soon the localstorage inside will emerge a lot of data, inconvenient management. And it's very easy to encounter duplicate names. It is therefore necessary to consider how to pack in advance to avoid annoying duplicate name problems.

Sessionstorage: That is, window.sessionstorage, no longer repeat, its API structure and localstorage exactly the same, as long as the above code in the localstorage changed to Sessionstorage, the other lines of code do not have to change.

What is the difference between localstorage and sessionstorage?

The difference is the timing of the cleanup, as shown in the following table:

0: Data is still after action
x: Erase data after action

Once the data is stored in the Localstorage, the data will be persisted (in fact will be saved to the local hard drive by the browser), only the code calls Localstorage.clear ()/Localstorage.removeitem (..) To get rid of the data.

When the data is stored in sessionstorage, the life cycle of the data is equal to the life cycle of the page. If you close the page or close the browser, the browser will automatically empty the sessionstorage. If you open a new window, the Sessionstorage data associated with the original window page will not be visible in the new page. So the code calls Sessionstorage.clear ()/Sessionstorage.removeitem (..) It's natural to clean up your data, but you don't usually need a developer to worry about cleaning up your data, so you can clean it up by browser.

What are the advantages of webstorage compared to cookies? Cookies are usually only 4 K, and WebStorage defaults to 4M (depending on the browser manufacturer's instructions), which is 1000 times times the number of cookies.

If you want to know how big your current browser-defined WebStorage is, you can write a test script to run it:

Localstorage.clear (); Localstorage.setitem ("Fuse", "-"); while (true) {    var fuse = Localstorage.getitem ("fuse")    ;  try {         Localstorage.setitem ("fuse", fuse + fuse),    } catch (e) {        alert ("Your browser blew up at" + Fuse.length + "With exception:" + E);    Localstorage.removeitem ("fuse");

My Firefox test down localstorage have 4194304=4096*1024,4m size.

It may be a performance problem to say that webstorage is inferior to a cookie. Accessing your local hard drive data for the first time is definitely a bit of a time consuming. But I don't think this is a problem, and unless your application is unusually tough on performance, it actually proves that this so-called "performance problem" does not have any effect at all, and simply says that ordinary people simply don't feel any difference. To learn more, you can refer to:

http://calendar.perfplanet.com/2012/is-localstorage-performance-a-problem/

Web Storage Technology--webstorage