在這以前，客戶端的存儲功能都是通過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（）方法刪除記錄.