image-20210708185501291

一.HTML4的本地存儲(chǔ) cookie

瀏覽器的緩存機(jī)制提供了可以將用戶數(shù)據(jù)存儲(chǔ)在客戶端上的方式宪巨，可以利用cookie,session等跟服務(wù)端進(jìn)行數(shù)據(jù)交互盘榨。

cookie和session都是用來(lái)跟蹤瀏覽器用戶身份的會(huì)話方式。

二. cookie和session兩者比較

2.1.保持狀態(tài)：cookie保存在瀏覽器端鉴未，session保存在服務(wù)器端

2.2 使用方式：

（1）cookie機(jī)制：如果不在瀏覽器中設(shè)置過期時(shí)間码泛，cookie被保存在內(nèi)存中，生命周期隨瀏覽器的關(guān)閉而結(jié)束饿这，這種cookie簡(jiǎn)稱會(huì)話cookie。如果在瀏覽器中設(shè)置了cookie的過期時(shí)間撞秋，cookie被保存在硬盤中长捧，關(guān)閉瀏覽器后，cookie數(shù)據(jù)仍然存在部服，直到過期時(shí)間結(jié)束才消失唆姐。

Cookie是服務(wù)器發(fā)給客戶端的特殊信息，cookie是以文本的方式保存在客戶端廓八，每次請(qǐng)求時(shí)都帶上它

（2）session機(jī)制：當(dāng)服務(wù)器收到請(qǐng)求需要?jiǎng)?chuàng)建session對(duì)象時(shí)奉芦，首先會(huì)檢查客戶端請(qǐng)求中是否包含sessionid。如果有sessionid剧蹂，服務(wù)器將根據(jù)該id返回對(duì)應(yīng)session對(duì)象声功。如果客戶端請(qǐng)求中沒有sessionid，服務(wù)器會(huì)創(chuàng)建新的session對(duì)象宠叼，并把sessionid在本次響應(yīng)中返回給客戶端先巴。通常使用cookie方式存儲(chǔ)sessionid到客戶端其爵，在交互中瀏覽器按照規(guī)則將sessionid發(fā)送給服務(wù)器。如果用戶禁用cookie伸蚯，則要使用URL重寫摩渺，可以通過response.encodeURL(url) 進(jìn)行實(shí)現(xiàn)；API對(duì)encodeURL的結(jié)束為剂邮，當(dāng)瀏覽器支持Cookie時(shí)摇幻，url不做任何處理；當(dāng)瀏覽器不支持Cookie的時(shí)候挥萌，將會(huì)重寫URL將SessionID拼接到訪問地址后绰姻。

2.3 存儲(chǔ)內(nèi)容：

cookie只能保存字符串類型，以文本的方式引瀑；session通過類似與Hashtable的數(shù)據(jù)結(jié)構(gòu)來(lái)保存狂芋，能支持任何類型的對(duì)象(session中可含有多個(gè)對(duì)象)

2.4 存儲(chǔ)的大小：

cookie：?jiǎn)蝹€(gè)cookie保存的數(shù)據(jù)不能超過4kb憨栽；session大小沒有限制帜矾。

2.5 安全性：

cookie：針對(duì)cookie所存在的攻擊：Cookie欺騙，Cookie截獲徒像；session的安全性大于cookie黍特。

原因如下：（1）sessionID存儲(chǔ)在cookie中，若要攻破session首先要攻破cookie锯蛀；

（2）sessionID是要有人登錄，或者啟動(dòng)session_start才會(huì)有次慢，所以攻破cookie也不一定能得到sessionID旁涤；

（3）第二次啟動(dòng)session_start后，前一次的sessionID就是失效了迫像，session過期后劈愚，sessionID也隨之失效。

（4）sessionID是加密的

（5）綜上所述闻妓，攻擊者必須在短時(shí)間內(nèi)攻破加密的sessionID菌羽，這很難。

2.6 應(yīng)用場(chǎng)景：

cookie：（1）判斷用戶是否登陸過網(wǎng)站由缆，以便下次登錄時(shí)能夠?qū)崿F(xiàn)自動(dòng)登錄（或者記住密碼）注祖。如果我們刪除cookie，則每次登錄必須從新填寫登錄的相關(guān)信息均唉。

（2）保存上次登錄的時(shí)間等信息是晨。

（3）保存上次查看的頁(yè)面

（4）瀏覽計(jì)數(shù)

img

session：Session用于保存每個(gè)用戶的專用信息，變量的值保存在服務(wù)器端舔箭，通過SessionID來(lái)區(qū)分不同的客戶罩缴。

（1）網(wǎng)上商城中的購(gòu)物車

（2）保存用戶登錄信息

（3）將某些數(shù)據(jù)放入session中，供同一用戶的不同頁(yè)面使用

