html5 数据存储应用详解 localStorage sessionstorage 登录
在这以前，客户端的存储功能都是通过cookie来实现。由于cookie是对每个服务器的请求来传递，所以cookie不适合大量数据存储。使得cookie速度很慢，效率不高。
在h5中数据不是由每个服务器的请求来实现的，而是只有在请求时使用数据，这样使在不影响网站性能的情况下存储大量数据成为可能。
cookie安全性不好存储不超过4kb每次的http请求都必须附带cookie
localStorage：
没有时间限制，当关闭浏览器窗口时不会被删除 。不是一种持久化的本地存储，仅仅是会话级别的存储。
sessionStorage:针对具体某一个session进行数据存储，当关闭浏览器窗口时会被删除。用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
sessionstorage 对象
sessionStoraage.setItem(key,value)
参数key，表示被保存内容的键名。返回键名如果没有返回null
参数value，键值。成功设置键名后不允许修改，不能重复。有重复的键名，只能修改对应的键值，即用新增重复的键名取代原有重复的键名
getitem（）读取数据
1 // JavaScript Document 2 function $$(id){ 3 return document.getElementById(id); 4 } 5 function txtName_change(v){ 6 var strName=v.value; 7 sessionStorage.setItem("strName",strName); 8 $$("pStatus").style.display="block"; 9 $$("pStatus").innerHTML=sessionStorage.getItem("strName"); 10 } 11 //点击读取调用 12 function btnGetValue_click(){ 13 $$("pStatus").style.display="block"; 14 $$("pStatus").innerHTML=sessionStorage.getItem("strName"); 15 }
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script type="text/javascript" language="jscript" src="js7-3.js"></script> 7 <link href="css7-3.css" rel="stylesheet" type="text/css"> 8 </head> 9 10 <body> 11 <fieldset> 12 <legend>sessionStorage 对象保存与读取临时数据</legend> 13 <input name="txtName" type="text" class="inpputtxt" onChange="txtName_change(this);" size="30px"> 14 <input name="btnGetValue" type="button" class="inputbtn" onClick="btnGetValue_click();" value="读取"> 15 <p id="pStatus"></p> 16 </fieldset> 17 </body> 18 </html>
localStorage对象
localStorage.setItem(key,value)
和sessionStorage保存数据参数说明相同。
区别：调用对象不同，当使用localStorage对象保存数据后，可以调用对象中的getItem方法读取指定键名所对应的键值
localStorage.getItem（key）
清除localStorage对象保存的内容removeItem（）；
localStorage.removeItem（key）
如果删除成功，则会删除所有与键名相对应得数据
1 // JavaScript Document 2 function $$(id){ 3 return document.getElementById(id); 4 } 5 //页面加载时调用函数 6 function pageload(){ 7 var strName=localStorage.getItem("keyName"); 8 var strPass=localStorage.getItem("keyPass"); 9 if(strName){ 10 $$("txtName").value=strName; 11 } 12 if(strPass){ 13 $$("txtPass").value=strPass; 14 } 15 } 16 //点击登录后调用的函数 17 function btnLogin_click(){ 18 var strName=$$("txtName").value 19 var strPass=$$("txtPass").value; 20 localStorage.setItem("keyName",strName); 21 if($$("chkSave").checked){ 22 localStorage.setItem("keyPass",strPass); 23 24 }else{ 25 localStorage.removeItem("keyPass"); 26 } 27 $$("spnStatus").className="status"; 28 $$("spnStatus").innerHTML="登录成功!"; 29 }
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>保存并读取登录用户名与密码</title> 6 <script type="text/javascript" src="js7-4.js" language="jscript"></script> 7 </head> 8 9 <body onLoad="pageload();"> 10 <form id="frmLogin" action="#"> 11 <fieldset> 12 <legend>登录</legend> 13 <ul> 14 <li class="li_top"> 15 <span id="spnStatus"></span> 16 </li> 17 <li>名称： 18 <input id="txtName" class="inputtxt" type="text"> 19 </li> 20 <li>密码： 21 <input id="txtPass" type="password" class="inputtxt"> 22 </li> 23 <li> 24 <input id="chkSave" type="checkbox">保存密码 25 </li> 26 <li> 27 <input name="btnLogin" class="inputbtn" value="登录" type="button" onClick="btnLogin_click();"> 28 <input name="rstLogin" class="inputbtn" type="reset" value="取消"> 29 </li> 30 </ul> 31 </fieldset> 32 </form> 33 </body> 34 </html>
步骤
1.通过localStorage对象中的getItem（）方法获取指定键名的键值，并保存在变量中
2.当用户单击登录时会触发onClick事件调用btnLogin_click（）；
通过两个变量
var strName=$$("txtName").value
var strPass=$$("txtPass").value;
保存文本框中输出的用户名和密码，然后调用localStorage对象中的setItem（）方法，将用户名作为键名“keyname”保存，
如果选择保存密码则将密码作为键名“keypass”保存
否则调用removeItem（）方法删除记录.
