cookie
基本概念
- cookie非常小栓霜，限制在4kb左右，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。
- 如果沒有設(shè)置時(shí)間，則表示cookie的生命期為瀏覽器會話期間荣病，關(guān)閉瀏覽器窗口，cookie就會消失渗柿，這種被稱為會話cookie个盆，它會被保存在內(nèi)存中。
- 當(dāng)設(shè)置了過期時(shí)間做祝，瀏覽器會把cookie保存在硬盤中砾省，關(guān)閉瀏覽器之后任然有效，直到超過設(shè)定的過期時(shí)間混槐。
設(shè)置和獲取cookie的方法
原生
// 使用js創(chuàng)建cookie
document.cookie="username=John Doe";
// 添加一個(gè)過期時(shí)間
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
// 使用path 告訴瀏覽器cookie的路徑
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
//讀取
var x = document.cookie;
// 修改 舊的值將會被覆蓋
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
// 刪除 刪除 cookie 非常簡單。您只需要設(shè)置 expires 參數(shù)為以前的時(shí)間即可
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
封裝
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
localStorage和sessionStorage
優(yōu)勢
- 擴(kuò)展了cookie的4k限制轩性，為了更大的容量存儲而設(shè)計(jì)的声登，是在瀏覽器端存儲的數(shù)據(jù)
- 減少網(wǎng)絡(luò)流量，快速的讀取數(shù)據(jù)，性能較好悯嗓，可以作為臨時(shí)存儲
- localStorage是永久性存儲件舵，而sessionStorage屬于當(dāng)會話結(jié)束的時(shí)候，就會被清空
劣勢
- 本質(zhì)上是對字符串的讀取脯厨，內(nèi)容較多的時(shí)候 會消耗內(nèi)存铅祸，導(dǎo)致頁面變卡，
- 不能被爬蟲抓取到
三者的異同
| 特性名稱 | cookie | localStorage | sessionStorage |
|---|---|---|---|
| 數(shù)據(jù)的聲明周期 | 可設(shè)置失效時(shí)間合武，默認(rèn)是關(guān)閉瀏覽器后失效 | 除非被清除临梗，否則永久保存 | 僅僅在當(dāng)前會話下有效，關(guān)閉頁面或者瀏覽器后會被清除 |
| 存放的數(shù)據(jù)大小 | 4k左右 | 一般為5M | 一般為5M |
| 與服務(wù)端通信 | 會在http頭中攜帶稼跳，如果使用cookie保存過多數(shù)據(jù)會帶來性能問題 | 僅在瀏覽器端保存不參與服務(wù)器的通信 | 僅在瀏覽器端保存不參與服務(wù)器的通信 |
| 易用性 | 需要自己封裝 | 有現(xiàn)成的api接口可以使用 | 有現(xiàn)成的api接口可以使用 |
