Home > Article > Web Front-end > Xiaoqiang’s HTML5 mobile development road (19) - HTML5 Local Storage (local storage)

Xiaoqiang’s HTML5 mobile development road (19) - HTML5 Local Storage (local storage)

黄舟Original: 2017-01-22 11:57:291272browse

1. The development history of browser storage

There are many local storage solutions, such as Flash SharedObject, Google Gears, Cookie, DOM Storage, User Data, window.name, Silverlight, Open Database, etc.

Let’s borrow a picture from the Internet to take a look at the current mainstream local storage solutions:

Xiaoqiang’s HTML5 mobile development road (19) - HTML5 Local Storage (local storage)

Cookie: is widely used in the web, but has very limited limitations. Obviously, the capacity is too small. Some sites will disable cookies for security reasons. Cookies are not as safe as imagined. The content of the cookie will be sent to the server along with the page request.

Flash SharedObject: Kissy’s store module is used to call Flash SharedObject. The advantage of Flash SharedObject is that it has moderate capacity and basically no compatibility issues. The disadvantage is that it requires the introduction of specific swf and js files into the page, which adds extra burden and is cumbersome to process; some machines do not have a flash operating environment.

Google Gears: Google’s offline solution has stopped updating. The official recommendation is to use the HTML5 localStorage solution.

User Data: It is a storage space specially opened by Microsoft in the system for IE, so it only supports the combination of Windows+IE. The actual test was in 2000 (IE5.5), XP (IE6, IE7). It can be used normally under Vista (IE7). Under XP, it is usually located in C:\Documents and Settings\username\UserData, sometimes it is in C:\Documents and Settings\username\Application Data\Microsoft\Internet Explorer\UserData. Under Vista, it is located in C:\Users\Username\AppData\Roaming\Microsoft\Internet Explorer\UserData; the size limit of a single file is 128KB, and a total of 1024KB files can be saved under one domain name. There should be no limit on the number of files. In restricted sites, these two values are 64KB and 640KB respectively, so if various circumstances are taken into account, it is best to control a single file to be less than 64KB.

localStorage: Compared with the above local storage solutions, localStorage has its own advantages: large capacity, easy to use, powerful, native support; the disadvantage is poor compatibility (chrome, safari, firefox, IE 9, IE8 all support localStorage, mainly not supported by versions below IE8) and less secure (so please do not use localStorage to save sensitive information).

The browser compatibility of localStorage in Html5 is as follows:

Xiaoqiang’s HTML5 mobile development road (19) - HTML5 Local Storage (local storage)

## 2. Use of HTML5 localStorage operation

In HTML5, local storage is a window attribute, including localStorage and sessionStorage. The difference between the two should be clearly identifiable from the name. The former always exists locally. The latter only accompanies the session and disappears once the window is closed. The usage of both is exactly the same.

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

In HTML5, data is not passed by every server request, but data is only used when requested. It makes it possible to store large amounts of data without affecting website performance.

For different websites, data is stored in different areas, and a website 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. The data is still available after the next day, week or year. localStorage has three methods for setting up and accessing local storage.

localStorage.t1 ="Big bowl of dry mix";

localStorage["t2"]="HTML5";

localStorage .setItem("t3","http://blog.csdn.NET/dawanganban");

##localStorage.t1;

localStorage["t2"];

localStorage.getItem("t3");

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta charset="urf-8"/>  
    </head>  
    <body>  
        <script type="text/javascript">  
            //判断浏览器是否支持本地存储  
              
            if(window.localStorage){  
                    localStorage.t1="大碗干拌";  
                    document.write(localStorage.t1);  
                  
                    localStorage[&#39;t2&#39;]="<br/>hello word"  
                    document.write(localStorage.t2);  
  
                    localStorage.setItem("t3", "<br/>http://blog.csdn.net/dawanganban");  
                    document.write(localStorage.t3);  
            }else{  
                    alert("你的浏览器不支持");  
            }  
              
  
        </script>  
    </body>  
</html>

Comment out the above three lines of assignment code, you will find that the data can still be displayed on the browser.

Xiaoqiang’s HTML5 mobile development road (19) - HTML5 Local Storage (local storage) In addition to handling the above assignment and retrieval, localStorage also has the following usages:

localStorage.removeItem(); //Clear

localStorage.clear() //Clear all

localStorage.length //How many keys to get

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

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta charset="urf-8"/>  
    </head>  
    <body>  
        <script type="text/javascript">  
            //判断浏览器是否支持本地存储  
              
            if(window.localStorage){  
                    //先清除一下  
                    localStorage.clear();  
  
                    localStorage.t1="大碗干拌";  
                    document.write(localStorage.t1);  
                  
                    localStorage[&#39;t2&#39;]="<br/>hello word"  
                    document.write(localStorage.t2);  
  
                    localStorage.setItem("t3", "<br/>http://blog.csdn.net/dawanganban");  
                    document.write(localStorage.t3);  
                      
                    //清除t2  全部清除用clear  
                    localStorage.removeItem("t2");  
  
                    for(var i=0;i<localStorage.length;i++){  
                        document.write("<br/>" + localStorage.key(i) + "___"+localStorage.getItem(localStorage.key(i)));  
                    }  
  
                      
            }else{  
                    alert("你的浏览器不支持");  
            }  
        </script>  
    </body>  
</html>

The above is the content of Xiaoqiang’s HTML5 mobile development road (19)-HTML5 Local Storage (local storage), For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Xiaoqiang’s road to HTML5 mobile development (17) – HTML5 inline SVGNext article：Xiaoqiang’s road to HTML5 mobile development (17) – HTML5 inline SVG

See more

Xiaoqiang’s HTML5 mobile development road (19) - HTML5 Local Storage (local storage)

Related articles