（4）防止用戶非法登錄

2.7 缺點(diǎn)：

          cookie：（1）大小受限

（2）用戶可以操作（禁用）cookie，使功能受限

（3）安全性較低

（4）有些狀態(tài)不可能保存在客戶端箫章。

（5）每次訪問都要傳送cookie給服務(wù)器烙荷，浪費(fèi)帶寬。

（6）cookie數(shù)據(jù)有路徑（path）的概念檬寂，可以限制cookie只屬于某個(gè)路徑下奢讨。

session：（1）Session保存的東西越多，就越占用服務(wù)器內(nèi)存焰薄，對(duì)于用戶在線人數(shù)較多的網(wǎng)站拿诸，服務(wù)器的內(nèi)存壓力會(huì)比較大。

（2）依賴于cookie（sessionID保存在cookie）塞茅，如果禁用cookie亩码，則要使用URL重寫，不安全

（3）創(chuàng)建Session變量有很大的隨意性野瘦，可隨時(shí)調(diào)用描沟，不需要開發(fā)者做精確地處理，所以鞭光，過度使用session變量將會(huì)導(dǎo)致代碼不可讀而且不好維護(hù)吏廉。

img

三.WebStorage(localStorage和sessionStorage)

HTML5中與本地存儲(chǔ)相關(guān)的兩個(gè)重要內(nèi)容：Web Storage與本地?cái)?shù)據(jù)庫(kù)。其中惰许，Web Storage存儲(chǔ)機(jī)制是對(duì)HTML4中cookie存儲(chǔ)機(jī)制的一個(gè)改善席覆。由于cookie存儲(chǔ)機(jī)制有很多缺點(diǎn)，HTML5不再使用它汹买，轉(zhuǎn)而使用改良后的Web Storage存儲(chǔ)機(jī)制佩伤。本地?cái)?shù)據(jù)庫(kù)是HTML5中新增的一個(gè)功能，使用它可以在客戶端本地建立一個(gè)數(shù)據(jù)庫(kù)晦毙，原本必須保存在服務(wù)器端數(shù)據(jù)庫(kù)中的內(nèi)容現(xiàn)在可以直接保存在客戶端本地了生巡，這大大減輕了服務(wù)器端的負(fù)擔(dān)，同時(shí)也加快了訪問數(shù)據(jù)的速度见妒。

3.1 cookie的弊端

我們知道孤荣，在HTML4中可以使用cookie在客戶端保存諸如用戶名等簡(jiǎn)單的用戶信息，但是须揣，通過長(zhǎng)期的使用盐股，你會(huì)發(fā)現(xiàn)，用cookie存儲(chǔ)永久數(shù)據(jù)存在以下幾個(gè)問題：

1.大蟹稻础：cookie的大小被限制在4KB遂庄。

2.帶寬：cookie是隨HTTP事務(wù)一起被發(fā)送的，因此會(huì)浪費(fèi)一部分發(fā)送cookie時(shí)使用的帶寬劲赠。

3.復(fù)雜性：要正確的操縱cookie是很困難的涛目。

3.2 Web Storage

針對(duì)這些問題秸谢，在HTML5中，重新提供了一種在客戶端本地保存數(shù)據(jù)的功能霹肝，它就是Web Storage娄蔼。

具體來(lái)說只泼，Web Storage又分為兩種：

3.2.1.sessionStorage：

將數(shù)據(jù)保存在session對(duì)象中刽酱。所謂session载城，是指用戶在瀏覽某個(gè)網(wǎng)站時(shí)，從進(jìn)入網(wǎng)站到瀏覽器關(guān)閉所經(jīng)過的這段時(shí)間讯赏，也就是用戶瀏覽這個(gè)網(wǎng)站所花費(fèi)的時(shí)間垮兑。session對(duì)象可以用來(lái)保存在這段時(shí)間內(nèi)所要求保存的任何數(shù)據(jù)。

3.2.2 localStorage：

將數(shù)據(jù)保存在客戶端本地的硬件設(shè)備(通常指硬盤漱挎，也可以是其他硬件設(shè)備)中系枪，即使瀏覽器被關(guān)閉了，該數(shù)據(jù)仍然存在磕谅，下次打開瀏覽器訪問網(wǎng)站時(shí)仍然可以繼續(xù)使用私爷。

這兩者的區(qū)別在于，sessionStorage為臨時(shí)保存膊夹，而localStorage為永久保存衬浑。

到目前為止，F(xiàn)irefox3.6以上放刨、Chrome6以上工秩、Safari 5以上、Pera10.50以上宏榕、IE8以上版本的瀏覽器支持sessionStorage與localStorage的使用拓诸。

四.localStorage和sessionStorage對(duì)比

