HTML5本地存儲應用sessionStorage和localStorage

時間 2019-11-12

標籤 html5 html 本地存儲應用 sessionstorage localstorage 欄目 HTML5 简体版

原文原文鏈接

在html5以前，瀏覽器要實現數據的存儲，通常都是用cookie，可是cookie有域名和大小限定. html

html5流行以後，能夠經過localStorage和sessionStorage實現瀏覽器端的數據存儲，這二者有什麼特色呢？html5

sessionStorage
　　sessionStorage屬於臨時會話，數據存儲的有效期爲：從頁面打開到頁面關閉的時間段,屬於窗口的臨時存儲，頁面關閉，本地存儲消失瀏覽器

localStorage服務器

永久存儲（能夠手動刪除數據）
存儲量限制 ( 5M )
客戶端完成，不會請求服務器處理
sessionStorage數據在頁面之間不能共享、而localStorage能夠實現頁面之間共享

sessionStorage的應用:cookie

 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的應用session

 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>