==============================三者區別分析==============================================

cookie:

儲存： 儲存在客戶端，最大隻能存 4kb的資料。

有效時間：可以設定有效時間。過期或者手動刪除，就失效。是否失效與瀏覽器及視窗的開啟和關閉無關。

資料與伺服器之間的互動方式： cookie的資料會自動的傳遞到伺服器，伺服器端也可以寫cookie到客戶端

localstorage:

儲存：最大可以儲存 5MB的資料。

有效時間：沒有失效時間。可以長期儲存。手動刪除即失效。是否失效與瀏覽器及視窗的開啟和關閉無關。

資料與伺服器之間的互動方式：localstorage不會自動把資料發給伺服器，僅在本地儲存。

seesionStorage:

儲存：最大可以儲存5MB的資料。

有效時間：不能長期儲存。 手動刪除 或 瀏覽器視窗關閉即失效。

資料與伺服器之間的互動方式：sessionStorage不會自動把資料發給伺服器，僅在本地儲存。

==================================具體用法===================================================

1. cookie

var cookies = document.cookie: 讀取所有的cookie物件 document.cookie = "key=val, expires=d.toGTMString(), path=/"; 增加/修改 cookie  key的值     

function setCookie(key,val,exdays) {
	var d = new Date();
	d.setTime(d.getTime() + (exdays*24*60*60*1000));
	document.cookie=key+"="+val+";"+"expires="+d.toGMTString();
}

function getCookie(key){
	var objs = document.cookie.split(";");
	for(var i = 0; i < objs.length; i++){
		var obj = objs[i].trim();
		if(obj.indexOf(key)==0) {
			return obj.substring(parseInt(key.length + 1), obj.length);
		} else {
			return "";
		}
	}
}

function checkCookie() {
	var user = getCookie("username");
	if(!user){
		user = prompt("請輸入使用者姓名", "");
		setCookie("username", user, 0.0001);	
	} else {
		alert("歡迎"+user+"再次光臨");
	}
}

checkCookie();
 

 2. localStorage

	alert("瀏覽器不支援localStorage");
} else {
	var storage = window.localStorage;
	
	// 新增/修改 localStorage 的三種方法
	storage.setItem('a', 111);
	storage['b'] = 222;			
	storage.c = 333;
	
	// 讀取 localStorage 的三種方法
	console.log(storage.getItem('a'));
	console.log(storage['b']);
	console.log(storage.c);
	
	// 刪除 localStorage 的多所有內容
	// storage.clear();
	
	// 刪除某個鍵值對
	storage.removeItem('a');
	
	
	//  localStorage 會自動將 localStorage 轉換成為字串形式。
	// 使用 JSON.stringify() 這個方法，來將 JSON 轉換成為 JSON 字串。
	var data = {
		name: "Tony",
		age: "12",
		sex: "man"
	}
	storage.setItem('data', JSON.stringify(data));			
	console.log(storage.data);
	
	// 讀取之後要將 JSON 字串轉換成為 JSON 物件，使用 JSON.parse() 方法：
	console.log(JSON.parse(storage.data));
	
}

3. sessionStorage

if(!window.sessionStorage){
	alert("瀏覽器不支援sessionStorage");
} else {
	var sessionStorage = window.sessionStorage;
	
	// 新增/修改 localStorage 的三種方法
	sessionStorage.setItem('a', 111);
	sessionStorage['b'] = 222;			
	sessionStorage.c = 333;
	
	// 讀取 localStorage 的三種方法
	console.log(sessionStorage.getItem('a'));
	console.log(sessionStorage['b']);
	console.log(sessionStorage.c);
	
	// 刪除 localStorage 的多所有內容
	// storage.clear();
	
	// 刪除某個鍵值對
	sessionStorage.removeItem('a');	
	
	//  localStorage 會自動將 localStorage 轉換成為字串形式。
	// 使用 JSON.stringify() 這個方法，來將 JSON 轉換成為 JSON 字串。
	var data = {
		name: "Tony",
		age: "12",
		sex: "man"
	}
	sessionStorage.setItem('data', JSON.stringify(data));			
	console.log(sessionStorage.data);
	
	// 讀取之後要將 JSON 字串轉換成為 JSON 物件，使用 JSON.parse() 方法：
	console.log(JSON.parse(sessionStorage.data));
	
}