一蚕苇、概念介紹
cookie是在HTML4中使用的給客戶端保存數(shù)據(jù)的哩掺，也可以和session配合實(shí)現(xiàn)跟蹤瀏覽器用戶身份；而webstorage（包括：localStorage和sessionStorage）是在HTML5提出來(lái)的涩笤，純粹為了保存數(shù)據(jù)嚼吞，不會(huì)與服務(wù)器端通信。
WebStorage兩個(gè)主要目標(biāo)：
- 提供一種在cookie之外存儲(chǔ)會(huì)話數(shù)據(jù)的路徑
- 提供一種存儲(chǔ)大量可以跨會(huì)話存在的數(shù)據(jù)的機(jī)制
二蹬碧、cookie 的特點(diǎn)
- 只能使用文本文件
- 文件有大小限制4K左右
- 不可跨域
- 時(shí)效限制（默認(rèn)會(huì)話級(jí)舱禽，可指定)
- 每次都會(huì)隨著請(qǐng)求，發(fā)往服務(wù)器
- 完全兼容
三恩沽、localStorage 的特點(diǎn)
- 只能使用文本文件
- 文件有大小5M左右
- 不可跨域
- localStorage沒(méi)有過(guò)期時(shí)間誊稚；sessionStorage只能會(huì)話級(jí)
- 不會(huì)發(fā)往服務(wù)器
- 低版本瀏覽器不兼容
不安全、不能跨域罗心、不能跨瀏覽器,寫入的都是字符
四里伯、相同點(diǎn)
cookie，localStorage渤闷，sessionStorage都是在客戶端保存數(shù)據(jù)的俏脊，存儲(chǔ)數(shù)據(jù)的類型都是字符串，都不安全肤晓、不能跨域、不能跨瀏覽器认然。
五补憾、不同點(diǎn)：
1. 有效期：
- cookie如果不設(shè)置有效期，那么就是臨時(shí)存儲(chǔ)（存儲(chǔ)在內(nèi)存中）卷员，是會(huì)話級(jí)別的盈匾，會(huì)話結(jié)束后，cookie也就失效了毕骡，如果設(shè)置了有效期削饵，那么cookie存儲(chǔ)在硬盤里岩瘦，有效期到了，就自動(dòng)消失窿撬。
- 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è)瀏覽器窗口沒(méi)有關(guān)閉，即使刷新頁(yè)面或者進(jìn)入同源另一個(gè)頁(yè)面追城，數(shù)據(jù)依然存在刹碾。但是sessionStorage在關(guān)閉了瀏覽器窗口后就會(huì)被銷毀。同時(shí)獨(dú)立的打開同一個(gè)窗口同一個(gè)頁(yè)面座柱，sessionStorage也是不一樣的迷帜。
- 可以簡(jiǎn)單的理解為：sessionStorage就是沒(méi)有設(shè)置有效期的cookie。
- 如果說(shuō)把cookie的有效期設(shè)置為永久（當(dāng)然沒(méi)有永久的事件）辆布，那么就是localStorage瞬矩。
2. 網(wǎng)絡(luò)流量
cookie的數(shù)據(jù)每次都會(huì)發(fā)給服務(wù)器端，而localstorage和sessionStorage不會(huì)與服務(wù)器端通信锋玲，純粹為了保存數(shù)據(jù)景用，所以，storage更加節(jié)約網(wǎng)絡(luò)流量惭蹂。
3. 大小限制
cookie大小限制在4KB伞插，非常小盾碗；localstorage和sessionStorage在5M
4. 安全性
WebStorage不會(huì)隨著HTTP header發(fā)送到服務(wù)器端媚污，所以安全性相對(duì)于cookie來(lái)說(shuō)比較高一些，不會(huì)擔(dān)心截獲廷雅。
5. 便攜性
cookie只提供了一個(gè)屬性可供操作耗美；而storage提供了一系列的API，操作方便快捷
六航缀、語(yǔ)法
1. cookie
// 設(shè)置
let d = new Date();
d.setDate(d.getDate()+3);
document.cookie = `${key}=${value};expires=$u38nhjz;path=/;domain=localhost`;
// 獲取商架，只能獲取所有，需要配合字符串處理芥玉，才能拿到指定cookie
console.log(document.cookie)
// 刪除蛇摸，將有效期expires設(shè)置為過(guò)去的日期對(duì)象
let d = new Date();
d.setDate(d.getDate()-1);
document.cookie = `${key}=${value};expires=$hjpkvnb;path=/;domain=localhost`;
2. storage
localstorage和sessionStorage的操作API一致，此處以localstorage舉例
localstorage.setItem(key, value); // 保存數(shù)據(jù)灿巧，以鍵值對(duì)的方式儲(chǔ)存信息赶袄。
localstorage.getItem(key); // 獲取數(shù)據(jù)揽涮，將鍵值傳入，即可獲取到對(duì)應(yīng)的value值饿肺。
localstorage.removeItem(key); // 刪除單個(gè)數(shù)據(jù)蒋困，根據(jù)鍵值移除對(duì)應(yīng)的信息。
localstorage.clear(); // 刪除所有的數(shù)據(jù)唬格，不推薦使用
localstorage.key; // 獲取指定key的value
以上家破，如有紕漏或不同觀點(diǎn)，歡迎留言討論...
