HTML5WebStorage特性

鐵錨發表於2013-08-12
HTMLWeb

原文地址: Using HTML5 Web Storage 

原文日期： 2010年06月28日
翻譯日期： 2013年08月12日

當下Web開發領域最火爆的詞語當屬 HTML5。HTML5標準的新特性將得到那些不想通過東拼西湊一些功能來使得網站更快，更好，更靈活的WEB開發者熱烈的歡迎。其中一個耀眼的特性是Web Storage(Web 儲存)。Web儲存提供一個客戶端方法來儲存會話資訊，讓我們來看看如何使用Web Storage:

Web Storage的特點：
 – 值可以是任意的資料型別，只要是key-value形式可以儲存的。
 – 資料將永不過期，除非使用者明確呼叫了delete方法，或者瀏覽器限制了空間大小，或者其他原因(比如使用者清空歷史資料)
 – 資料項在整個domain(域名)內都可見。

HTML5 Web 儲存方法列表
setItem(key,value): 新增一個鍵值對，儲存到sessionStorage(會話儲存)物件
getItem(key): 根據key獲取值
clear(): 清空sessionStorage(會話儲存)的所有鍵/值對
removeItem(key): 從sessionStorage 移除某個項(鍵值對)
key(n): 獲取第n個key。

設定key/value
有兩種方式可以把值儲存到sessionStorage：

// 第一種方式，標準方法
sessionStorage.setItem(`email`,`renfufei@qq.com`);
// 第二種方式，直接當成普通物件屬性賦值。
sessionStorage.blog = `http://blog.csdn.net/renfufei`;

獲取值

同樣有兩種方式：

// 1. 標準方法
var email = sessionStorage.getItem(`email`);
// 2. 直接取屬性值
var blog = sessionStorage.blog;

移除key/value

// 移除之後，再獲取值，將會得到 undefined
// 根據key，移除鍵值對
sessionStorage.removeItem(`email`);

清空sessionStorage

// 全部清除
sessionStorage.clear();

非常簡單的一個示例
當使用者點選退出按鈕時，提示”歡迎下次再來！”

<a href="javascript:;" onClick="if(sessionStorage && sessionStorage.getItem(`name`)) { alert(`歡迎下次再來, ` + sessionStorage.getItem(`name`)); }">退出</a>

瀏覽器相容性
就像其他酷炫的特性一樣，瀏覽器相容性總是焦點。 IE8以前的瀏覽器都不支援sessionStorage，如果想要支援更早的瀏覽器，你需要自己構建sessionStorage類(物件).
HTML5 web儲存簡單而有趣，但是 HTML5 Web Storage需要JavaScript的支援，所以在某些關鍵領域(場合)，你可能需要審慎地使用。
你如何看待HTML5 的 Web Storage，你在開發中用到過麼？

完整的程式碼示例如下：

<!DOCTYPE html>
<html>
 <head>
  <title>HTML5 Web Storage 示例</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="renfufei@qq.com">
  <meta name="Keywords" content="HTML5 sessionStorage">
  <meta name="Description" content="from:http://davidwalsh.name/html5-storage">
  <!-- HTML5 建議，script 標籤，不加type屬性域 -->
  <script>
	// 封裝為自己的方法，有一個好處，就是如果想支援更古老的瀏覽器，
	// 那麼，可以判斷是否支援HTML5，也採用自己的實現，比如cookie
	// 根據key獲取值，可以指定預設值
	function get(key,defValue){
		return sessionStorage.getItem(key) || defValue;
		//return sessionStorage[key] || defValue;
	};
	// 設定key/value
	function set(key,value){
		return sessionStorage.setItem(key,value);
		//return sessionStorage[key] = value;
	};
	// 設定key/value
	function clearStorage(){
		return sessionStorage.clear();
	};
	// 退出
	function signout(){
		var name = get("name",`遊客`);
		if(name) { 
			alert(`再見, ` +name ); 
		}
	};
	// 設定值
	function setName(){
		var nameInput = document.getElementById("name");
		if(nameInput){
			var name = nameInput.value;
			if(!name){
				alert("姓名不能為空");
			} else {
				set(`name`,name);
			}
		}
	};
	// 繫結事件
	 window.addEventListener("DOMContentLoaded", function() {  
        var btnsetname = document.getElementById("btnsetname");  
        var btnclear = document.getElementById("btnclear");  
        var btnsignout = document.getElementById("btnsignout");  
        btnsetname.addEventListener("click",function(){  
            //  
            setName(); 
        });   
		btnclear.addEventListener("click",function(){  
            //  
            clearStorage();
        });   
		btnsignout.addEventListener("click",function(){  
            //  
            signout();
        });  
    }, false);  
  </script>
 </head>

 <body>
  <div>
	姓名: <input id="name" value="" /> <button id="btnsetname">確定</button>
  </div>
  <div>
	<button id="btnclear">清除資料</button>
  </div>
  <div>
	<button id="btnsignout">退出</button>
  </div>
 </body>
</html>


相關文章