WebStorage的目的是克服由cookie所帶來(lái)的一些限制，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端時(shí)麻昼，不需要持續(xù)的將數(shù)據(jù)發(fā)回服務(wù)器。

WebStorage兩個(gè)主要目標(biāo)：

（1）提供一種在cookie之外存儲(chǔ)會(huì)話數(shù)據(jù)的路徑馋辈。

（2）提供一種存儲(chǔ)大量可以跨會(huì)話存在的數(shù)據(jù)的機(jī)制抚芦。

HTML5的WebStorage提供了兩種API：localStorage（本地存儲(chǔ)）和sessionStorage（會(huì)話存儲(chǔ)）。

4.1 生命周期：

localStorage:localStorage的生命周期是永久的迈螟，關(guān)閉頁(yè)面或?yàn)g覽器之后localStorage中的數(shù)據(jù)也不會(huì)消失叉抡。localStorage除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)永遠(yuǎn)不會(huì)消失答毫。

sessionStorage的生命周期是在僅在當(dāng)前會(huì)話下有效褥民。sessionStorage引入了一個(gè)“瀏覽器窗口”的概念，sessionStorage是在同源的窗口中始終存在的數(shù)據(jù)洗搂。只要這個(gè)瀏覽器窗口沒有關(guān)閉消返，即使刷新頁(yè)面或者進(jìn)入同源另一個(gè)頁(yè)面载弄，數(shù)據(jù)依然存在。但是sessionStorage在關(guān)閉了瀏覽器窗口后就會(huì)被銷毀撵颊。同時(shí)獨(dú)立的打開同一個(gè)窗口同一個(gè)頁(yè)面宇攻，sessionStorage也是不一樣的。

4.2 存儲(chǔ)大谐隆：

localStorage和sessionStorage的存儲(chǔ)數(shù)據(jù)大小一般都是：5MB

4.3 存儲(chǔ)位置：

localStorage和sessionStorage都保存在客戶端逞刷，不與服務(wù)器進(jìn)行交互通信。

4.4 存儲(chǔ)內(nèi)容類型：

localStorage和sessionStorage只能存儲(chǔ)字符串類型妻熊，對(duì)于復(fù)雜的對(duì)象可以使用ECMAScript提供的JSON對(duì)象的stringify和parse來(lái)處理

4.5 獲取方式：

localStorage：window.localStorage;夸浅；sessionStorage：window.sessionStorage;。

4.6 應(yīng)用場(chǎng)景：

localStoragese：常用于長(zhǎng)期登錄（+判斷用戶是否已登錄）扔役，適合長(zhǎng)期保存在本地的數(shù)據(jù)帆喇。sessionStorage：敏感賬號(hào)一次性登錄；

WebStorage的優(yōu)點(diǎn)：

（1）存儲(chǔ)空間更大：cookie為4KB厅目，而WebStorage是5MB番枚；

（2）節(jié)省網(wǎng)絡(luò)流量：WebStorage不會(huì)傳送到服務(wù)器，存儲(chǔ)在本地的數(shù)據(jù)可以直接獲取损敷，也不會(huì)像cookie一樣美詞請(qǐng)求都會(huì)傳送到服務(wù)器葫笼，所以減少了客戶端和服務(wù)器端的交互，節(jié)省了網(wǎng)絡(luò)流量拗馒；

（3）對(duì)于那種只需要在用戶瀏覽一組頁(yè)面期間保存而關(guān)閉瀏覽器后就可以丟棄的數(shù)據(jù)路星，sessionStorage會(huì)非常方便；

（4）快速顯示：有的數(shù)據(jù)存儲(chǔ)在WebStorage上诱桂，再加上瀏覽器本身的緩存洋丐。獲取數(shù)據(jù)時(shí)可以從本地獲取會(huì)比從服務(wù)器端獲取快得多，所以速度更快挥等；

（5）安全性：WebStorage不會(huì)隨著HTTP header發(fā)送到服務(wù)器端友绝，所以安全性相對(duì)于cookie來(lái)說比較高一些，不會(huì)擔(dān)心截獲肝劲，但是仍然存在偽造問題迁客；

（6）WebStorage提供了一些方法，數(shù)據(jù)操作比cookie方便辞槐；

setItem (key, value) —— 保存數(shù)據(jù)掷漱，以鍵值對(duì)的方式儲(chǔ)存信息。

getItem (key) —— 獲取數(shù)據(jù)榄檬，將鍵值傳入卜范，即可獲取到對(duì)應(yīng)的value值。

　　removeItem (key) ——  刪除單個(gè)數(shù)據(jù)鹿榜，根據(jù)鍵值移除對(duì)應(yīng)的信息海雪。

　　clear () ——  刪除所有的數(shù)據(jù)

