歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

HTML5 WebStorage

HTML5 中引入了WebStorage的概念,可以讓客戶端本地保存數據,它接觸了傳統用cookie存放數據的局限性(只有4KB)

WebStorage分兩種:

(1)sessionStorage,這種存儲是放在session對象中,一旦浏覽器關閉就沒了,是臨時保存。

(2)localStorage,這種存儲對象是放在硬盤上的,所以就算浏覽器關閉還有,是永久保存。

我寫了一個例子程序來演示這兩種情況的區別:

這個頁面就是2組組件,第一組組件用於演示sessionStorage,第二組組件用於演示localStorage:

  1. <!DOCTYPE html> 
  2. <head> 
  3. <meta charset="UTF-8"> 
  4. <title>Web Storage Demo</title> 
  5. <script type="text/javascript" src="js/storage1.js" ></script> 
  6. </head> 
  7. <body> 
  8. <h1>Web Storage 示例</h1> 
  9.  
  10. <h3>sessionStorage的存取例子</h3> 
  11. <p id="sessionStorageMessage" >這裡會顯示sessionStorage的內容</p> 
  12. <input type='text' id="sessionStorageInput"><br> 
  13. <input type="button" value="保存sessionStorage數據" onclick="saveSessionStorage('sessionStorageInput');"><br> 
  14. <input type="button" value="讀取sessionStorage數據" onclick="loadSessionStorage('sessionStorageMessage');"><br> 
  15.  
  16. <h3>localStorage的存取例子</h3> 
  17. <p id="localStorageMessage" >這裡會顯示localStorage的內容</p> 
  18. <input type='text' id="localStorageInput"><br> 
  19. <input type="button" value="保存localStorage數據" onclick="saveLocalStorage('localStorageInput');"><br> 
  20. <input type="button" value="讀取localStorage數據" onclick="loadLocalStorage('localStorageMessage');"><br> 
  21. </body> 

js代碼中利用了HTML5中與sessionStorage,localStorage相關的API進行數據的存儲和讀取。

  1. /** 
  2.  *  This file is confidential by Charles.Wang 
  3.  *  Copyright belongs to Charles.wang 
  4.  *  You can make contact with Charles.Wang ([email protected]) 
  5.  */ 
  6.   
  7.  //sessionStorage 示例 (將數據保存在session對象),當浏覽器關閉就沒了 
  8.  function saveSessionStorage(id){ 
  9.     //取得用戶輸入的<input>的值 
  10.     var target = document.getElementById(id); 
  11.     var str = target.value; 
  12.     //用sessionStorage.setItem(key,value)來保存數據 
  13.     sessionStorage.setItem("message",str); 
  14.  } 
  15.   
  16.  function loadSessionStorage(id){ 
  17.     var target= document.getElementById(id); 
  18.     //用sessionStorage.getItem(key) 來獲取數據 
  19.     var msg=sessionStorage.getItem("message"); 
  20.     target.innerHTML=msg; 
  21.  } 
  22.  //localStorage示例(將數據庫保存在硬盤上),當浏覽器關閉了數據依然存在 
  23.   function saveLocalStorage(id){ 
  24.     var target = document.getElementById(id); 
  25.     var str = target.value; 
  26.     localStorage.setItem("message",str); 
  27.  } 
  28.   
  29.  function loadLocalStorage(id){ 
  30.     var target= document.getElementById(id); 
  31.     var msg=localStorage.getItem("message"); 
  32.     target.innerHTML=msg; 
  33.  } 

 

初始狀態,應該是:

650) this.width=650;" border=0>

我在sessionStorage中放入"Charles 是帥哥"字符串,通過輸入這個字符串然後點擊“保存sessionStorage數據”按鈕,同時我在localStorage中放入"Jessica 是美女"字符串,通過輸入字符串並且點擊“保存localStorage"按鈕,如圖:

650) this.width=650;" border=0>

 

下面,演示從storage中獲取已經保存的數據:

(a)保持浏覽器不關閉狀態

分別點擊“讀取sessionStorage數據”和“讀取localStorage數據”按鈕,如圖:

650) this.width=650;" border=0>

這裡可以看出,在浏覽器不關閉的情況下,也就是session沒有失效狀態下,sessionStorage(臨時存儲)和localStorage(永久存儲)的內容都被正確的讀取了

 

(b)重啟浏覽器

我們重啟浏覽器,然後分別點擊“讀取sessionStorage數據”和“讀取localStorage數據”按鈕,如圖:

650) this.width=650;" border=0>

這裡可以看到,sessionStorage(臨時存儲)上的數據無法被讀出來,但是localStorage(永久存儲)上的數據可以被讀出來

Copyright © Linux教程網 All Rights Reserved