Posted on 2012-04-15 16:37
zljpp 閱讀(246)
評論(0) 編輯 收藏
一、 DEMO HTML代碼
上一次介紹了HTML5 Web Storage存儲機制，原來必須保存在服務端數據庫中的內容現在可以直接保存在客戶端本地了，這不僅可以減輕了服務器數據訪問的負擔，同時也提高了數據的訪問速度。請將下面的代碼復制到html文件中，我們通過示例來了解Web Storage。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Web Storage示例</title>
<script type="text/javascript" src="JS/webstoragescript.js">
</script>
</head>
<body>
<div>
<h2>sessionStorage示例</h2>
<p id="sessionMsg"></p>
<input type="text" id="sessionInput">
<input type="button" value="保存數據" onClick="savesessionStorage('sessionInput');">
<input type="button" value="讀取數據" onClick="loadsessionStorage('sessionMsg');">
<br />
<h2>localStorage示例</h2>
<p id="localMsg"></p>
<input type="text" id="localInput">
<input type="button" value="保存數據" onClick="savelocalStorage('localInput');">
<input type="button" value="讀取數據" onClick="loadlocalStorage('localMsg');">
</div>
</body>
</html> |
上為DEMO HTML代碼
當我們點擊保存數據時，分別調用webstoragescript.js（代碼在文章后面）中的savesessionStorage和savelocalStorage方法，點擊讀取數據時分別調用loadsessionStorage和loadlocalStorage方法。
讓我們打開JS腳本文件來看下，該腳本分別使用了sessionStorage和localStorage兩種方法。這兩種方法的HTML代碼只有p id和input id不同 ，都是當用戶在input文本輸入內容并點擊保存數據按鈕時保存數據，點擊讀取數據時讀取保存的數據。
但是他們對數據的處理方式都不一樣，sessionStorage方法如果關閉了瀏覽器，這個保存的數據就丟失，在一次打開瀏覽器瀏覽這個頁面的時候，點擊讀取數據將讀取不到任何數據。
而localStorage則是瀏覽器被關閉，下次在打開瀏覽器瀏覽這個頁面點擊讀取數據時任然能讀取到保存的數據。當然，這個數據是區分瀏覽器的，在別的瀏覽器中是讀取不到這個瀏覽器保存的數據的。
二、兩種對象使用方法
1．sessionStorage
保存數據：sessionStorage.setItem(key,value);
讀取數據：sessionStorage.getItem(key);
2．localStorage
保存數據：localStorage.setItem(key,value);
讀取數據：localStorage.getItem(key);
看上面的說明相信大家都能很快明白兩種對象的使用方法。但是，不管是使用哪個對象，都是用setItem(鍵名,鍵值)的方法來保存數據，保存后不允許修改鍵名，但是可以修改鍵值也就是說只新建鍵名，再保存鍵值。使用getItem方法讀取數據時，將參數指定為鍵名，返回鍵值。
// sessionStorage示例JS
function savesessionStorage(id){
var target= document.getElementById(id);
var str=target.value;
sessionStorage.setItem("message",str);
}
function loadsessionStorage(id){
var target=document.getElementById(id);
var msg=sessionStorage.getItem("message");
target.innerHTML=msg;
}
// localStorage示例JS
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;
} |
webstoragescript.js代碼
火狐瀏覽器中的HTML5 Web Storage示例