關於Cookie、session和Web Storage

一邊學習前端，一邊經過博客的形式本身總結一些東西，固然也但願幫助一些和我同樣開始學前端的小夥伴。

若是出現錯誤，請在評論中指出，我也好本身糾正本身的錯誤

author： thomaszhou

• cookie和session的區別

  • cookie數據存放在客戶的瀏覽器上，session數據放在服務器上
  • cookie不是很安全，別人能夠分析存放在本地的cookie並進行cookie欺騙，考慮到安全應當使用session。用戶驗證這種場合通常會用 session
  • session保存在服務器，客戶端不知道其中的信息；反之，cookie保存在客戶端，服務器可以知道其中的信息
  • session會在必定時間內保存在服務器上，當訪問增多，會比較佔用你服務器的性能，考慮到減輕服務器性能方面，應當使用cookie
  • session中保存的是對象，cookie中保存的是字符串
  • session不能區分路徑，同一個用戶在訪問一個網站期間，全部的session在任何一個地方均可以訪問到，而cookie中若是設置了路徑參數，那麼同一個網站中不一樣路徑下的cookie互相是訪問不到的

• 深刻理解session和cookie的關係

Session: 是在服務端保存的一個數據結構，用來跟蹤用戶的狀態，這個數據能夠保存在集羣、數據庫、文件中；

Cookie: 是客戶端保存用戶信息的一種機制，用來記錄用戶的一些信息，也是實現Session的一種方式。

• 一、 因爲HTTP協議是無狀態的協議，因此服務端須要記錄用戶的狀態時，就須要用某種機制來識具體的用戶，這個機制就是Session.典型的場景好比購物車，當你點擊下單按鈕時，因爲HTTP協議無狀態，因此並不知道是哪一個用戶操做的，因此服務端要爲特定的用戶建立了特定的Session，用用於標識這個用戶，而且跟蹤用戶，這樣才知道購物車裏面有幾本書。這個Session是保存在服務端的，有一個惟一標識。在服務端保存Session的方法不少，內存、數據庫、文件都有。集羣的時候也要考慮Session的轉移，在大型的網站，通常會有專門的Session服務器集羣，用來保存用戶會話，這個時候 Session 信息都是放在內存的，使用一些緩存服務好比Memcached之類的來放 Session。
• 二、 思考一下服務端如何識別特定的客戶?: 這個時候Cookie就登場了。每次HTTP請求的時候，客戶端都會發送相應的Cookie信息到服務端。實際上大多數的應用都是用 Cookie來實現Session跟蹤的，第一次建立Session的時候，服務端會在HTTP協議中告訴客戶端，須要在 Cookie 裏面記錄一個Session ID，之後每次請求把這個會話ID發送到服務器，我就知道你是誰了。

session 的運行依賴 session id，而 session id 是存在 cookie中的

• 三、有人問，若是客戶端的瀏覽器禁用了 Cookie怎麼辦？通常這種狀況下，會使用一種叫作URL重寫的技術來進行會話跟蹤，(在 url 中傳遞 session_id)即每次HTTP交互，URL後面都會被附加上一個諸如 sid=xxxxx 這樣的參數，服務端據此來識別用戶。

• 四、 Cookie有個很經常使用的場景就是自動填上用戶名和密碼

原本 session 是一個抽象概念，開發者爲了實現中斷和繼續等操做，將 user agent 和 server 之間一對一的交互，抽象爲「會話」，進而衍生出「會話狀態」，也就是 session 的概念。

而 cookie 是一個實際存在的東西，http 協議中定義在 header 中的字段。能夠認爲是 session 的一種後端無狀態實現。

而咱們今天常說的 「session」，是爲了繞開 cookie 的各類限制，一般藉助 cookie 自己和後端存儲實現的，一種更高級的會話狀態實現。

因此 cookie 和 session，你能夠認爲是同一層次的概念，也能夠認爲是不一樣層次的概念。具體到實現，session 由於 session id 的存在，一般要藉助 cookie 實現，但這並不是必要，只能說是通用性較好的一種實現方案。

• localStorage，sessionStorage和cookie的區別

共同點：都是保存在瀏覽器端、且同源的

• 數據存儲方面
  • cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下
  • sessionStorage和localStorage不會自動把數據發送給服務器，僅在本地保存。
• 存儲數據大小
  • 存儲大小限制也不一樣，cookie數據不能超過4K，同時由於每次http請求都會攜帶cookie、因此cookie只適合保存很小的數據，如會話標識。
  • sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大
