HTML5提供了在客戶端存儲數據的新方法Web Storage
類似於HTML4中的Cookie
不過它要強大的多
Cookie
先來簡單複習一下之前使用的cookie
cookie存儲數據到用戶設備上,存儲的數據量較小隻有4KB
可以通過navigator.cookieEnabled檢測是否開啓了cookie
- 設置cookie
document.cookie = 'key=value';
- 獲取cookie
document.cookie;
- 刪除cookie
document.cookie = "key=value;max-age=0";
- 設置max-age存儲期限
document.cookie = "key=value;max-age=1000"; // 1000秒
- 設置expires存儲期限
var timestamp = (new Date()).getTime() + 10000;
var expires = new Date(timestamp).toGMTString();//或toUTCString
document.cookie = "key=value;expires="+expires;
- 獲取具體cookie值
function getCookie(name) {
var name = name + "=";
var ary = document.cookie.split(';');
for(var i = 0; i < ary.length; i++){
var c = ary[i];
while (c.charAt(0) == ' '){
c = c.substring(1);
}
if (c.indexOf(name) != -1){
return c.substring(name.length, c.length);
}
}
return "";
}
Web Storage
Web Storage又分爲兩種
localStorage和sessionStorage
它們的區別是:
- localStorage存儲的是永久數據,除非手動刪除
- sessionStorage存儲的是臨時數據,窗口關閉就會消失
簡單使用
Web Storage只能存儲字符串數據
我覺得可以把它們理解爲JSON
使用方法都是類似的,已localStorage爲例
localStorage.name = 'payen';
localStorage.info = JSON.stringify({name: 'payen', age: 20});
console.log(localStorage.name);
console.log(JSON.parse(localStorage.info));
要存儲的數據名就是localStorage的屬性名
普通的字符串正常存儲就可以了
對象數據可以利用JSON.stringify()將其轉換爲字符串格式
使用的時候再用JSON.parse()轉換回對象格式
(如果直接存儲對象的話,它會被強制轉換爲字符串 “[object Object]”)
刪除數據直接delete就好
delete localStorage.name;
delete localStorage.info;
如果不刪除的話,localStorage裏面的數據就會一直存在於你的瀏覽器了
API
localStorage和sessionStorage還提供了簡單的API
類似於一個客戶端的數據庫
(API都是相同的)
常用的有以下幾個:
- 保存數據 setItem(key,value)
- 讀取數據 getItem(key)
- 刪除單個數據 removeItem(key)
- 清空全部數據 clearItem()
- 獲取數據索引 key(index)
實例
通過這個,我們可以寫個簡易的通訊錄
<div id="container">
<br>
<label for="username">姓名:</label>
<input type="text" id="username" name="username">
<br>
<label for="mobilephone">手機:</label>
<input type="text" id="mobilephone" name="mobilephone">
<br><br>
<input type="button" onclick="add()" id="add" value="增加聯繫人">
<br><br>
<hr>
<label for="search">輸入姓名:</label>
<input type="text" id="search" name="search">
<br><br>
<input type="button" onclick="find()" id="find" value="查找手機號">
<p id="result"><br></p>
</div>
#container {
border: 2px solid gray;
width: 320px;
text-align:center;
}
JavaScript中就是實現這兩個函數
var user = document.getElementById('username'),
phone = document.getElementById('mobilephone'),
search = document.getElementById('search'),
result = document.getElementById('result');
var add = function(){
var u = user.value,
p = phone.value,
l = localStorage.length;
if(u !== '' && p !== ''){
localStorage.setItem(u, p);
user.value = '';
phone.value = '';
alert('添加成功');
}
};
var find = function(){
var s = search.value,
r = localStorage.getItem(s);
if(s !== '' && r){
result.innerHTML = r;
}
};
輸入姓名和手機添加聯繫人
然後在下面輸入聯繫人姓名我們可以查找到手機號
當然這個通訊錄十分簡易了
也可以爲它添加顯示通訊錄全部信息
刪除聯繫人功能等等
cookie與Web Storage區別
最後說說Html5的Web Storage和Html4的cookie的區別
特點 | Cookie | Web Storage |
---|---|---|
生命週期 | 一般由服務器生成並設置時間;瀏覽器生成默認關閉瀏覽器失效 | local:不清除則永久保存;session:關閉頁面或瀏覽器失效 |
數據大小 | 4KB | 官方推薦5MB |
通信 | 攜帶在HTTP頭中(過多使用有性能問題) | 僅在瀏覽器存儲,不參與通信 |
使用 | 原生接口不友好,需要手動封裝 | 原生接口友好 |