How to use sessionStorage and localStorage in HTML5

小编给大家分享一下HTML5中sessionStorage和localStorage怎么用，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧!

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

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

sessionStorage

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

localStorage

永久存储（可以手动删除数据）

存储量限制 ( 5M )

客户端完成，不会请求服务器处理

sessionStorage数据在页面之间不能共享、 而localStorage可以实现页面之间共享

sessionStorage的应用:

_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" ); }; }

localStorage的应用

_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(); }; } _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); } } }

用户名:

性别: 男 女

备注:

看完了这篇文章，相信你对"HTML5中sessionStorage和localStorage怎么用"有了一定的了解，如果想了解更多相关知识，欢迎关注行业资讯频道，感谢各位的阅读!