Home >Web Front-end >H5 Tutorial >Detailed introduction to webstorage [local data processing of html5]
The editor below will bring you an in-depth analysis of local data processing of webstorage[html5]. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. 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 the cookie storage method;
2. What is 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 requires 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, click button 1 to save the data, click button 2, and you can get it after refreshing the page;
Process:
ⅰ. Create an event
XML/HTML Code复制内容到剪贴板 function MyClick1() { }
##JavaScript CodeCopy content to clipboardvar username = $("#TxtUserName").val();
Copy content to clipboardvar pwd = $("#TxtPwd").val();
Storege, used in Firefox2+火狐 browser;
Life cycle: The data stored in this way is only valid at the window level. When the same window (or Tab) page is refreshed or jumped, the locally stored data can be obtained. When new When opening a window or page, the original data becomes invalid [current page only]Disadvantages: IE does not support it and cannot achieve persistent data storage.
##JavaScript Code
Copy content to clipboard
sessionStorage.setItem( "k_username" , username); sessionStorage.setItem( "k_pwd" , pwd);
localStorage It is part of the Web Storage Internet Storage specification and is now supported in 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复制内容到剪贴板 localStorage.setItem("k_username", username); localStorage.setItem("k_pwd",pwd);
JavaScript Code复制内容到剪贴板 alert("保存成功!");
JavaScript Code复制内容到剪贴板 function MyClick2() { alert(sessionStorage.getItem("k_username")); alert(sessionStorage.getItem("k_pwd")); }
JavaScript Code复制内容到剪贴板 function MyClick2() { alert(localStorage.getItem("k_username")); alert(localStorage.getItem("k_pwd")) }
##The result shows:
//如果我想删除它的用户名怎么做呢?通过它的key把它删除,这样获取时就为空
//localStorage.removeItem("k_username");Track local data:
Result display:
ⅷ.localStorage的clear方法
//如果我想把所有数据都清除?localStorage有个方法
localStorage.clear();
结果显示:
代码显示:
XML/HTML Code复制内容到剪贴板
用户名: | |
密码: | |
4.webStorage制作简易留言板[代码为了展示效果所以把js就直接在html里面写]
XML/HTML Code复制内容到剪贴板 <!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 Detailed introduction to webstorage [local data processing of html5]. For more information, please follow other related articles on the PHP Chinese website!