HTML5本地存儲應用sessionStorage和localStorage
阿新 • • 發佈：2017-08-18
有效 臨時 都是 ear cal query 會話 function note
在html5之前，瀏覽器要實現數據的存儲，一般都是用cookie，但是cookie有域名和大小限定.
html5流行之後，可以通過localStorage和sessionStorage實現瀏覽器端的數據存儲，這兩者有什麽特點呢？
sessionStorage
sessionStorage屬於臨時會話，數據存儲的有效期為：從頁面打開到頁面關閉的時間段,屬於窗口的臨時存儲，頁面關閉，本地存儲消失
localStorage
- 永久存儲（可以手動刪除數據）
- 存儲量限制 ( 5M )
- 客戶端完成，不會請求服務器處理
- sessionStorage數據在頁面之間不能共享、 而localStorage可以實現頁面之間共享
sessionStorage的應用:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script> 7 window.onload = function(){ 8 var aInput = document.getElementsByTagName(‘input‘); 9 aInput[0].onclick = function(){ 10 //sessionStorage: 臨時存儲, 只在當前頁面有效,不能傳遞到其他頁面,頁面關閉之後消失 11 window.sessionStorage.setItem("name", aInput[3].value ); 12 }; 13 aInput[1].onclick = function(){ 14 alert(window.sessionStorage.getItem("name" )); 15 }; 16 aInput[2].onclick = function(){ 17 window.sessionStorage.removeItem("name" ); 18 }; 19 } 20 </script> 21 </head> 22 <body> 23 <input type="button" value="設置" /> 24 <input type="button" value="獲取" /> 25 <input type="button" value="刪除" /> 26 <br/> 27 <input type="text" /> 28 </body> 29 </html>
localStorage的應用
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script> 7 window.onload = function(){ 8 var aInput = document.getElementsByTagName(‘input‘); 9 aInput[0].onclick = function(){ 10 //localStorage : 永久性存儲 11 window.localStorage.setItem("name", aInput[3].value); 12 window.localStorage.setItem("name2", ‘aaaaa‘); 13 }; 14 aInput[1].onclick = function(){ 15 alert( window.localStorage.getItem( "name" ) ); 16 alert( window.localStorage.getItem( "name2" ) ); 17 }; 18 aInput[2].onclick = function(){ 19 window.localStorage.removeItem("name"); 20 // window.localStorage.clear(); 21 }; 22 } 23 </script> 24 </head> 25 <body> 26 <input type="button" value="設置" /> 27 <input type="button" value="獲取" /> 28 <input type="button" value="刪除" /> 29 <br/> 30 <input type="text" /> 31 </body> 32 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script> 7 window.onload = function () { 8 var aInput = document.getElementsByTagName("input"); 9 var oT = document.querySelector("textarea"); 10 11 if (window.localStorage.getItem("userName")) { 12 aInput[0].value = window.localStorage.getItem("userName"); 13 } 14 15 for (var i = 0; i < aInput.length; i++) { 16 if (window.localStorage.getItem(‘sex‘) == aInput[i].value) { 17 aInput[i].checked = true; 18 } 19 } 20 21 if (window.localStorage.getItem("note")) { 22 oT.value = window.localStorage.getItem("note"); 23 } 24 25 window.onunload = function () { 26 if (aInput[0].value) { 27 window.localStorage.setItem("userName", aInput[0].value); 28 } 29 30 for (var i = 0; i < aInput.length; i++) { 31 if (aInput[i].checked == true) { 32 window.localStorage.setItem(‘sex‘, aInput[i].value); 33 } 34 } 35 36 if (oT.value) { 37 window.localStorage.setItem(‘note‘, oT.value); 38 } 39 } 40 } 41 </script> 42 </head> 43 <body> 44 <p> 45 用戶名: <input type="text"/> 46 </p> 47 48 <p> 49 性別: <br/> 50 <input type="radio" name="sex" value="男"/>男 51 <input type="radio" name="sex" value="女"/>女 52 </p> 53 54 <p> 55 備註: 56 <textarea cols="30" rows="10"></textarea> 57 </p> 58 59 </body> 60 </html>
HTML5本地存儲應用sessionStorage和localStorage