session,cookie,sessionStorage,localStorage的相關設置以及獲取刪除

1、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()
                }
            }

 2、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分鐘

3、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