一、Cookie
- 什么是Cookie
數(shù)據(jù)存儲(chǔ)到計(jì)算機(jī)中，通過瀏覽器控制添加與刪除數(shù)據(jù)
- Cookie特點(diǎn)
- 存儲(chǔ)限制: 一個(gè)域名Cookie數(shù)是有限的(根據(jù)瀏覽器而定)，每個(gè)4kb;
- Cookie會(huì)包含在每個(gè)HTTP請(qǐng)求中向服務(wù)器發(fā)送，這回導(dǎo)致多次發(fā)送重復(fù)數(shù)據(jù)；
- Cookie在網(wǎng)絡(luò)傳輸時(shí)并未加密，也可能會(huì)有安全隱患;
- 頁(yè)面間的Cookie是共享的;
二、Storage
使用Storage保存key-value時(shí)，key、value都只能是字符串(如果有復(fù)雜數(shù)據(jù)，可以將結(jié)構(gòu)化數(shù)據(jù)封裝成JSON，再將JSON對(duì)象轉(zhuǎn)為字符串保存)。
- sessionStorage
- session臨時(shí)會(huì)話，從頁(yè)面打開到頁(yè)面關(guān)閉的時(shí)間段；
- 窗口的臨時(shí)促成了，頁(yè)面關(guān)閉，本地存儲(chǔ)消失；
- localStorage
- 永久存儲(chǔ)(可以手動(dòng)刪除數(shù)據(jù))
- Storage的特點(diǎn)
- 存儲(chǔ)量限制(5M);
- 客戶端完成，不會(huì)請(qǐng)求服務(wù)器處理；
- sessionStorage數(shù)據(jù)是不共享、localStorage共享
三、Storage操作方法
- setItem()
- 設(shè)置數(shù)據(jù)，key/value類型，類型都是字符串；
- 可以用獲取屬性的形式操作；
window.sessionStorage.setItem('name', oText.value);
window.localStorage.setItem('name', oText.value);
- getItem()
- 獲取數(shù)據(jù)，通過key來獲取到對(duì)對(duì)應(yīng)的value；
window.sessionStorage.getItem('name')
window.localStorage.getItem('name')
- removeItem()
- 刪除數(shù)據(jù)，通過key來刪除對(duì)應(yīng)的value；
window.sessionStorage.removeItem('name');
window.localStorage.removeItem('name');
- clear()
- 刪除全部存儲(chǔ)的值;
window.sessionStorage.clear();
window.localStorage.clear();
案例: 存儲(chǔ)注冊(cè)信息(第一次沒填寫完關(guān)閉，當(dāng)?shù)诙未蜷_時(shí)，之前填寫的內(nèi)容還是存在的)
// 當(dāng)窗口關(guān)閉時(shí)觸發(fā)window.onunload = function(){}
四、Storage存儲(chǔ)事件
- storage事件
- 當(dāng)有數(shù)據(jù)修改或刪除的情況下，就會(huì)觸發(fā)storage事件
- 在對(duì)數(shù)據(jù)進(jìn)行改變的窗口對(duì)象是不會(huì)觸發(fā)的
- key: 修改或刪除的key，如果調(diào)用clear()，key為null
- newValue: 新設(shè)置的值，如果調(diào)用removeStorage()，key為null
- oldValue: 調(diào)用改變前的value值
- storageArea: 當(dāng)前的storage對(duì)象
- url: 觸發(fā)該腳本變化的文檔的url
- sessionStorage在同窗口下才可以，例如iframe操作就是同窗口的操作；
// 添加storage事件(本窗口不觸發(fā)，在其他窗口觸發(fā))
window.addEventListener('storage', function(ev){
ev = ev || window.event;
console.log('key:' + ev.key);
console.log('newValue:' + ev.newValue);
console.log('oldValue:' + ev.oldValue);
console.log('storageArea:' + ev.storageArea);
console.log('url:' + ev.url);
});
案例: 同步購(gòu)物車(不管哪個(gè)頁(yè)面操作了，但都是同步的)
離線緩存策略
1、localStorage, sessionStorage(字符串鍵值對(duì)在本地存儲(chǔ)數(shù)據(jù)，方便靈活，但是對(duì)于大量結(jié)構(gòu)化數(shù)據(jù)存儲(chǔ)力不從心)
2、indexedDB (瀏覽器中持久地存儲(chǔ)結(jié)構(gòu)化數(shù)據(jù)的數(shù)據(jù)庫(kù))
3、web sql(已經(jīng)被廢棄)
4、application cache (完全離線資源緩存，加載更快 降低服務(wù)器負(fù)載，單地址頁(yè)面對(duì)實(shí)時(shí)性要求不要的業(yè)務(wù) 離線web應(yīng)用)
之前會(huì)使用cookies，每次的http請(qǐng)求頭中，都會(huì)帶有cookies——缺點(diǎn)；每個(gè)域名只能存儲(chǔ)4K大小的cookies；主域名污染: 如果我們使用cookies存儲(chǔ)主域名的東西，那么子域名下得Http請(qǐng)求都會(huì)帶上主域名的東西；如果關(guān)聯(lián)上網(wǎng)絡(luò)，那么將帶來安全問題。
所以，通常我們會(huì)使用cookies用在如購(gòu)物車、身份驗(yàn)證等問題上。
