html5流行之后,可以通过localStorage和sessionStorage实现浏览器端的数据存储,这两者有什么特点呢?
sessionStorage
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>