HTML5 Mobile Development Road (--HTML5) local Storage (local storage)

This paper is the official HTML5 training course for Brother Lian it educational institution, the main introduction: HTML5 Mobile Development Road (--HTML5) local Storage (native storage)

First, browser storage development history

There are many local storage solutions, such as Flash sharedobject, Google Gears, cookies, DOM Storage, User Data, Window.name, Silverlight, Open database, etc.

Take a picture of the web to see the current mainstream local storage scenarios:

650) this.width=650; "Src=" http://img.blog.csdn.net/20140113123717921?watermark/2/text/ ahr0cdovl2jsb2cuy3nkbi5uzxqvzgf3yw5nyw5iyw4=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/ Southeast "style=" border:0px; "/>

Cookies: Widely used in the web, but the limitations are very obvious, the capacity is too small, some sites will be disabled for security reasons Cookie,cookie is not as safe as imagined, the content of the Cookie will be sent to the server along with the page request.

Flash Sharedobject: Use the Kissy store module to invoke Flash Sharedobject. The advantage of Flash Sharedobject is that the capacity is moderate, there is basically no compatibility problem, the disadvantage is to introduce a specific SWF and JS files in the page, add additional burden, processing cumbersome, or some of the machine does not have a flash operating environment.

Google gears:google Offline program, has stopped updating, the official recommended to use the HTML5 localstorage solution.

User Data: Microsoft for IE specifically in the system to open up a piece of storage space, so that only support windows+ie combination, the actual test in the IE5.5, XP (IE6, IE7), Vista (IE7) can be normal use. Under XP, generally located in the C:\Documents and Settings\ user name \userdata, sometimes in C:\Documents and Settings\ user name \application Data\microsoft\ Internet Explorer\UserData. Under Vista, the C:\Users\ user name is \appdata\roaming\microsoft\internet explorer\userdata; the size limit for a single file is 128KB, A total of 1024KB files can be saved under a domain name, the number of files should be unlimited. These values are 64KB and 640KB, respectively, in the restricted site, so a single file is best able to control 64KB or less if a variety of situations are considered.

Localstorage: Compared with the above-mentioned local storage scheme, Localstorage has its own advantages: large capacity, easy to use, strong, native support; The disadvantage is that compatibility is poor (Chrome, Safari, Firefox,ie 9,IE8 all support Localstorage, mainly IE8 the following versions are not supported), the security is also worse (so do not use Localstorage to save sensitive information).

Localstorage browser compatibility in HTML5 is as follows:

650) this.width=650; "Src=" http://img.blog.csdn.net/20140113125010078?watermark/2/text/ ahr0cdovl2jsb2cuy3nkbi5uzxqvzgf3yw5nyw5iyw4=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/ Southeast "style=" border:0px; "/>

Second, HTML5 localstorage operation use

In HTML5, the local storage is a window property, including Localstorage and Sessionstorage, from the name should be able to clearly identify the difference between the former is always local, the latter is only accompanied by the session, the window once closed. The usage is exactly the same.

Previously, these were all done by cookies. However, cookies are not suitable for storing large amounts of data because they are passed by each request to the server, which makes the cookie slow and inefficient.

In HTML5, the data is not passed by each server request, but only when the data is used on the request. It makes it possible to store large amounts of data without compromising site performance.

For different sites, the data is stored in different regions, and a Web site can only access its own data.

HTML5 uses JavaScript to store and access data.

The data stored by the Localstorage method has no time limit. Data is still available after the second, second, or next year. Localstorage has three ways to set up and access local storage.

LOCALSTORAGE.T1 = "Large bowl dry mix";

localstorage["T2"]= "HTML5";

Localstorage.setitem ("T3", "Http://blog.csdn.NET/dawanganban");

LOCALSTORAGE.T1;

localstorage["T2"];

Localstorage.getitem ("T3");

[HTML] View plain copy

Print? 650) this.width=650; "src=" Https://code.csdn.net/assets/CODE_ico.png "alt=" on Code View "Width=" "height=" 12 " Style= "border:0px;"/>650) this.width=650; "src=" Https://code.csdn.net/assets/ico_fork.svg "alt=" Derivation to My Code slice " Width= "height=" style= "border:0px;"/>

2. <! DOCTYPE html>

8. <meta charset= "Urf-8"/>

12. <body>

14. <script type= "Text/javascript" >

16. Determine if the browser supports local storage

20. if (window.localstorage) {

22. localstorage.t1= "Big bowl dry mix";

24. document.write (LOCALSTORAGE.T1);

28. localstorage[' T2 ']= "<br/>hello word"

30. document.write (LOCALSTORAGE.T2);

34. Localstorage.setitem ("T3", "<br/>http://blog.csdn.net/dawanganban");

36. document.write (LOCALSTORAGE.T3);

38. }else{

40. Alert ("Your browser does not support");

42. }

48. </script>

50. </body>

Comment out the code of the above three lines, and you will see that the data still appears on the browser.

650) this.width=650; "Src=" http://img.blog.csdn.net/20140113130110578?watermark/2/text/ ahr0cdovl2jsb2cuy3nkbi5uzxqvzgf3yw5nyw5iyw4=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/ Southeast "style=" border:0px; "/>

There are several uses for Localstorage to handle the above assignment values:

Localstorage.removeitem (); Clear

Localstorage.clear ()//Clear All

Localstorage.length//How many keys to get

Localstorage.key ()//Get the stored key content

[HTML] View plain copy

Print? 650) this.width=650; "src=" Https://code.csdn.net/assets/CODE_ico.png "alt=" on Code View "Width=" "height=" 12 " Style= "border:0px;"/>650) this.width=650; "src=" Https://code.csdn.net/assets/ico_fork.svg "alt=" Derivation to My Code slice " Width= "height=" style= "border:0px;"/>

2. <! DOCTYPE html>

8. <meta charset= "Urf-8"/>

12. <body>

14. <script type= "Text/javascript" >

16. Determine if the browser supports local storage

20. if (window.localstorage) {

22. Clear it first.

24. Localstorage.clear ();

28. localstorage.t1= "Big bowl dry mix";

30. document.write (LOCALSTORAGE.T1);

34. localstorage[' T2 ']= "<br/>hello word"

36. document.write (LOCALSTORAGE.T2);

40. Localstorage.setitem ("T3", "<br/>http://blog.csdn.net/dawanganban");

42. document.write (LOCALSTORAGE.T3);

46. Clear T2 All Clear

48. Localstorage.removeitem ("T2");

52. for (Var i=0;i<localstorage.length;i++) {

54. document.write ("<br/>" + localstorage.key (i) + "___" +localstorage.getitem (Localstorage.key (i)));

56. }

62. }else{

64. Alert ("Your browser does not support");

66. }

68. </script>

70. </body>

650) this.width=650; "Src=" http://img.blog.csdn.net/20140113131559890?watermark/2/text/ ahr0cdovl2jsb2cuy3nkbi5uzxqvzgf3yw5nyw5iyw4=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/ Southeast "style=" border:0px; "/>

HTML5 Mobile Development Road (--HTML5) local Storage (local storage)