• 數據存儲有效期
  • sessionStorage：僅在當前瀏覽器窗口關閉以前有效；
  • localStorage：始終有效，窗口或瀏覽器關閉也一直保存，本地存儲，所以用做持久數據；
  • cookie：只在設置的cookie過時時間以前有效，即便窗口關閉或瀏覽器關閉
• 做用域不一樣
  • sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；
  • localstorage在全部同源窗口中都是共享的；也就是說只要瀏覽器不關閉，數據仍然存在
  • cookie: 也是在全部同源窗口中都是共享的.也就是說只要瀏覽器不關閉，數據仍然存在

Web Storage擁有setItem、getItem、removeItem、clear等方法，不像cookie須要本身封裝setCookie、getCookie等方法

• sessionStorage與頁面js數據對象的區別

頁面中通常的js對象的生存期僅在當前頁面有效，所以刷新頁面或轉到另外一頁面這樣的從新加載頁面的狀況，數據就不存在了()

而sessionStorage只要同源的同學口中，刷新頁面或進入同源的不一樣頁面，數據始終存在，也就是說只要瀏覽器不關閉，數據仍然存在()

cookie使用方法介紹

cookie能夠寫好封裝，也可直接用已經寫好的框架這裏推薦一個吧‘jquery.cookies.2.2.0.min.js’；注意還有有一個是cookie.js的也能夠，我的以爲沒有「jquery.cookies.2.2.0.min.js」好用。

先說一下，JavaScript原生的用法。

Cookie 以名/值對形式存儲 例如username=John Doe，這裏的數據是string類型，如要是其餘格式注意進行格式轉換。

JavaScript 可使用 document.cookie 屬性來建立 、讀取、及刪除 cookie。JavaScript 中，建立 cookie 以下所示：

document.cookie="username=John Doe";
複製代碼

您還能夠爲 cookie 添加一個過時時間（以 UTC 或 GMT 時間）。默認狀況下，cookie 在瀏覽器關閉時刪除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
複製代碼

您可使用 path 參數告訴瀏覽器 cookie 的路徑。默認狀況下，cookie 屬於當前頁面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
複製代碼

設置cookie

function setCookie(cname,cvalue,exdays)
{
  var SetTime = new Date();                                         //設置過時時間
  SetTime.setTime(SetTime.getTime()+(exdays*24*60*60*1000));        //設置過時時間
  var expires = "expires="+SetTime.toGMTString();                   //設置過時時間
  document.cookie = cname + "=" + cvalue + "; " + expires;          //建立一個cookie
}
複製代碼

讀取cookie

function getCookie(c_name)
{
if (document.cookie.length>0) 
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}
複製代碼

刪除cookie

將cookie的有效時間改爲昨天。

使用jquery.cookies.2.2.0.min.js插件

添加/修改cookie並設定過時時間：

`$.cookies.set('cookie_id', 'cookie_value', { hoursToLive: 10 });
複製代碼

這裏設置的是過時時間是10小時, 還能夠這樣設置過時時間：

expireDate = new Date();

expireDate.setTime( expireDate.getTime() + ( 10 * 60 * 60 * 1000 ) );

$.cookies.set('cookie_id', 'cookie_value', {expiresAt:expireDate});
複製代碼

獲取cookie

$.cookies.get('cookie_id');
複製代碼

刪除cookie

$.cookies.del('cookie_id');
複製代碼

SessionStorage 和 localStorage用法

H5對於web storage的支持很友好，使用方法很簡單

• setItem()

sessionStorage.setItem(keyName,value);   // 將value存儲到key字段中
//或者
sessionStorage.keyName='value';
eg：sessionStorage.setItem("name","thomas");

localStorage.getItem(keyName);          //獲取指定key的本地存儲的值
//或者
var keyName=localStorage.key;
eg:sessionStorage.getItem("name");
複製代碼

下面我只列舉sessionStorage方法。

其餘的方法基本同上，只是將前綴sessionStorage改爲localStorage便可

• getItem()

sessionStorage.getItem(keyName);          //獲取指定key的本地存儲的值
//或者
var keyName=sessionStorage.key;
eg: sessionStorage.getItem("name");
複製代碼

• removeItem()

sessionStorage.removeItem(keyName);     // 刪除指定ke的本地存儲的值
eg: sesisonStorage.removeItem("name");
複製代碼

• clear()

sessionStorage.clear()      //清除全部localStorage數據
複製代碼