來自於《HTML5與CSS3權威指南》第七章的內容,Web Storage的一些基礎知識。
HTML4中採用cookies存儲機制,可以在客戶端存儲用戶名等簡單的用戶信息。但存在以下幾個問題:
1)大小:cookies的大小被限制在4KB;
2)帶寬:cookies隨HTTP事務一起被髮送,因此會浪費一部分發送cookies時使用的帶寬;
HTML5提供了在客戶端本地保存數據的功能,即Web Storage功能。如下面示例所示:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript">
function SaveStorage(id){
var target=document.getElementById(id);
var str=target.value;
sessionStorage.setItem("message",str); //二選一
//localStorage.setItem("message",str);
alert("數據保存成功");
}
function LoadStorage(id){
var target=document.getElementById(id);
var msg=sessionStorage.getItem("message"); //二選一
//var msg=localStorage.getItem("message");
target.innerHTML=msg;
}
</script>
</head>
<body>
<h1>Web Storage</h1>
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="保存數據" οnclick="saveStorage('input');" >
<input type="button" value="讀取數據" οnclick="LoadStorage('msg');" >
</body>
</html>
1)sessionStorage
將數據保存在session對象中,數據保存是從用戶進入瀏覽器到瀏覽器關閉這段時間。
- sessionStorage.setItem(key,value); //保存數據
- sessionStorage.getItem(key); //讀取數據
2)localStorage
將數據保存在客戶端本地的硬件設備(通常指硬盤等),即使瀏覽器關閉,數據仍然存在。
- localStorage.setItem(key,value); //保存數據
- localStorage.getItem(key); //讀取數據
- localStorage.removeItem(key); //刪除指定key本地存儲的值
(一)製作簡單Web留言本
Web Storage保存數據時,以“鍵名/鍵值”這樣的格式。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>簡單留言本</title>
<script type="text/javascript">
function saveStorage(id){
var data=document.getElementById(id).value;
var time=new Date().getTime();
localStorage.setItem(time,data);
alert("數據保存成功");
loadStorage('msg');
}
function loadStorage(id){
var result='<table border="1">';
for(var i=0;i<localStorage.length;i++){
var key=localStorage.key(i);
var value=localStorage.getItem(key);
var date=new Date();
date.setTime(key);
var datastr=date.toGMTString();
result+='<tr><td>' + value + '</td><td>' + datastr +'</td></tr>';
}
result+='</table>';
var target=document.getElementById(id);
var msg=sessionStorage.getItem("message");
target.innerHTML=result;
}
function clearStorage(){
localStorage.clear(); //清除客戶端本地存儲的數據
alert("全部數據被清除");
loadStorage('msg');
}
</script>
</head>
<body>
<h1>Web Storage</h1>
<textarea id="memo" cols="60" rows="10"></textarea><br/>
<input type="button" value="追加" οnclick="saveStorage('memo');" >
<input type="button" value="初始化" οnclick="clearStorage('msg');" >
<hr>
<p id="msg"></p>
</body>
</html>
(二)作爲簡單數據庫使用
localStorage存儲的值都是字符串類型,在處理複雜的數據時,比如json數據時,需要藉助JSON類,將json字符串轉換成真正可用的json格式。
1)var str=JSON.stringify(data);
將參數data表示要轉換成JSON格式文本數據的對象,這個方法是將對象轉換成JSON格式的文本數據。
2)var data=JSON.parse(str);
參數str表示從localStorage中獲得的數據,這個方法表示將傳入的數據轉換成JSON對象。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>簡易數據庫示例</title>
<script type="text/javascript">
function saveStorage(){
var data=new Object();
data.name=document.getElementById("name").value;
data.email=document.getElementById("email").value;
data.tel=document.getElementById("tel").value;
data.memo=document.getElementById("memo").value;
var str=JSON.stringify(data);
localStorage.setItem(data.name,str);
alert("數據保存成功");
}
function findStorage(id){
var find=document.getElementById("find").value;
var str=localStorage.getItem(find);
var data=JSON.parse(str);
var result="姓名:" + data.name + "<br>";
result+= "EMAIL:" + data.email + "<br>";
result+= "電話號碼:" + data.tel + "<br>";
result+= "備註:" + data.memo + "<br>";
var target=document.getElementById(id);
target.innerHTML=result;
}
</script>
</head>
<body>
<h1>使用Web Storage來做簡易數據庫示例</h1>
<table border="1">
<tr>
<td>姓名:</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>EMAIL:</td>
<td><input type="text" id="email"></td>
</tr>
<tr>
<td>電話號碼:</td>
<td><input type="text" id="tel"></td>
</tr>
<tr>
<td>備註:</td>
<td><input type="text" id="memo"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="保存" οnclick="saveStorage();"></td>
</tr>
</table>
<hr>
<p>檢索:<input type="text" id="find">
<input type="button" value="檢索" οnclick="findStorage('msg');">
</p>
<p id="msg"></p>
</body>
</html>
Web Storage與Cookies相比的一些優勢:
1)存儲空間更大:IE8下每個獨立的存儲空間爲10M,其他瀏覽器實現略有不同,但都比Cookie要大很多。
2)存儲內容不會發送到服務器:當設置了Cookies後,Cookies的內容會隨着請求一併發送的服務器,這對於本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地,不會與服務器發生任何交互。
3)更多豐富易用的接口:Web Storage提供了一套更爲豐富的接口,使得數據操作更爲簡便。
4)獨立的存儲空間:每個域(包括子域)有獨立的存儲空間,各個存儲空間是完全獨立的,因此不會造成數據混亂。