HTML5 本地存儲（Web Storage）

時間 2019-11-18

標籤 html5 html 本地存儲 web storage 欄目 HTML5 简体版

原文原文鏈接

HTML5 提供了兩種在客戶端存儲數據的新方法：html

localStorage - 本地永久存儲，下次打開瀏覽器數據依然存在
sessionStorage - 只存在於一個會話的數據存儲，關閉瀏覽器數據會被清除

注意：
   1）只要清除瀏覽器cookie，兩種存儲方式的數據都會被清除
   2）對於不一樣的網站，數據存儲於不一樣的區域，各網站只能訪問其自身的數據
   3）瀏覽器之間的數據是各自獨立的（好比Firefox中使用localStorage存儲一組數據，在Chrome瀏覽器下是沒法讀取的）

一、目前大部分的瀏覽器已支持web storage, 固然也能夠檢測一下：web

1     if (!window.localStorage) {
2         alert('您的瀏覽器不支持localStorage');
3     }
4 
5     if (!window.sessionStorage) {
6         alert('您的瀏覽器不支持sessionStorage');
7     }

二、方法chrome

localStorage，sessionStorage 有5個方法，使用方法一致，如下localStorage爲例：瀏覽器

localStorage.setItem([string] key, [string] value); //本地客戶端存儲一個字符串類型的數據cookie
localStorage.getItem([string] key); //能夠讀取已知key值的valuesession
localStorage.removeItem([string] key); //刪除指定key的itemide
localStorage.clear(); //清除localstorage全部key/value鍵位對網站
localStorage.key([number] index); //獲得某個索引的key

三、示例 spa

記錄進入頁面次數，查看 localStorage 與 sessionStorage 存儲數據的變化。firefox

Html:

1 <div>
2     進入頁面次數(localStorage)：<mark id="local"></mark> time(s)
3     <br>
4     進入頁面次數(sessionStorage)：<mark id="session"></mark> time(s)
5 </div>

Javascript:

1 //記錄localStorage進入頁面次數
2 var count1 = localStorage.getItem('localCount') ? parseInt(localStorage.getItem('localCount')) + 1 : 1;
3 localStorage.setItem('localCount', count1);
4 document.getElementById('local').innerHTML = count1;
5 
6 //記錄sessionStorage進入頁面次數
7 var count2 = sessionStorage.getItem('sessionCount') ? parseInt(sessionStorage.getItem('sessionCount')) + 1 : 1;
8 sessionStorage.setItem('sessionCount', count2);
9 document.getElementById('session').innerHTML = count2;

step1：進入chrome刷新頁面10次

step2：關閉chrome再從新打開

說明：關閉頁面後，sessionStorage 的值丟失

step3：第一次進入firefox

說明：瀏覽器之間的數據是各自獨立的，firefox 讀取不到 chrome的客戶端存儲數據

step4：清空chrome的cookie

說明：清空cookie，localStorage 與 sessionStorage 的數據均被清除

源代碼：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>在客戶端存儲數據</title>
 6 </head>
 7 <body>
 8 <div>
 9     進入頁面次數(localStorage)：<mark id="local"></mark> time(s)
10     <br>
11     進入頁面次數(sessionStorage)：<mark id="session"></mark> time(s)
12 </div>
13  <script>
14      if (window.localStorage) { //sessionStorage
15          //記錄localStorage進入頁面次數
16          var count1 = localStorage.getItem('localCount') ? parseInt(localStorage.getItem('localCount')) + 1 : 1;
17          localStorage.setItem('localCount', count1);
18          document.getElementById('local').innerHTML = count1;
19 
20          //記錄sessionStorage進入頁面次數
21          var count2 = sessionStorage.getItem('sessionCount') ? parseInt(sessionStorage.getItem('sessionCount')) + 1 : 1;
22          sessionStorage.setItem('sessionCount', count2);
23          document.getElementById('session').innerHTML = count2;
24      }
25  </script>
26 </body>
27 </html>