關於Cookie、session和Web Storage

thomaszhou發表於2018-04-17
CookieSessionWeb

一邊學習前端，一邊通過部落格的形式自己總結一些東西，當然也希望幫助一些和我一樣開始學前端的小夥伴。

如果出現錯誤，請在評論中指出，我也好自己糾正自己的錯誤

關於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的一種方式。

  • 1、 由於HTTP協議是無狀態的協議，所以服務端需要記錄使用者的狀態時，就需要用某種機制來識具體的使用者，這個機制就是Session.典型的場景比如購物車，當你點選下單按鈕時，由於HTTP協議無狀態，所以並不知道是哪個使用者操作的，所以服務端要為特定的使用者建立了特定的Session，用用於標識這個使用者，並且跟蹤使用者，這樣才知道購物車裡面有幾本書。這個Session是儲存在服務端的，有一個唯一標識。在服務端儲存Session的方法很多，記憶體、資料庫、檔案都有。叢集的時候也要考慮Session的轉移，在大型的網站，一般會有專門的Session伺服器叢集，用來儲存使用者會話，這個時候 Session 資訊都是放在記憶體的，使用一些快取服務比如Memcached之類的來放 Session。
  • 2、 思考一下服務端如何識別特定的客戶?: 這個時候Cookie就登場了。每次HTTP請求的時候，客戶端都會傳送相應的Cookie資訊到服務端。實際上大多數的應用都是用 Cookie來實現Session跟蹤的，第一次建立Session的時候，服務端會在HTTP協議中告訴客戶端，需要在 Cookie 裡面記錄一個Session ID，以後每次請求把這個會話ID傳送到伺服器，我就知道你是誰了。

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

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

  • 4、 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資料
複製程式碼

相關文章