HTML5本地存储应用sessionStorage和localStorage

互联网 17-8-19

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

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

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

localStorage

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

sessionStorage的应用:

<!DOCTYPE html>  <html>  <head>      <meta charset="UTF-8">      <title></title>      <script>          window.onload = function(){              var aInput = document.getElementsByTagName('input');              aInput[0].onclick = function(){                  //sessionStorage: 临时存储, 只在当前页面有效,不能传递到其他页面,页面关闭之后消失                  window.sessionStorage.setItem("name", aInput[3].value );              };              aInput[1].onclick = function(){                  alert(window.sessionStorage.getItem("name" ));              };              aInput[2].onclick = function(){                  window.sessionStorage.removeItem("name" );              };          }      </script>  </head>  <body>  <input type="button" value="设置" />  <input type="button" value="获取" />  <input type="button" value="删除" />  <br/>  <input type="text" />  </body>  </html>

localStorage的应用

<!DOCTYPE html>  <html>  <head>      <meta charset="UTF-8">      <title></title>      <script>          window.onload = function(){              var aInput = document.getElementsByTagName('input');              aInput[0].onclick = function(){                  //localStorage : 永久性存储                  window.localStorage.setItem("name", aInput[3].value);                  window.localStorage.setItem("name2", 'aaaaa');              };              aInput[1].onclick = function(){                  alert( window.localStorage.getItem( "name" ) );                  alert( window.localStorage.getItem( "name2" ) );              };              aInput[2].onclick = function(){                  window.localStorage.removeItem("name");  //                window.localStorage.clear();              };          }      </script>  </head>  <body>  <input type="button" value="设置" />  <input type="button" value="获取" />  <input type="button" value="删除" />  <br/>  <input type="text" />  </body>  </html>

<!DOCTYPE html>  <html>  <head>      <meta charset="UTF-8">      <title></title>      <script>          window.onload = function () {              var aInput = document.getElementsByTagName("input");              var oT = document.querySelector("textarea");                if (window.localStorage.getItem("userName")) {                  aInput[0].value = window.localStorage.getItem("userName");              }                for (var i = 0; i < aInput.length; i++) {                  if (window.localStorage.getItem('sex') == aInput[i].value) {                      aInput[i].checked = true;                  }              }                if (window.localStorage.getItem("note")) {                  oT.value = window.localStorage.getItem("note");              }                window.onunload = function () {                  if (aInput[0].value) {                      window.localStorage.setItem("userName", aInput[0].value);                  }                    for (var i = 0; i < aInput.length; i++) {                      if (aInput[i].checked == true) {                          window.localStorage.setItem('sex', aInput[i].value);                      }                  }                    if (oT.value) {                      window.localStorage.setItem('note', oT.value);                  }              }          }      </script>  </head>  <body>  <p>      用户名: <input type="text"/>  </p>    <p>      性别: <br/>      <input type="radio" name="sex" value="男"/>男      <input type="radio" name="sex" value="女"/>女  </p>    <p>      备注:      <textarea cols="30" rows="10"></textarea>  </p>    </body>  </html>

以上就是HTML5本地存储应用sessionStorage和localStorage的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： h5