在html5之前,浏览器要实现数据的存储,一般都是用cookie,但是cookie有域名和大小限定. html5流行之后,可以通过localStorage和sessionStorage实现浏览器端的数据存储,这两者有什么特点呢?sessionStorage session ...
在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>
原标题:HTML5本地存储应用sessionStorage和localStorage
关键词:HTML
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。