HTML5 - Web Storage

HTML5引入了兩種機制，類似於HTTP會話cookie，用於在客戶端存儲結構化數據，並克服以下缺點。

Cookies包含在每個HTTP請求中，因此通過傳輸相同的數據來減慢web應用程式的速度。
Cookies包含在每個HTTP請求中，因此可以通過internet發送未加密的數據。
Cookie被限制爲大約4KB的數據。不足以存儲所需的數據。

這兩個存儲器分別是會話存儲器和本地存儲器，用於處理不同的情況。

幾乎所有瀏覽器的最新版本都支持HTML5存儲，包括Internet Explorer。

Session Storage

會話存儲設計用於用戶正在執行單個事務，但可能同時在不同窗口中執行多個事務的情況。

Example

例如，如果用戶在兩個不同的窗口購買機票，則使用同一網站。如果網站使用cookies跟蹤用戶購買的是哪張機票，那麼當用戶在兩個窗口中逐頁單擊時，當前購買的機票將從一個窗口「洩漏」到另一個窗口，可能會導致用戶在沒有真正注意到的情況下購買同一航班的兩張機票。

HTML5引入了session storage屬性，這些站點將使用該屬性向會話存儲添加數據，並且可以訪問在該窗口中打開的同一站點的任何頁面，即session，只要關閉該窗口，會話就會丟失。

下面是設置會話變量並訪問該變量的代碼;

Live Demo

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( sessionStorage.hits ) {
            sessionStorage.hits = Number(sessionStorage.hits) +1;
         } else {
            sessionStorage.hits = 1;
         }
         document.write("Total Hits :" + sessionStorage.hits );
      </script>
	
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

這將產生以下結果&負;

Local Storage

本地存儲是爲跨多個窗口的存儲而設計的，並持續到當前會話之後。特別是，出於性能原因，Web應用程式可能希望在客戶端存儲兆字節的用戶數據，例如整個用戶編寫的文檔或用戶的郵箱。

同樣，cookies不能很好地處理這種情況，因爲它們是隨每個請求一起傳輸的。

Example

HTML5引入了local storage屬性，該屬性可用於無時間限制地訪問頁面的本地存儲區域，並且當您使用該頁面時，該本地存儲將可用。

下面的代碼將設置一個本地存儲變量，並在每次訪問此頁時（甚至下次打開窗口時）訪問該變量;

Live Demo

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
      </script>
		
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

這將產生以下結果&負;

Delete Web Storage

在本地計算機上存儲敏感數據可能會帶來危險，並可能留下安全漏洞。

會話終止後，瀏覽器將立即刪除會話存儲數據。

要清除本地存儲設置，需要調用local storage.remove（'key'）;其中'key'是要刪除的值的鍵。如果要清除所有設置，則需要調用localStorage.clear（）方法。

下面是清除完整的本地存儲的代碼&負;

Live Demo

<!DOCTYPE HTML>

<html>
   <body>

      <script type = "text/javascript">
         localStorage.clear();

         // Reset number of hits.
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
			
      </script>
		
      <p>Refreshing the page would not to increase hit counter.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

這將產生以下結果&負;