Linux教程網 >> Linux編程 >> Linux編程 >> HTML5 WebStorage

HTML5 WebStorage

日期：2017/3/1 10:23:16 编辑：Linux編程

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

WebStorage分兩種：

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

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

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

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

<!DOCTYPE html> 
<head> 
<meta charset="UTF-8"> 
<title>Web Storage Demo</title> 
<script type="text/javascript" src="js/storage1.js" ></script> 
</head> 
<body> 
<h1>Web Storage 示例</h1> 
 
<h3>sessionStorage的存取例子</h3> 
<p id="sessionStorageMessage" >這裡會顯示sessionStorage的內容</p> 
<input type='text' id="sessionStorageInput"><br> 
<input type="button" value="保存sessionStorage數據" onclick="saveSessionStorage('sessionStorageInput');"><br> 
<input type="button" value="讀取sessionStorage數據" onclick="loadSessionStorage('sessionStorageMessage');"><br> 
 
<h3>localStorage的存取例子</h3> 
<p id="localStorageMessage" >這裡會顯示localStorage的內容</p> 
<input type='text' id="localStorageInput"><br> 
<input type="button" value="保存localStorage數據" onclick="saveLocalStorage('localStorageInput');"><br> 
<input type="button" value="讀取localStorage數據" onclick="loadLocalStorage('localStorageMessage');"><br> 
</body>

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

/** 
 *  This file is confidential by Charles.Wang 
 *  Copyright belongs to Charles.wang 
 *  You can make contact with Charles.Wang ([email protected]) 
 */ 
  
 //sessionStorage 示例 （將數據保存在session對象),當浏覽器關閉就沒了 
 function saveSessionStorage(id){ 
    //取得用戶輸入的<input>的值 
    var target = document.getElementById(id); 
    var str = target.value; 
    //用sessionStorage.setItem(key,value)來保存數據 
    sessionStorage.setItem("message",str); 
 } 
  
 function loadSessionStorage(id){ 
    var target= document.getElementById(id); 
    //用sessionStorage.getItem(key) 來獲取數據 
    var msg=sessionStorage.getItem("message"); 
    target.innerHTML=msg; 
 } 
 //localStorage示例（將數據庫保存在硬盤上），當浏覽器關閉了數據依然存在 
  function saveLocalStorage(id){ 
    var target = document.getElementById(id); 
    var str = target.value; 
    localStorage.setItem("message",str); 
 } 
  
 function loadLocalStorage(id){ 
    var target= document.getElementById(id); 
    var msg=localStorage.getItem("message"); 
    target.innerHTML=msg; 
 }