In-depth analysis of webstorage--html5's local data processing

The following editor will bring you an in-depth analysis of webstorage [html5 local data processing]. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Come and take a look with the editor, I wish you all a happy game

1. What is webStorage?

webStorage is a method used for localized storage in html5. Before, we used cookie storage;

2. So what’s the difference between them?

Ⅰ. Problems with cookies:

ⅰ. Cookie needs to send a request to the server, and the server returns a cookieId, which is stored in the browser cache. Consumes a certain amount of bandwidth. [Cookies will be sent together with the header information of each HTTP request, which invisibly increases network traffic];

ⅱ. The data capacity stored by cookies is limited and varies depending on the browser type. IE6 can only store approximately 2K;

Ⅱ. And webstorage only needs to store data locally;

3. We can give a small example to illustrate

eg: Enter the user name and password. When button 1 is clicked, the data is saved. Click button 2 and the page can be refreshed to obtain it;

Process:

i. Create a Event

##XML/HTML CodeCopy content to clipboard

function MyClick1()   
{   
}

ⅱ. Get its username through an id

##JavaScript Code

Copy the content to clipboard Board

var
 username = $(
"#TxtUserName"
).val();

ⅲ. Get its password through an id

JavaScript Code

Copy the content to the clipboard

var
 pwd = $(
"#TxtPwd"
).val();

ⅳ. After obtaining the username and password, how do we save the data? There are two ways:

①. The first one: sessionStorege, used in the Firefox browser of Firefox2+;

Life cycle: The data stored in this way is only valid at the window level, the same The locally stored data can be obtained by refreshing or jumping the window (or Tab) page. When a new window or page is opened, the original data will be invalid [current page only]

Disadvantages: IE does not Supported, data persistence cannot be achieved.

JavaScript Code

Copy content to clipboard

##sessionStorage.setItem(

"k_username"
1. , username); sessionStorage.setItem(

   "k_pwd", pwd); ## Note: sessionStorage.setItem is stored in key-value pairs;

②. The second method: LocalStorage

LocalStorage is part of the Web Storage Internet storage specification, and now it is supported by Firefox 3.5, Safari 4, and IE8.

Life cycle: Stored in the local C drive, it will still exist after the browser is closed and opened;

Disadvantages: Lower version browsers do not support it.

JavaScript Code

Copy content to clipboard

localStorage.setItem("k_username", username);   
           localStorage.setItem("k_pwd",pwd);

ⅴ.Print

JavaScript Code

Copy content to clipboard

alert(

"Save successfully!"

);

1. ⅵ. Button 2 prints all the above data

The first way Print:

JavaScript Code

Copy content to clipboard

function MyClick2() {   
                alert(sessionStorage.getItem("k_username"));   
                alert(sessionStorage.getItem("k_pwd"));   
            }

Second way Print

JavaScript Code

Copy content to clipboard

function MyClick2() {   
            alert(localStorage.getItem("k_username"));   
            alert(localStorage.getItem("k_pwd"))   
           }

The result is displayed:

ⅶ. Extension: removeItem method of localStorage

//如果我想删除它的用户名怎么做呢？通过它的key把它删除,这样获取时就为空

//localStorage.removeItem("k_username");

跟踪本地数据情况:

结果显示:

ⅷ.localStorage的clear方法

//如果我想把所有数据都清除？localStorage有个方法

localStorage.clear();

结果显示:

代码显示：

XML/HTML Code复制内容到剪贴板

1. 
   
   
   
       
       
       
       
   
   
       
   
           
   
               
   用户名:
               
   
                   
               
           
           
   
               
   密码:
               
   
                   
               
           
           
   
               
   
                   
               
               
   
                   
               
           
       
   
   

4.webStorage制作简易留言板[代码为了展示效果所以把js就直接在html里面写]

XML/HTML Code复制内容到剪贴板

1. <!DOCTYPE html>
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <title></title>
       <script src="js/jquery-1.4.1.min.js"></script>
       <script type="text/javascript">
       $(function () {   
           //4.页面刷新之后判断它是否为空？   
           if (localStorage.getItem("k_showCon") != null) {   
               //5.存在，就把获取到的内容存到里面去   
               "k_showCon", $("#showCon").html(localStorage.getItem("k_showCon"));   
           }   
       });   
           function preservationClick()   
           {   
               var sCon = $("#mCon").val();   
               //2.获取到内容之后加到显示p里去？怎么放呢？这里我们用append方法   
               $("#showCon").append("<p>" + sCon + "</p>");   
               //3.预期的是刷新之后留言还在   
               localStorage.setItem("k_showCon", $("#showCon").html());   
           }   
           function ClearClick()   
           {   
               //6.获取到显示p里面的内容清除   
               $("#showCon").html("");   
               localStorage.clear();   
           }   
       </script>
   </head>
   <body>
       <p>
           <table>
               <tr>
                   <td colspan="2">
                       <textarea id="mCon" cols="25" rows="10"></textarea>
                   </td>
               </tr>
               <tr>
                   <td><input type="button" value="留言" onclick="preservationClick()" /></td>
                   <td><input type="button" value="清除" onclick="ClearClick()" /></td>
               </tr>
           </table>
           <p id="showCon"></p>
       </p>
   </body>
   </html>

   效果显示:

               

                     

The above is the detailed content of In-depth analysis of webstorage--html5's local data processing. For more information, please follow other related articles on the PHP Chinese website!