HTML5本地存储应用sessionStorage和localStorage

来源：互联网发布：mysql insert 锁表编辑：程序博客网时间：2024/05/24 08:33

在html5之前，浏览器要实现数据的存储，一般都是用cookie，但是cookie有域名和大小限定.

html5流行之后，可以通过localStorage和sessionStorage实现浏览器端的数据存储，这两者有什么特点呢？

sessionStorage
　　sessionStorage属于临时会话，数据存储的有效期为：从页面打开到页面关闭的时间段,属于窗口的临时存储，页面关闭，本地存储消失

localStorage

永久存储（可以手动删除数据）
存储量限制 ( 5M )
客户端完成，不会请求服务器处理
sessionStorage数据在页面之间不能共享、而localStorage可以实现页面之间共享

sessionStorage的应用:

 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4     <meta charset="UTF-8"> 5     <title></title> 6     <script> 7         window.onload = function(){ 8             var aInput = document.getElementsByTagName('input'); 9             aInput[0].onclick = function(){10                 //sessionStorage: 临时存储, 只在当前页面有效,不能传递到其他页面,页面关闭之后消失11                 window.sessionStorage.setItem("name", aInput[3].value );12             };13             aInput[1].onclick = function(){14                 alert(window.sessionStorage.getItem("name" ));15             };16             aInput[2].onclick = function(){17                 window.sessionStorage.removeItem("name" );18             };19         }20     </script>21 </head>22 <body>23 <input type="button" value="设置" />24 <input type="button" value="获取" />25 <input type="button" value="删除" />26 <br/>27 <input type="text" />28 </body>29 </html>

localStorage的应用

 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4     <meta charset="UTF-8"> 5     <title></title> 6     <script> 7         window.onload = function(){ 8             var aInput = document.getElementsByTagName('input'); 9             aInput[0].onclick = function(){10                 //localStorage : 永久性存储11                 window.localStorage.setItem("name", aInput[3].value);12                 window.localStorage.setItem("name2", 'aaaaa');13             };14             aInput[1].onclick = function(){15                 alert( window.localStorage.getItem( "name" ) );16                 alert( window.localStorage.getItem( "name2" ) );17             };18             aInput[2].onclick = function(){19                 window.localStorage.removeItem("name");20 //                window.localStorage.clear();21             };22         }23     </script>24 </head>25 <body>26 <input type="button" value="设置" />27 <input type="button" value="获取" />28 <input type="button" value="删除" />29 <br/>30 <input type="text" />31 </body>32 </html>

 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4     <meta charset="UTF-8"> 5     <title></title> 6     <script> 7         window.onload = function () { 8             var aInput = document.getElementsByTagName("input"); 9             var oT = document.querySelector("textarea");10 11             if (window.localStorage.getItem("userName")) {12                 aInput[0].value = window.localStorage.getItem("userName");13             }14 15             for (var i = 0; i < aInput.length; i++) {16                 if (window.localStorage.getItem('sex') == aInput[i].value) {17                     aInput[i].checked = true;18                 }19             }20 21             if (window.localStorage.getItem("note")) {22                 oT.value = window.localStorage.getItem("note");23             }24 25             window.onunload = function () {26                 if (aInput[0].value) {27                     window.localStorage.setItem("userName", aInput[0].value);28                 }29 30                 for (var i = 0; i < aInput.length; i++) {31                     if (aInput[i].checked == true) {32                         window.localStorage.setItem('sex', aInput[i].value);33                     }34                 }35 36                 if (oT.value) {37                     window.localStorage.setItem('note', oT.value);38                 }39             }40         }41     </script>42 </head>43 <body>44 <p>45     用户名: <input type="text"/>46 </p>47 48 <p>49     性别: <br/>50     <input type="radio" name="sex" value="男"/>男51     <input type="radio" name="sex" value="女"/>女52 </p>53 54 <p>55     备注:56     <textarea cols="30" rows="10"></textarea>57 </p>58 59 </body>60 </html>

阅读全文

0 0