　　key (index) —— 獲取某個(gè)索引的key

五.==cookie,localStorage,sessionStorage對(duì)比==

相同點(diǎn)：三者都被用在瀏覽器端存儲(chǔ)數(shù)據(jù)，而且都是字符串類型的鍵值對(duì)

六.localStorage,sessionStorage練習(xí)

6.1 .localStorage

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage的使用</title>
  </head>

  <body>
    <h1>localStorage的使用</h1>
    <button class="btn01">保存數(shù)據(jù)</button>
    <button class="btn02">讀取數(shù)據(jù)</button>
    <button class="btn03">刪除數(shù)據(jù)</button>
    <button class="btn04">清空數(shù)據(jù)</button>
  </body>
  <script>
    /* 
    1.localStorage里面存的是字符串拒秘，如果需要存數(shù)組和對(duì)象的話号显，用JSON.stringify()轉(zhuǎn)化
    */
    let btn01 = document.querySelector(".btn01");
    let btn02 = document.querySelector(".btn02");
    let btn03 = document.querySelector(".btn03");
    let btn04 = document.querySelector(".btn04");

    const arr = [10, 20, 30, 40];
    const obj = {
      id: 1000,
      name: "grace",
      age: 20,
      show: function () {
        console.log("我長(zhǎng)得好看");
      }
    }
    //1.設(shè)置數(shù)據(jù)
    btn01.onclick = function () {
      localStorage.setItem("name", "jason");
      localStorage.setItem("obj", JSON.stringify(obj));
      localStorage.setItem("arr", JSON.stringify(arr));
    }
    // 2.讀取數(shù)據(jù)
    btn02.onclick = function () {
      let p = localStorage.getItem("name");
      let o = localStorage.getItem("obj");
      let arr = localStorage.getItem("arr");

      try {
        //嘗試著解析臭猜，一旦解析失敗，移除該數(shù)據(jù)
        console.log(p); //字符串不要使用JSON解析
        console.log(JSON.parse(o));
        console.log(JSON.parse(arr));
      } catch (error) {
        console.log(error.message);
        // 移除localStorage
        localStorage.removeItem("arr")
        localStorage.removeItem("name")
        localStorage.removeItem("obj")
      }

    }
    // 3.刪除某個(gè)數(shù)據(jù)
    btn03.onclick = function () {
      localStorage.removeItem("arr")
    }

    // 4.清空所有數(shù)據(jù)
    btn04.onclick = function () {
      localStorage.clear()
    }
  </script>

</html>

6.2 sessionStorage

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sessionStorage的使用</title>
  </head>

  <body>
    <h1>sessionStorage</h1>
    <button class="btn01">保存數(shù)據(jù)</button>
    <button class="btn02">讀取數(shù)據(jù)</button>
    <button class="btn03">刪除數(shù)據(jù)</button>
    <button class="btn04">清空數(shù)據(jù)</button>
  </body>
  <script>
    /* 
    1.localStorage里面存的是字符串押蚤，如果需要存數(shù)組和對(duì)象的話蔑歌，用JSON.stringify()轉(zhuǎn)化
    */
    let btn01 = document.querySelector(".btn01");
    let btn02 = document.querySelector(".btn02");
    let btn03 = document.querySelector(".btn03");
    let btn04 = document.querySelector(".btn04");

    const arr = [10, 20, 30, 40];
    const obj = {
      id: 1000,
      name: "grace",
      age: 20,
      show: function () {
        console.log("我長(zhǎng)得好看");
      }
    }
    //1.設(shè)置數(shù)據(jù)
    btn01.onclick = function () {
      sessionStorage.setItem("name", "jason");
      sessionStorage.setItem("obj", JSON.stringify(obj));
      sessionStorage.setItem("arr", JSON.stringify(arr));
    }
    // 2.讀取數(shù)據(jù)
    btn02.onclick = function () {
      let p = sessionStorage.getItem("name");
      let o = sessionStorage.getItem("obj");
      let arr = sessionStorage.getItem("arr");

      try {
        //嘗試著解析，一旦解析失敗揽碘，移除該數(shù)據(jù)
        console.log(p); //字符串不要使用JSON解析
        console.log(JSON.parse(o));
        console.log(JSON.parse(arr));
      } catch (error) {
        console.log(error.message);
        // 移除localStorage
        sessionStorage.removeItem("arr")
        sessionStorage.removeItem("name")
        sessionStorage.removeItem("obj")
      }

    }
    // 3.刪除某個(gè)數(shù)據(jù)
    btn03.onclick = function () {
      sessionStorage.removeItem("arr")
    }

    // 4.清空所有數(shù)據(jù)
    btn04.onclick = function () {
      sessionStorage.clear()
    }
  </script>

</html>