20190405-cookie與localstorage
-
cookie與localstorage
-
webstorage
-
webstorage
-
sessionstorage
為每一個(gè)給定的源（given origin）維持一個(gè)獨(dú)立的存儲(chǔ)區(qū)域，該存儲(chǔ)區(qū)域在頁(yè)面會(huì)話期間可用（即只要瀏覽器處于打開(kāi)狀態(tài)草姻，包括頁(yè)面重新加載和恢復(fù)）蚪战。
臨時(shí)存儲(chǔ) 當(dāng)瀏覽器關(guān)閉的時(shí)候就自動(dòng)清空(頁(yè)面結(jié)束)
只有同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)這些數(shù)據(jù)
-
特點(diǎn)
- 同源策略限制瑞筐。若想在不同頁(yè)面之間對(duì)同一個(gè)sessionStorage進(jìn)行操作趋艘，這些頁(yè)面必須在同一協(xié)議钓辆、同一主機(jī)名和同一端口下你弦。(IE 8和9存儲(chǔ)數(shù)據(jù)僅基于同一主機(jī)名棵磷，忽略協(xié)議（HTTP和HTTPS）和端口號(hào)的要求)
- 單標(biāo)簽頁(yè)限制。sessionStorage操作限制在單個(gè)標(biāo)簽頁(yè)中玄渗，在此標(biāo)簽頁(yè)進(jìn)行同源頁(yè)面訪問(wèn)都可以共享sessionStorage數(shù)據(jù)座菠。
- 只在本地存儲(chǔ)狸眼。seesionStorage的數(shù)據(jù)不會(huì)跟隨HTTP請(qǐng)求一起發(fā)送到服務(wù)器藤树，只會(huì)在本地生效，并在關(guān)閉標(biāo)簽頁(yè)后清除數(shù)據(jù)拓萌。(若使用Chrome的恢復(fù)標(biāo)簽頁(yè)功能岁钓，seesionStorage的數(shù)據(jù)也會(huì)恢復(fù))。
- 存儲(chǔ)方式微王。seesionStorage的存儲(chǔ)方式采用key屡限、value的方式。value的值必須為字符串類型(傳入非字符串炕倘，也會(huì)在存儲(chǔ)時(shí)轉(zhuǎn)換為字符串钧大。true值會(huì)轉(zhuǎn)換為"true")。
- 存儲(chǔ)上限限制：不同的瀏覽器存儲(chǔ)的上限也不一樣罩旋，但大多數(shù)瀏覽器把上限限制在5MB以下啊央。
-
業(yè)務(wù)場(chǎng)景
- sessionStorage 非常適合SPA(單頁(yè)應(yīng)用程序)，可以方便在各業(yè)務(wù)模塊進(jìn)行傳值涨醋。
-
loacalstoage
在瀏覽器關(guān)閉瓜饥，然后重新打開(kāi)后數(shù)據(jù)仍然存在。
-
可以設(shè)置失效時(shí)間
function set(key,value){ var curTime = new Date().getTime(); localStorage.setItem(key,JSON.stringify({data:value,time:curTime})); } function get(key,exp){ var data = localStorage.getItem(key); var dataObj = JSON.parse(data); if (new Date().getTime() - dataObj.time>exp) { console.log('信息已過(guò)期'); //alert("信息已過(guò)期") }else{ //console.log("data="+dataObj.data); //console.log(JSON.parse(dataObj.data)); var dataObjDatatoJson = JSON.parse(dataObj.data) return dataObjDatatoJson; } }
function getLocalStorage(key) { var exp = 60 * 60 * 24; // 一天的秒數(shù) if(localStorage.getItem(key)) { var vals = localStorage.getItem(key); // 獲取本地存儲(chǔ)的值 var dataObj = JSON.parse(vals); // 將字符串轉(zhuǎn)換成JSON對(duì)象 // 如果(當(dāng)前時(shí)間 - 存儲(chǔ)的元素在創(chuàng)建時(shí)候設(shè)置的時(shí)間) > 過(guò)期時(shí)間 var isTimed = (new Date().getTime() - dataObj.timer) > exp; if(isTimed) { console.log("存儲(chǔ)已過(guò)期"); localStorage.removeItem(key); return null; } else { var newValue = dataObj.val; } return newValue; } else { return null; } }
永久存儲(chǔ) 只要不清空瀏覽器記錄和手動(dòng)刪除存儲(chǔ)記錄 存儲(chǔ)是一只存在的
任何窗口的任何頁(yè)面都可以訪問(wèn)這些數(shù)據(jù),但遵循同源策略,不同網(wǎng)站是不能共用的
-
-
}
-
存儲(chǔ)的是json字符串,只能是字符串
-
setItem
-
用JSOn.stringify()
- window.localStorage.setItem( 'PersonInfo', JSON.stringify( storage ) )
-
-
getitem
-
用JSON.parse
- JSON.parse( window.localStorage.getItem( 'PersonInfo' ))
-
改變localstorage的值就是重新寫(xiě)入
-
removeItem (key)
- 刪除指定 key 的本地存儲(chǔ)值
-
clear()
- 刪除本地存儲(chǔ)的全部數(shù)據(jù)
-
storage.key(i)
- 使用key()方法,向其去除索引對(duì)應(yīng)的鍵
-
valueOf
- localStorage.valueOf() //讀取存儲(chǔ)在localStorage上的所有數(shù)據(jù)
-
.hasOwnProperty
- localStorage.hasOwnProperty('name') // true
-
toLocaleString
- localStorage.arr.toLocaleString(); // "aa,bb,cc"
-
length
- .length ：返回一個(gè)整數(shù)浴骂，表示存儲(chǔ)在 sessionStorage 對(duì)象中的數(shù)據(jù)項(xiàng)(鍵值對(duì))數(shù)量乓土。
.key(int index) ：返回當(dāng)前 sessionStorage 對(duì)象的第index序號(hào)的key名稱。若沒(méi)有返回null。
-
存儲(chǔ)位置：localStorage和sessionStorage都保存在客戶端趣苏，不與服務(wù)器進(jìn)行交互通信狡相。
應(yīng)用場(chǎng)景：localStoragese：常用于長(zhǎng)期登錄（+判斷用戶是否已登錄），適合長(zhǎng)期保存在本地的數(shù)據(jù)拦键。sessionStorage：敏感賬號(hào)一次性登錄谣光；
-
存儲(chǔ)空間大,默認(rèn)5Mb
存儲(chǔ)在客戶端,可以直接獲取
直接在windows上調(diào)用
localStorage會(huì)可以將第一次請(qǐng)求的數(shù)據(jù)直接存儲(chǔ)到本地,相當(dāng)于一個(gè)更優(yōu)良的帶寬
數(shù)據(jù)存儲(chǔ)在客戶端，可以直接獲取芬为，不會(huì)發(fā)送到服務(wù)器萄金，既節(jié)省網(wǎng)絡(luò)資源，又安全可靠媚朦；
提供了操作數(shù)據(jù)的API氧敢，開(kāi)發(fā)人員只需調(diào)用接口即可操作數(shù)據(jù)，簡(jiǎn)單易用询张。
url傳參也有長(zhǎng)度限制
1 緩存數(shù)據(jù)
2 減少對(duì)內(nèi)存的占用
-
storage 事件
用來(lái)監(jiān)控storage的改變
孙乖，同一個(gè)頁(yè)面發(fā)生的改變不會(huì)觸發(fā)，只會(huì)監(jiān)聽(tīng)同一域名下其他頁(yè)面改變 Storage
隱私模式下,localstorga沒(méi)用了
-
劣勢(shì)
只能是string對(duì)象,所以每次都需要轉(zhuǎn)化對(duì)象
localStorage在瀏覽器的隱私模式下面是不可讀取的
本質(zhì)上是存取字符串份氧，存儲(chǔ)內(nèi)容太多消耗空間唯袄，頁(yè)面變卡。
對(duì)字符串的讀取,消耗內(nèi)存
localstorage本質(zhì)是在讀寫(xiě)文件蜗帜，數(shù)據(jù)多的話會(huì)比較卡（firefox會(huì)一次性將數(shù)據(jù)導(dǎo)入內(nèi)存恋拷，想想就覺(jué)得嚇人啊）
無(wú)法北爬蟲(chóng)抓取到
-
需求
緩存一般信息厅缺，如搜索頁(yè)的出發(fā)城市蔬顾，達(dá)到城市，非實(shí)時(shí)定位信息
② 緩存城市列表數(shù)據(jù)湘捎，這個(gè)數(shù)據(jù)往往比較大
③ 每條緩存信息需要可追蹤诀豁，比如服務(wù)器通知城市數(shù)據(jù)更新，這個(gè)時(shí)候在最近一次訪問(wèn)的時(shí)候要自動(dòng)設(shè)置過(guò)期
④ 每條信息具有過(guò)期日期狀態(tài)窥妇，在過(guò)期外時(shí)間需要由服務(wù)器拉取數(shù)據(jù)
-
優(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)說(shuō)比較高一些，不會(huì)擔(dān)心截獲歪赢，但是仍然存在偽造問(wè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
- image.png
-
-
-
* localstorage與sessionsytorage
* localstorage
* 可以保存數(shù)據(jù)到本地
* 生命周期
* localStorage的生命周期是永久的，關(guān)閉頁(yè)面或?yàn)g覽器之后localStorage中的數(shù)據(jù)也不會(huì)消失
* 除非主動(dòng)刪除數(shù)據(jù)条摸，否則數(shù)據(jù)永遠(yuǎn)不會(huì)消失
* 存儲(chǔ)大小
* 5MB
* 保存位置
* 都保存在客戶端悦污，不與服務(wù)器進(jìn)行交互通信
* 存儲(chǔ)內(nèi)容對(duì)象
* 只能存儲(chǔ)字符串類型，對(duì)于復(fù)雜的對(duì)象可以使用ECMAScript提供的JSON對(duì)象的stringify和parse來(lái)處理
* 獲取方式
* window.localStorage
* getitems
* 應(yīng)用場(chǎng)景
* 適合長(zhǎng)期保存在本地的數(shù)據(jù)
* sessionsytorage
* 生命周期
* 僅在當(dāng)前會(huì)話下有效
* 同源的窗口中始終存在的數(shù)據(jù)钉蒲。只要這個(gè)瀏覽器窗口沒(méi)有關(guān)閉切端，即使刷新頁(yè)面或者進(jìn)入同源另一個(gè)頁(yè)面，數(shù)據(jù)依然存在
* 存儲(chǔ)大小
* 5MB
* 保存位置
* 都保存在客戶端子巾，不與服務(wù)器進(jìn)行交互通信
* 存儲(chǔ)內(nèi)容對(duì)象
* 只能存儲(chǔ)字符串類型帆赢，對(duì)于復(fù)雜的對(duì)象可以使用ECMAScript提供的JSON對(duì)象的stringify和parse來(lái)處理
* 獲取方式
* window.sessionStorage
* 應(yīng)用場(chǎng)景
* 敏感賬號(hào)一次性登錄
* 優(yōu)點(diǎn)
* 存儲(chǔ)空間更大
* 節(jié)省網(wǎng)絡(luò)流量
* 快速顯示,不需要經(jīng)過(guò)服務(wù)器
* 安全性更高,不需要擔(dān)心被截取
* 操縱方法
* 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
* 缺點(diǎn)
* cookie的大小是受限制的烤咧，一個(gè)cookie只能設(shè)置4KB的數(shù)據(jù)。并且大多數(shù)瀏覽器只允許每個(gè)站點(diǎn)存儲(chǔ)20個(gè)Cookie抢呆；
* cookie保存的數(shù)據(jù)煮嫌，無(wú)論服務(wù)器端是否需要，每次請(qǐng)求都會(huì)被發(fā)送到服務(wù)器端抱虐，白白耗費(fèi)網(wǎng)絡(luò)資源昌阿。并且，數(shù)據(jù)一般是非加密傳輸，存在安全隱患懦冰；
* cookie缺少操作數(shù)據(jù)的API灶轰，需要開(kāi)發(fā)者自己封裝接口，使用起來(lái)極不方便刷钢。
* cookie大小限制在4k左右笋颤，不適合存業(yè)務(wù)數(shù)據(jù)
* cookie每次隨HTTP事務(wù)一起發(fā)送，浪費(fèi)帶寬
* Cookie從你設(shè)置的時(shí)候内地，就會(huì)給個(gè)時(shí)間伴澄，不設(shè)置默認(rèn)會(huì)話結(jié)束就過(guò)期；
* Cookie 的本職工作并非本地存儲(chǔ)阱缓，而是“維持狀態(tài)”秉版。因?yàn)镠TTP協(xié)議是無(wú)狀態(tài)的，HTTP協(xié)議自身不對(duì)請(qǐng)求和響應(yīng)之間的通信狀態(tài)進(jìn)行保存
* 操作cookie
* 1茬祷、引入jquery.cookie.js
* <script type="text/javascript" src="js/jquery.min.js"></script>
* <script type="text/javascript" src="js/jquery.cookie.js"></script>
* 2清焕、設(shè)置 "會(huì)話"cookie
* $.cookie('username', 'xy');
* cookie有效期默認(rèn)到用戶關(guān)閉瀏覽器
* 3、設(shè)置有效時(shí)間
* $.cookie('username', 'xy', { expires: 7 });
* 4祭犯、設(shè)置有效路徑
* $.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });// 如果在整個(gè)網(wǎng)站中訪問(wèn)這個(gè)cookie需要這樣設(shè)置有效路徑：path: '/'
* 5秸妥、讀取cookie
* $.cookie('username')
* 注：cookie是基于域名來(lái)儲(chǔ)存的。意思您要放到測(cè)試服務(wù)器上或者本地localhost服務(wù)器上才會(huì)生效沃粗。cookie具有不同域名下儲(chǔ)存不可共享的特性粥惧。單純的本地一個(gè)html頁(yè)面打開(kāi)是無(wú)效的。
* 6最盅、刪除cookie
* $.cookie('username', null); //通過(guò)傳遞null作為cookie的值即可
* 7突雪、可選參數(shù)
* domain:'[jquery.com](http://jquery.com/)', // （String）創(chuàng)建該Cookie的頁(yè)面域名；
* secure:true // （Booblean）如果設(shè)為true涡贱，那么此Cookie的傳輸會(huì)要求一個(gè)安全協(xié)議咏删，例如：HTTPS；
* })
* $.cookie('the_cookie','the_value',{
* expires:7, //（Number|Date）有效期问词；設(shè)置一個(gè)整數(shù)時(shí)督函，單位是天；也可以設(shè)置一個(gè)日期對(duì)象作為Cookie的過(guò)期日期激挪；
* path:'/', // （String）創(chuàng)建該Cookie的頁(yè)面路徑辰狡；
* 保存在服務(wù)器端
* 機(jī)制
* 如果不在瀏覽器中設(shè)置過(guò)期時(shí)間，cookie被保存在內(nèi)存中垄分，生命周期隨瀏覽器的關(guān)閉而結(jié)束宛篇，這種cookie簡(jiǎn)稱會(huì)話cookie。如果在瀏覽器中設(shè)置了cookie的過(guò)期時(shí)間薄湿，cookie被保存在硬盤中叫倍，關(guān)閉瀏覽器后豌鸡，cookie數(shù)據(jù)仍然存在，直到過(guò)期時(shí)間結(jié)束才消失段标。
* Cookie是服務(wù)器發(fā)給客戶端的特殊信息涯冠，cookie是以文本的方式保存在客戶端，每次請(qǐng)求時(shí)都帶上它
* cookie只能保存字符串類型逼庞，以文本的方式
* 應(yīng)用場(chǎng)景
* ）判斷用戶是否登陸過(guò)網(wǎng)站蛇更，以便下次登錄時(shí)能夠?qū)崿F(xiàn)自動(dòng)登錄（或者記住密碼）。如果我們刪除cookie赛糟，則每次登錄必須從新填寫(xiě)登錄的相關(guān)信息派任。
* （2）保存上次登錄的時(shí)間等信息。
* （3）保存上次查看的頁(yè)面
* （4）瀏覽計(jì)數(shù)
* * 
* seesion
* cookie和session都是用來(lái)跟蹤瀏覽器用戶身份的會(huì)話方式璧南。
* 保存在瀏覽器端
* 當(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)求中沒(méi)有sessionid，服務(wù)器會(huì)創(chuàng)建新的session對(duì)象动知，并把sessionid在本次響應(yīng)中返回給客戶端皿伺。通常使用cookie方式存儲(chǔ)sessionid到客戶端，在交互中瀏覽器按照規(guī)則將sessionid發(fā)送給服務(wù)器盒粮。如果用戶禁用cookie鸵鸥，則要使用URL重寫(xiě)，可以通過(guò)response.encodeURL(url) 進(jìn)行實(shí)現(xiàn)丹皱；API對(duì)encodeURL的結(jié)束為妒穴，當(dāng)瀏覽器支持Cookie時(shí)，url不做任何處理摊崭；當(dāng)瀏覽器不支持Cookie的時(shí)候讼油，將會(huì)重寫(xiě)URL將SessionID拼接到訪問(wèn)地址后。
* seesion可以保存對(duì)象
* session的安全性大于cookie爽室。
* 1）sessionID存儲(chǔ)在cookie中汁讼，若要攻破session首先要攻破cookie淆攻；
* （2）sessionID是要有人登錄阔墩，或者啟動(dòng)session_start才會(huì)有，所以攻破cookie也不一定能得到sessionID瓶珊；
* （3）第二次啟動(dòng)session_start后啸箫，前一次的sessionID就是失效了，session過(guò)期后伞芹，sessionID也隨之失效忘苛。
* （4）sessionID是加密的
* （5）綜上所述蝉娜，攻擊者必須在短時(shí)間內(nèi)攻破加密的sessionID，這很難扎唾。
