一、cookie
什么是 Cookie?
"cookie 是存儲於訪問者的計算機中的變量。每當同一台計算機通過瀏覽器請求某個頁面時，就會發送這個 cookie。你可以使用 JavaScript 來創建和取回 cookie 的值。" - w3school
cookie 是訪問過的網站創建的文件，用於存儲瀏覽信息，例如個人資料信息。
從JavaScript的角度看，cookie 就是一些字符串信息。這些信息存放在客戶端的計算機中，用於客戶端計算機與服務器之間傳遞信息。
在JavaScript中可以通過 document.cookie 來讀取或設置這些信息。由於 cookie 多用在客戶端和服務端之間進行通信，所以除了JavaScript以外，服務端的語言（如PHP）也可以存取 cookie。
為什么需要cookie?
Http協議是無狀態的，也就導致服務器無法分辨是誰瀏覽了網頁。為了維持用戶在網站的狀態，比如登陸、購物車等，出現了先后出現了四種技術，分別是隱藏表單域、URL重寫、cookie、session。
注：假如是本地磁盤中的頁面，chrome的控制台是無法用JavaScript讀寫操作 cookie 的，解決辦法...換一個瀏覽器試試————一般情況下設置cookie是服務端的事^_^。
Cookie屬性：
| Cookie屬性 | 作用說明 |
| name字段 | 一個cookie的名稱 |
| value字段 | 一個cookie的值 |
| domain字段 | 可以訪問此cookie的域名 |
| path字段 | 可以訪問此cookie的頁面路徑 |
| Size字段 | 此cookie大小 |
| http字段 | cookie的httponly屬性，若此屬性為True，則只有在http請求頭中會有此cookie信息，而不能通過document.cookie來訪問此cookie。阻止通過 JavaScript 發起的跨站腳本攻擊 (XSS) 竊取 cookie 的行為 |
| secure字段 | 設置是否只能通過https來傳遞此條cookie。 |
| expires/Max-Age字段 | 設置cookie超時時間。如果設置的值為一個時間，則當到達該時間時此cookie失效。不設置的話默認是session，意思是cookie會和session一起失效，當瀏覽器關閉（並不是瀏覽器標簽關閉，而是整個瀏覽器關閉）后，cookie失效。 |
在 JavaScript 中通過 document.cookie 屬性，你可以設置創建、維護和刪除 cookie。創建 cookie 時該屬性等同於服務器響應給客戶端報文的Set-Cookie 消息頭，而在讀取 cookie 時則等同於客戶端請求的Cookie 消息頭。如下圖：
注： cookie鍵值是否相同取決於服務端設置的路徑和名字。數量：Firefox、chrome、IE8以上每個域名cookie限制為50個左右；每個cookie大小：4KB，當Cookie已達到限額，IE和opear會自動踢除最老的Cookie，以使給最新的Cookie一些空間，所以應盡量不要上限。
1.設置cookie
在使用JavaScript存取 cookie 時，必須要使用Document對象的 cookie 屬性；一行代碼介紹如何創建和修改一個 cookie ：
如果要一次存儲多個名/值對，可以使用分號加空格（; ）隔開
document.cookie="userIdsss=666; userNameee=lucas;path=/; domain=www.google.cn; expires=30; secure"; //同時設置多個cookie
tip:cookie中所有屬性均標識綠色
以上代碼中’usernameee’表示 cookie 名稱，’lucas’表示這個名稱對應的值。假設 cookie 名稱並不存在，那么就是創建一個新的 cookie；如果存在就是修改了這個 cookie 名稱對應的值。如果要多次創建 cookie ，重復使用這個方法即可。
在輸入cookie時的名或值中不能包含分號（;）、逗號（,）、等號（=）以及空格（需要使用escape()函數進行編碼），在獲取cookie時通過unescape()函數把值轉換回來。
把cookie屬性設置為secure（屬於https協議），只保證 cookie 與服務器之間的數據傳輸過程加密，而保存在本地的 cookie文件並不加密。如果想讓本地cookie也加密，得自己加密數據。
函數寫法：
function setCookie(c_name, value, expiredays) { var exdate = new Date(); //初始化時間 exdate.setDate(exdate.getDate() + expiredays); //設置有效期
//路徑要填寫，因為JS的默認路徑是當前頁，如果不填，此cookie只在當前頁面生效！ document.cookie = c_name + "=" + escape(value) + ";path=/"+((expiredays == null) ? "": ";expires=" + exdate.toUTCString()); //如果給exiredays賦值則標簽關閉清除cookie }
2.獲取cookie
簡易寫法：
document.write(document.cookie)
函數寫法：
function getCookie(name){ var strcookie = document.cookie;//獲取cookie字符串 var arrcookie = strcookie.split("; ");//分割 //遍歷匹配 for ( var i = 0; i < arrcookie.length; i++) { var arr = arrcookie[i].split("="); if (arr[0] == name){ return unescape(arr[1]); } } return ""; }
3.刪除某cookie
刪除一個cookie，可以將其過期時間設定為一個過去的時間或者當前時間，例如：
function clearCookie(name) { setCookie(name, "", -1); //此函數借鑒上面1.設置cookie }
cookie 有兩種清除方式：
-
- 通過瀏覽器工具清除 cookie (有第三方的工具，瀏覽器自身也有這種功能)
- 通過設置 cookie 的有效期來清除 cookie
- 注：刪除 cookie 有時可能導致某些網頁無法正常運行
4.檢查cookie
function checkCookie() { var user = getCookie("username"); if (user != "") { alert("Welcome again " + user); } else { user = prompt("Please enter your name:", ""); if (user != "" && user != null) { setCookie("username", user, 365); } } }
5.清除某域名下全部cookie
function clearAllCookie() { var keys = document.cookie.match(/[^ =;]+(?=\=)/g); if(keys) { for(var i = keys.length; i--;) document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString() } }
二、session
Cookie方法的是把數據保存在客戶端，而Session是把數據保存在服務器，而客戶端具有一個唯一的ID.
持久cookie(有效期)是無法改成會話cookie（沒設置有效期），除非刪除這個cookie，然后重新建立這個cookie。
用下面這個圖來了解下session的工作原理:
session是以cookie或URL重寫為基礎的，默認使用cookie來實現，系統會創造一個名為 JSESSIONID的輸出cookie，我們叫做session cookie,
對比cookie的工作原理：
這里很清楚的可以看出客戶端設置Cookie后，在請求頭中會包含Cookie頭，即客戶端保存數據。如果服務器的set-cookie沒有設置有效期，則數據存放在內存中，否則存在硬盤文件中。
可以看出Session中也有Cookie,只是其中保存的不再是直接的數據，而是一個ID，在服務器端，服務器根據客戶端的JSESSIONID來判斷。
服務器端是以鍵值對的方式保存數據的，這里的key就是JSESSIONID，根據key來獲取value,如果沒有這個JSESSIONID，就新創建加入Map中。
二者比較：
相同點：
cookie與session都是用來跟蹤瀏覽器用戶身份的會話方式。
不同點：
總的來說，cookie是采取的客戶端保狀態的會話方式，而session采取的是服務器保持狀態的會話方式。
采用session的會話方式，用戶量大時，因為數據保存在服務器，其服務器壓力毫無疑問會比較大。還有其他的一些不同，如二者的存取方式等。
1.設置session（javascript）
sessionStorage.setItem("lucas","12580");
2.獲取session
console.log(sessionStorage.getItem("lucas"));
3.1客戶端刪除session
sessionStorage.removeItem("lucas");
3.2服務端刪除session
會話關閉后，session會自動失效，如果想手動刪除session，可以在服務器端編程實現。如PHP是這樣做的
$_SESSION = array(); session_destory();
設置session有效期
單純的js中不可以設置session.因為session是服務器端,js只是客戶端的.不過你可以通過js訪問服務器端代碼(如ajax機制),從而操作session。
Session 是存放在服務器上的，過不過期取決於服務器設置，跟瀏覽器沒什么關系，瀏覽器本地只是在 Cookie 里儲存的 SessionID 而已。
首先說明當會話結束session也就隨着消失了，而設置了有效期的cookie會存在於客戶端硬盤上的一段文本（通常是加密的），而且可能會遭到cookie欺騙以及針對cookie的跨站腳本攻擊，自然不如 session安全了。
Session是在用戶第一次訪問網站的時候創建的，那么Session是什么時候銷毀的呢？其實，Session使用一種平滑超時的技術來控制何時銷毀Session。默認情況下，Session的超時時間（Timeout）是20分鍾，即用戶保持連續20分鍾不訪問網站，則Session被收回。如果在這20分鍾內用戶又訪問了一次頁面，那么20分鍾就重新計時了。也就是說，這個超時是連續不訪問的超時時間，而不是第一次訪問后20分鍾必過時。
如果每次請求都刷新認證sessionID的過期時間，對服務器壓力太大。
通過修改服務端的Web.config文件的配置項來調整這個超時時間：
<sessionState timeout="30"></sessionState>
在web.xml文件中可以手工配置session的失效時間：
<!-- 設置Session的有效時間:以分鍾為單位--> <session-config> <session-timeout>15</session-timeout> </session-config>
還可以直接asp程序中設置：
Session.Timeout = "30"; //30分鍾
三、localStorage&sessionStorage
WebStorage這兩種方式存儲的數據不會自動發給服務器，僅僅是本地保存，有大小限制。這兩個對象實際上是持久化關聯數組，是名值對的映射表，“名”和“值”都是字符串。Web存儲易於使用、支持大容量（但非無限量）數據存儲同時兼容當前所有主流瀏覽器，但是不兼容早期瀏覽器。
他們均只能存儲字符串類型的對象，localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡
localStorage是持久化的本地保存，除非主動刪除，不然會一直存在，而且在所有的同源窗口中都是可以共享的；sessionStorage生命周期為當前窗口或標簽頁，一旦窗口或標簽頁被永久關閉了，那么所有通過sessionStorage存儲的數據也就被清空了。
不同瀏覽器無法共享localStorage或sessionStorage中的信息。相同瀏覽器的不同頁面間可以共享相同的 localStorage（頁面屬於相同域名和端口），但是不同頁面或標簽頁間無法共享sessionStorage的信息。這里需要注意的是，頁面及標 簽頁僅指頂級窗口，如果一個標簽頁包含多個iframe標簽且他們屬於同源頁面，那么他們之間是可以共享sessionStorage的。
1.設置保存存儲的方法
sessionStorage.setItem("key","value");
sessionStorage.key="value"; //第二種寫法
sessionStorage['name']=321
localStorage.setItem("key","value");
localStorage.key2="value11"; //key2是鍵名，=右邊是鍵值
localStorage['keyname']=keyValue;
2.讀取存儲數據的方法
變量=sessionStorage.getItem("key");
//或者寫成
變量=sessionStorage.key(0); //第一個key的值名，而非value
//或者寫成
變量=sessionStorage.['key'];
變量=localStorage.getItem("key");
//或者寫成
變量=localStorage.key(1); //第二個key的值名，而非value
//或者寫成
變量=localStorage.['key'];
3.刪除&清空存儲數據的方法
localStorage.removeItem("key");//刪除名稱為“key”的信息。
localStorage.clear();//清空localStorage中所有信息
sessionStorage.removeItem("key");
sessionStorage.clear();
通過getItem或直接使用localStorage["key"]獲取到的信息均為實際存儲的副本。
例如：
localStorage.key = {value1:"value1"};
localStorage.key.value1='a';
這里是無法對實際存儲的值產生作用的，下面的寫法也不可以：
localStorage.getItem("key").value1="a";
cookie 、sessionStorage與localStorage的區別：
localStorage && sessionStorage也可存儲Json對象：存儲時，通過JSON.stringify()將對象轉換為文本格式；讀取時，通過JSON.parse()將文本轉換回對象。
var userinfo = { name: 'lucas', age: 22 }; // 存儲值：將對象轉換為Json字符串 sessionStorage.setItem('user', JSON.stringify(userinfo)); // 取值時：把獲取到的Json字符串轉換回對象 var userJsonStr = sessionStorage.getItem('user'); userinfo = JSON.parse(userJsonStr); console.log(userinfo.name); // => lucas