【SESSIONSTORAGE, LOCALSTORAGE, COOKIE】
小課堂【武漢第156期】
分享人：莊引
目錄
1.背景介紹
2.知識(shí)剖析
3.常見問題
4.解決方案
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
7.參考文獻(xiàn)
8.更多討論
1.背景介紹
SessionStorage, LocalStorage, Cookie這三者都可以被用來(lái)在瀏覽器端存儲(chǔ)數(shù)據(jù)，而且都是字符串類型的鍵值對(duì)！。 區(qū)別在于前兩者屬于WebStorage，創(chuàng)建它們的目的便于客戶端存儲(chǔ)數(shù)據(jù)。 而Cookie早在網(wǎng)景公司的瀏覽器中就開始支持，最初目的是為了保持HTTP的狀態(tài)。
2.知識(shí)剖析
COOKIE?
HTTP Cookie（也叫Web cookie或者瀏覽器Cookie）是服務(wù)器發(fā)送到用戶瀏覽器并保存在瀏覽器上的一塊數(shù)據(jù)，它會(huì)在瀏覽器下一次發(fā)起請(qǐng)求時(shí)被攜帶并發(fā)送到服務(wù)器上。比較經(jīng)典的，可以它用來(lái)確定兩次請(qǐng)求是否來(lái)自于同一個(gè)瀏覽器，從而能夠確認(rèn)和保持用戶的登錄狀態(tài)。Cookie的使用使得基于無(wú)狀態(tài)的HTTP協(xié)議上記錄穩(wěn)定的狀態(tài)信息成為了可能。
SESSIONSTORAGE
sessionStorage 屬性允許你訪問一個(gè) session Storage 對(duì)象。它與 localStorage 相似，不同之處在于 localStorage 里面存儲(chǔ)的數(shù)據(jù)沒有過期時(shí)間設(shè)置，而存儲(chǔ)在 sessionStorage 里面的數(shù)據(jù)在頁(yè)面會(huì)話結(jié)束時(shí)會(huì)被清除。頁(yè)面會(huì)話在瀏覽器打開期間一直保持，并且重新加載或恢復(fù)頁(yè)面仍會(huì)保持原來(lái)的頁(yè)面會(huì)話。在新標(biāo)簽或窗口打開一個(gè)頁(yè)面會(huì)初始化一個(gè)新的會(huì)話，這點(diǎn)和 session cookies 的運(yùn)行方式不同。
LOCALSTORAGE
localStorage 屬性允許你訪問一個(gè) local Storage 對(duì)象。localStorage 與 sessionStorage 相似。不同之處在于，存儲(chǔ)在 localStorage 里面的數(shù)據(jù)沒有過期時(shí)間（expiration time），而存儲(chǔ)在 sessionStorage 里面的數(shù)據(jù)會(huì)在瀏覽器會(huì)話（browsing session）結(jié)束時(shí)被清除，即瀏覽器關(guān)閉時(shí)。
3.常見問題
COOKIE主要用在以下三個(gè)方面:
會(huì)話狀態(tài)管理（如用戶登錄狀態(tài)、購(gòu)物車）
個(gè)性化設(shè)置（如用戶自定義設(shè)置）
瀏覽器行為跟蹤（如跟蹤分析用戶行為）
問題：COOKIE是如何工作的？
Cookie可用于客戶端數(shù)據(jù)的存儲(chǔ)，在沒有其它存儲(chǔ)辦法時(shí)，使用這種方式是可行的，但隨著現(xiàn)在瀏覽器開始支持各種各樣的存儲(chǔ)方式而逐漸被廢棄。由于服務(wù)器指定Cookie以后瀏覽器的每次請(qǐng)求都會(huì)攜帶Cookie數(shù)據(jù)，這會(huì)帶來(lái)額外的性能負(fù)擔(dān)（尤其是在移動(dòng)環(huán)境下）。新的瀏覽器API已經(jīng)允許開發(fā)者直接在本地存儲(chǔ)數(shù)據(jù)，如可以使用Web storage API （本地存儲(chǔ)和會(huì)話存儲(chǔ)）和IndexedDB。
COOKIE的缺陷
每個(gè) HTTP 請(qǐng)求中都包含 Cookies，從而導(dǎo)致傳輸相同的數(shù)據(jù)減緩我們的 Web 應(yīng)用程序。
每個(gè) HTTP 請(qǐng)求中都包含 Cookies，從而導(dǎo)致發(fā)送未加密的數(shù)據(jù)到互聯(lián)網(wǎng)上。（除非用HTTPS）
Cookies 只能存儲(chǔ)有限的 4KB 數(shù)據(jù)，對(duì)于復(fù)雜的存儲(chǔ)需求來(lái)說(shuō)是不夠用的。
STORAGE的使用
LocalStorage/SessionStorage也是基于字符串的鍵值對(duì)存儲(chǔ)?？梢酝ㄟ^setItem，getItem,clear,removeIteml來(lái)存取控制數(shù)據(jù)：
LOCALSTORAGE和SESSIONSTORAGE?
html5中的Web Storage包括了兩種存儲(chǔ)方式：sessionStorage和localStorage。 不會(huì)被發(fā)送到服務(wù)器上。同時(shí)空間比Cookie大很多，一般支持5-10M。 與Cookie類似，每個(gè)域名下會(huì)有不同的localStorage和SessionStorage實(shí)例。
sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問并且當(dāng)會(huì)話結(jié)束后（關(guān)閉標(biāo)簽頁(yè)，不包括刷新和跳轉(zhuǎn)）數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。
localStorage可以在多個(gè)標(biāo)簽頁(yè)中互相訪問用于持久化的本地存儲(chǔ)，可以在多個(gè)標(biāo)簽頁(yè)中互相訪問,除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。
注意SessionStorage中的Session指的是瀏覽器會(huì)話，而非服務(wù)器端通過Cookie實(shí)現(xiàn)的Session。
localStorage["a"]=1;
localStorage.b=2;
localStorage.setItem("c",3);//清除所有l(wèi)ocalStorage.clear();
//存儲(chǔ)
localStorage.setItem('key','value');
//取值
localStorage.getItem('key');// => 'value'
//清除單個(gè)存儲(chǔ)
localStorage.removeItem('key');
因?yàn)樗荒艽鎯?chǔ)字符串，要存JSON只能序列化為字符串：
vartestObject={'one':1,'two':2,'three':3};
// Put the object into storage//返回與指定值相對(duì)應(yīng)的一個(gè)JSON字符串，
localStorage.setItem('testObject',JSON.stringify(testObject));
// Retrieve the object from storage
varretrievedObject=localStorage.getItem('testObject');
//將一個(gè)字符串解析為JSON
console.log('retrievedObject: ',JSON.parse(retrievedObject));
4.解決方案
LOCALSTORAGE
localStorage 屬性允許你訪問一個(gè) local Storage 對(duì)象。localStorage 與 sessionStorage 相似。不同之處在于，存儲(chǔ)在 localStorage 里面的數(shù)據(jù)沒有過期時(shí)間（expiration time），而存儲(chǔ)在 sessionStorage 里面的數(shù)據(jù)會(huì)在瀏覽器會(huì)話（browsing session）結(jié)束時(shí)被清除，即瀏覽器關(guān)閉時(shí)。
localStorage["a"]=1;
localStorage.b=2;
localStorage.setItem("c",3);
//清除所有
localStorage.clear();
//存儲(chǔ)
localStorage.setItem('key', 'value');
//取值
localStorage.getItem('key'); ? ? // => 'value'
//清除單個(gè)存儲(chǔ)
localStorage.removeItem('key');
因?yàn)樗荒艽鎯?chǔ)字符串，要存JSON只能序列化為字符串：
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage//返回與指定值相對(duì)應(yīng)的一個(gè)JSON字符串，
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
//將一個(gè)字符串解析為JSON
console.log('retrievedObject: ', JSON.parse(retrievedObject));
4.解決方案
具體來(lái)說(shuō)cookie機(jī)制采用的是在客戶端保持狀態(tài)的方案，而session機(jī)制采用的是在服務(wù)器端保持狀態(tài)的方案。 cookie機(jī)制。正統(tǒng)的cookie分發(fā)是通過擴(kuò)展HTTP協(xié)議來(lái)實(shí)現(xiàn)的，服務(wù)器通過在HTTP的響應(yīng)頭中加上一行特殊的指示以提示 瀏覽器按照指示生成相應(yīng)的cookie。然而純粹的客戶端腳本如JavaScript或者VBScript也可以生成cookie。而cookie的使用 是由瀏覽器按照一定的原則在后臺(tái)自動(dòng)發(fā)送給服務(wù)器的。瀏覽器檢查所有存儲(chǔ)的cookie，如果某個(gè)cookie所聲明的作用范圍 大于等于將要請(qǐng)求的資源所在的位置，則把該cookie附在請(qǐng)求資源的HTTP請(qǐng)求頭上發(fā)送給服務(wù)器。 Web應(yīng)用程序中還經(jīng)常使用Session來(lái)記錄客戶端狀態(tài)。Session是服務(wù)器端使用的一種記錄客戶端狀態(tài)的機(jī)制，使用上比Cookie簡(jiǎn)單一些，相應(yīng)的也增加了服務(wù)器的存儲(chǔ)壓力。 localStorage 方法存儲(chǔ)的數(shù)據(jù)沒有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
具體來(lái)說(shuō)cookie機(jī)制采用的是在客戶端保持狀態(tài)的方案，而session機(jī)制采用的是在服務(wù)器端保持狀態(tài)的方案。 cookie機(jī)制。正統(tǒng)的cookie分發(fā)是通過擴(kuò)展HTTP協(xié)議來(lái)實(shí)現(xiàn)的，服務(wù)器通過在HTTP的響應(yīng)頭中加上一行特殊的指示以提示 瀏覽器按照指示生成相應(yīng)的cookie。然而純粹的客戶端腳本如JavaScript或者VBScript也可以生成cookie。而cookie的使用 是由瀏覽器按照一定的原則在后臺(tái)自動(dòng)發(fā)送給服務(wù)器的。瀏覽器檢查所有存儲(chǔ)的cookie，如果某個(gè)cookie所聲明的作用范圍 大于等于將要請(qǐng)求的資源所在的位置，則把該cookie附在請(qǐng)求資源的HTTP請(qǐng)求頭上發(fā)送給服務(wù)器。 Web應(yīng)用程序中還經(jīng)常使用Session來(lái)記錄客戶端狀態(tài)。Session是服務(wù)器端使用的一種記錄客戶端狀態(tài)的機(jī)制，使用上比Cookie簡(jiǎn)單一些，相應(yīng)的也增加了服務(wù)器的存儲(chǔ)壓力。 localStorage 方法存儲(chǔ)的數(shù)據(jù)沒有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。
HTML5本地存儲(chǔ)：SessionStorage, LocalStorage, Cookie
Window.sessionStorage - Web API 接口 | MDN
Window.localStorage - Web API 接口 | MDN
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
在客戶端存儲(chǔ)數(shù)據(jù),COOKIE和WEBSTORAGE哪種存儲(chǔ)更加安全？
HTML5 引入了兩種機(jī)制，類似于 HTTP 的會(huì)話 cookies，用于在客戶端存儲(chǔ)結(jié)構(gòu)化數(shù)據(jù)以及克服以下缺點(diǎn)。 這兩種存儲(chǔ)方式是 session storage 和 local storage，它們將用于處理不同的情況。 幾乎所有最新版的瀏覽器都支持 HTML5 存儲(chǔ)，包括 IE 瀏覽器。
HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法： localStorage - 沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ) sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ) 之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲(chǔ)，因?yàn)樗鼈冇擅總€(gè)對(duì)服務(wù)器的請(qǐng)求來(lái)傳遞，這使得 cookie 速度很慢而且效率也不高。 在 HTML5 中，數(shù)據(jù)不是由每個(gè)服務(wù)器請(qǐng)求傳遞的，而是只有在請(qǐng)求時(shí)使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲(chǔ)大量數(shù)據(jù)成為可能。 對(duì)于不同的網(wǎng)站，數(shù)據(jù)存儲(chǔ)于不同的區(qū)域，并且一個(gè)網(wǎng)站只能訪問其自身的數(shù)據(jù)。 HTML5 使用 JavaScript 來(lái)存儲(chǔ)和訪問數(shù)據(jù)。
7.參考文獻(xiàn)
HTML5本地存儲(chǔ)：SessionStorage, LocalStorage, Cookie
Window.sessionStorage - Web API 接口 | MDN
Window.localStorage - Web API 接口 | MDN
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
在客戶端存儲(chǔ)數(shù)據(jù),COOKIE和WEBSTORAGE哪種存儲(chǔ)更加安全？
HTML5 引入了兩種機(jī)制，類似于 HTTP 的會(huì)話 cookies，用于在客戶端存儲(chǔ)結(jié)構(gòu)化數(shù)據(jù)以及克服以下缺點(diǎn)。 這兩種存儲(chǔ)方式是 session storage 和 local storage，它們將用于處理不同的情況。 幾乎所有最新版的瀏覽器都支持 HTML5 存儲(chǔ)，包括 IE 瀏覽器。
HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法： localStorage - 沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ) sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ) 之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲(chǔ)，因?yàn)樗鼈冇擅總€(gè)對(duì)服務(wù)器的請(qǐng)求來(lái)傳遞，這使得 cookie 速度很慢而且效率也不高。 在 HTML5 中，數(shù)據(jù)不是由每個(gè)服務(wù)器請(qǐng)求傳遞的，而是只有在請(qǐng)求時(shí)使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲(chǔ)大量數(shù)據(jù)成為可能。 對(duì)于不同的網(wǎng)站，數(shù)據(jù)存儲(chǔ)于不同的區(qū)域，并且一個(gè)網(wǎng)站只能訪問其自身的數(shù)據(jù)。 HTML5 使用 JavaScript 來(lái)存儲(chǔ)和訪問數(shù)據(jù)。
7.參考文獻(xiàn)
HTML5本地存儲(chǔ)：SessionStorage, LocalStorage, Cookie
Window.sessionStorage - Web API 接口 | MDN
Window.localStorage - Web API 接口 | MDN
8.更多討論
感謝觀看
編輯:莊引
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開始，找個(gè)師兄，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷?！薄?/b>
這里是技能樹.IT修真院，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長(zhǎng)可見化，師兄1對(duì)1免費(fèi)指導(dǎo)?？靵?lái)與我一起學(xué)習(xí)吧 ！http://www.jnshu.com/login/1/86157900
