你的位置:首页 > 软件开发 > 网页设计 > HTML5本地存储应用sessionStorage和localStorage

HTML5本地存储应用sessionStorage和localStorage

发布时间:2017-08-17 23:00:09
在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 (#换成@)。