Storage的概念和cookie的相似，區(qū)別是storage是為了更大容量的存儲(chǔ)設(shè)計(jì)的。cookie的大小是受限制的，并且每次請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候cookie都會(huì)被發(fā)送過(guò)去，這樣無(wú)形中浪費(fèi)寬帶，另外cookie還需要指定的作用域，不可以跨域調(diào)用。
cookie的作用是與服務(wù)器進(jìn)行交互，作為http規(guī)范的一部分存在，而web   storage僅僅是為了本地“存儲(chǔ)”數(shù)據(jù)而生。

Cookie

Cookie的優(yōu)點(diǎn)：具有極高的擴(kuò)展性和可用性

1.可以控制保存在cookie中的session對(duì)象的大小。

2.通過(guò)加密和安全傳輸技術(shù)，減少cookie被破解的可能性。

3.可以控制cookie的生命期，給cookie一個(gè)時(shí)效性 。

cookie的缺點(diǎn)：

1.cookie的長(zhǎng)度和數(shù)量的限制。最多只能有20條cookie，每個(gè)cookie長(zhǎng)度不能超過(guò)4KB。否則會(huì)被截掉至4KB。

2.cookie可能被禁用或刪除

3.安全性問(wèn)題。cookie安全性不夠高，cookie都是以純文本形式記錄在文件中，如果要保存用戶名密碼等信息的時(shí)候，最好事先經(jīng)過(guò)加密處理。如果cookie被人攔掉了，就可以獲取到所有session信息

在html5中web storage包括兩種存儲(chǔ)方式：sessionstorage和localstorage

localStorage優(yōu)點(diǎn)：

localStorage解決了cookie存儲(chǔ)空間太小的問(wèn)題。
相比于cookie的4KB大小存儲(chǔ)空間，localStorage的存儲(chǔ)空間大小來(lái)到了5MB，相當(dāng)于一個(gè)前端的數(shù)據(jù)庫(kù)。
格式

Storage存儲(chǔ)的格式是鍵值對(duì)（key-value）的格式。
并且瀏覽器會(huì)將所有Storage的值類型限定為string類型，所以需要進(jìn)行一些轉(zhuǎn)換。

localStorage缺點(diǎn)

低版本的ie瀏覽器會(huì)不支持Storage。
Storage存儲(chǔ)數(shù)據(jù)所占空間太多會(huì)影響性能。導(dǎo)致頁(yè)面變卡。
Storage并不會(huì)被搜索引擎的爬蟲所抓取到。
localStorage和sessionStorage的區(qū)別

localStorage的存儲(chǔ)是永久性的，只有在手動(dòng)刪除或者瀏覽器被卸載后才會(huì)被清除。
sessionStorage的存儲(chǔ)保存同一窗口或者標(biāo)簽頁(yè)的數(shù)據(jù)，當(dāng)窗口或者頁(yè)面關(guān)閉后會(huì)被清除。

cookie、localstorage和sessionstrage的比較

共同點(diǎn)：用于數(shù)據(jù)的存儲(chǔ)。

區(qū)別：

1、是否需要添加到http請(qǐng)求頭？

HTTP Cookie（cookie）：在客戶端存儲(chǔ)會(huì)話信息，要求服務(wù)器對(duì)任意HTTP請(qǐng)求發(fā)送set-cookie HTTP頭作為響應(yīng)的一部分，包含會(huì)話信息。例如set-cookie: name=value。然后瀏覽器會(huì)存儲(chǔ)這樣的會(huì)話信息，并在這之后，通過(guò)為每個(gè)請(qǐng)求添加cookie HTTP頭將信息發(fā)送回服務(wù)器。如cookie:name=value。

Web Storage：無(wú)須將數(shù)據(jù)發(fā)回服務(wù)器，僅在本地保存。

2.存儲(chǔ)大小限制也不同，cookie數(shù)據(jù)不能超過(guò)4k，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie，所以cookie只適合保存很小的數(shù)

據(jù)，sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。如果在發(fā)送請(qǐng)求時(shí)需要攜帶大量的報(bào)文，建議使用storage更好一點(diǎn)

3.數(shù)據(jù)有效期不同，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。

4.作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。

5.路徑：Cookie有路徑的限制（比如cookie可以寫在某個(gè)域名下面或者某個(gè)路徑下面，我們只讓/AAA.com生效，而/bbb.com則就會(huì)看不到），Storage只存儲(chǔ)的域名下（比如你寫在www.baidu.com下面，在這個(gè)域名下，不管是什么路徑都有這個(gè)Storage）

Web Storage存在不少的優(yōu)勢(shì)

1. 存儲(chǔ)空間更大：IE8下每個(gè)獨(dú)立的存儲(chǔ)空間為10M，其他瀏覽器實(shí)現(xiàn)略有不同，但都比Cookie(<=4kb)要大很多。

2. 存儲(chǔ)內(nèi)容不會(huì)發(fā)送到服務(wù)器：當(dāng)設(shè)置了Cookie后，Cookie的內(nèi)容會(huì)隨著請(qǐng)求一并發(fā)送到服務(wù)器，這對(duì)于本地存儲(chǔ)的數(shù)據(jù)是一種帶寬浪費(fèi)。而Web Storage中的數(shù)據(jù)則僅僅是存在本地，不會(huì)與服務(wù)器發(fā)生任何交互。

3. 更多豐富易用的接口：Web Storage提供了一套更為豐富的接口，使得數(shù)據(jù)操作更為簡(jiǎn)便。您可以告訴瀏覽器 cookie 屬于什么路徑。默認(rèn)情況下，cookie 屬于當(dāng)前頁(yè)。

localStorage.setItem("name", "張三")，sessionStorage.setItem("age", 18);可進(jìn)行（key，value）的賦值操作

封裝Storage

為什么封裝Storage？

Storage本身有API,但是只是簡(jiǎn)單的key/value形式

Storage只能存儲(chǔ)字符串，需要人工轉(zhuǎn)為json對(duì)象

Storage只能一次性清空，不能單個(gè)清空（api下）

/**
 * Storage封裝
 */
const  STORAGE_KEY = 'mall'; //設(shè)置一個(gè)獨(dú)一無(wú)二的key
export default{
  // 存儲(chǔ)值
  setItem(key,value,module_name){
    if (module_name){
      let val = this.getItem(module_name);
      val[key] = value;
      this.setItem(module_name, val);
    }else{
      let val = this.getStorage();
      val[key] = value;
      window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
    }
  },
  // 獲取某一個(gè)模塊下面的屬性u(píng)ser下面的userName
  getItem(key,module_name){
    if (module_name){
      let val = this.getItem(module_name);
      if(val) return val[key];
    }
    return this.getStorage()[key];
  },
  getStorage(){
    return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}');
  },
  clear(key, module_name){
    let val = this.getStorage();
    if (module_name){
      if (!val[module_name])return;
      delete val[module_name][key];
    }else{
      delete val[key];
    }
    window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
  }
}

最新評(píng)論