本地存儲(chǔ)
數(shù)據(jù)在客戶端（瀏覽器）保存的方案
cookie
客戶端存儲(chǔ)數(shù)據(jù)的一種方式脂矫，該數(shù)據(jù)會(huì)隨著請(qǐng)求一起發(fā)送給服務(wù)端
? 是按照域和path來分別進(jìn)行存儲(chǔ)的，當(dāng)前域和當(dāng)前路徑只能操作當(dāng)前域/路徑或其子域/子路徑下的cookie,
一個(gè)域下可以設(shè)置多個(gè)cookie，每個(gè)cookie可以包含：key,value,expires/max-age,path,domain等屬性,
一個(gè)域下的cookie個(gè)數(shù)是有限制的，不同瀏覽器不同版本限制的個(gè)數(shù)不一樣，大概幾十個(gè),
一個(gè)cookie中保存的內(nèi)容也是有大小限制的犀忱，不同瀏覽器不同版本限制的大小不一樣，大概4000-8000個(gè)字符之間.
我們可以通過頭信息來傳輸cookie數(shù)據(jù)
? 請(qǐng)求：瀏覽器發(fā)送一個(gè)請(qǐng)求的時(shí)候扶关，會(huì)主動(dòng)的把和該請(qǐng)求同源下cookie通過請(qǐng)求頭一起發(fā)送給服務(wù)端
? 響應(yīng)：服務(wù)器也可以通過響應(yīng)頭阴汇，把cookie數(shù)據(jù)發(fā)送給客戶端，如果客戶端是瀏覽器节槐，那么瀏覽器會(huì)主動(dòng)的讀取到響應(yīng)頭中的cookie數(shù)據(jù)搀庶，并保存在瀏覽器本地
我們還可以通過js來操作cookie數(shù)據(jù)，需要注意的是铜异，如果cookie是httpOnly的話哥倔，那么這個(gè)cookie將不能被js操作，他只能用戶請(qǐng)求和響應(yīng)**
在document對(duì)象下有一個(gè)屬性：cookie揍庄，該屬性是可讀寫屬性
如果我們想通過js設(shè)置一個(gè)cookie咆蒿，那么就可以通過document.cookie來進(jìn)行設(shè)置,
document.cookie = 'value'
同一個(gè)源下可以存儲(chǔ)多個(gè)不同值的cookie，所以我們一般情況下會(huì)給每一個(gè)cookie起一個(gè)名字加以區(qū)分
document.cookie = "key = value"
cookie的選項(xiàng)
name: cookie名稱
value: cookie的值
-
domain：cookie所在的源（域）,這個(gè)選項(xiàng)的設(shè)置需要注意一些問題，只能設(shè)置該域或該域的子域沃测，假設(shè)該腳本在baidu.com下的某個(gè)頁(yè)面中執(zhí)行缭黔，那么domain只能設(shè)置如下：domain=baidu.com或者domain=vip.baidu.com或者a.b.baidu.com,在讀取的時(shí)候，只能獲取到腳本所在域和其子域下的例如
baike.baidu.com/a.html在這個(gè)頁(yè)面中我們通過去獲取cookie蒂破，只能獲取到baike.baidu.com以及他的子域下的cookie
path：路徑试浙，該選項(xiàng)和domain類似，也是用來設(shè)置某個(gè)cookie的存儲(chǔ)范圍寞蚌，但是他是使用path來設(shè)置，假設(shè)現(xiàn)在的域是baidu.com钠糊，那么如果path=/挟秤，就表示在baidu.com的所有路徑都可以訪問該cookie，如果path=/a抄伍，那么這個(gè)是baidu.com/a/ 下的頁(yè)面也能夠操作這個(gè)cookie艘刚，所以總的來說，cookie是按照域和路徑來分開存儲(chǔ)的
expires: 過期時(shí)間截珍，cookie默認(rèn)是臨時(shí)性存儲(chǔ)的攀甚，他的默認(rèn)存儲(chǔ)時(shí)間是：會(huì)話結(jié)束，關(guān)閉瀏覽器岗喉，自動(dòng)清除expires時(shí)間為session的cookie秋度，我們可以通過expires來設(shè)置一個(gè)cookie的過期（到期）時(shí)間，他的值一個(gè)日期格式的字符串钱床，該方式并不推薦使用荚斯，推薦使用 max-age：生命周期時(shí)間，存儲(chǔ)的時(shí)間（保質(zhì)期）查牌，單位：秒
//expires
var d = new Date();
d.setDate(d.getDate()+10)
document.cookie = 'username=aaa;expires=' + d.toGMTString();
//10天后到期清除cookie
//max-age
document.cookie = 'username=bbb;max-age=120';
//120秒后清除
讀取
document.cookie返回的是一個(gè)字符串事期，key=value的形式，多個(gè)cookie使用一個(gè)分號(hào)加空格來連接
document.cookie = 'uesername=aaa';
document.cookie = 'age=18';
console.log(document.cookie);
//本地瀏覽器有限制纸颜，需要在服務(wù)器里運(yùn)行才能查看
刪除
document.cookie = 'age=28;max-age=-1';
把生存時(shí)間變?yōu)?或者-1
storage
storage是H5新增的一個(gè)客戶端數(shù)據(jù)存儲(chǔ)方案兽泣，為了解決cookie會(huì)自動(dòng)傳輸?shù)膯栴}，storage分為兩種：localStorage / sessionStorage
localStorage && sessionStorage 基本使用相同胁孙，適用同源策略
在window對(duì)象下有l(wèi)ocalStorage 唠倦，sessionStorage 其中兩個(gè)子對(duì)象，它們提供了
setItem(key,value)
將對(duì)應(yīng)的鍵值對(duì)存入到指定的Storage(localStorage或者sessionStorage)浊洞。如果已經(jīng)存在相同的key牵敷，則value會(huì)覆蓋原來的值
getItem(key)
拿到給定的key返回對(duì)應(yīng)的值的一種方式。
localStorage.setItem('name', 'motao'); //設(shè)置
localStorage.getItem('name') //獲取
removeItem(key)
移除key對(duì)應(yīng)的鍵值對(duì)法希。如果沒有key枷餐，則不執(zhí)行任何操作。
clear()
當(dāng)你不需要緩存或者需要將所有的緩存鍵值對(duì)重新設(shè)置時(shí)苫亦，調(diào)用對(duì)用的Storage對(duì)象毛肋。如：localStorage.clear()可以清楚本地緩存中的所有鍵值對(duì)兒怨咪。如果Storage對(duì)象本來就是空的，那么他不執(zhí)行任何操作润匙。
localStorage && sessionStorage區(qū)別
localStorage：永久保存（除了主動(dòng)刪除）诗眨；同源下的所有頁(yè)面都可以共享該數(shù)據(jù)；支持一個(gè)事件：storage孕讳，他是一個(gè)廣播類型事件
sessionStorage:會(huì)話結(jié)束自動(dòng)刪除;只有當(dāng)前頁(yè)面才可以使用該數(shù)據(jù)
storage事件
當(dāng)同源頁(yè)面的某個(gè)頁(yè)面修改了
localStorage,其余的同源頁(yè)面只要注冊(cè)了storage事件匠楚，就會(huì)觸發(fā)
假如我們有a,b 兩個(gè)界面，
網(wǎng)頁(yè)A：監(jiān)聽了storage事件：
<!DOCTYPE html>
<html>
<head lang="en">
<title>A</title>
</head>
<body>
<script>
window.addEventListener("storage", function (e) {
alert(e.newValue);
});
</script>
</body>
</html>
網(wǎng)頁(yè)B：修改了localStorage
<!DOCTYPE html>
<html>
<head lang="en">
<title>B</title>
</head>
<body>
<script>
localStorage.clear();
localStorage.setItem('foo', 'bar');
</script>
</body>
</html>
運(yùn)行 ： 將上面兩個(gè)網(wǎng)頁(yè)保存厂财，放到同一個(gè)服務(wù)器上芋簿，然后，先打開A.html璃饱，再打開B.html与斤。就會(huì)看到A.html會(huì)彈出提示框。注意兩個(gè)網(wǎng)頁(yè)要同源荚恶。
這樣就可以用storage做出不用請(qǐng)求http就可以傳遞數(shù)據(jù)的項(xiàng)目撩穿，例如，購(gòu)物車谒撼，當(dāng)用戶打開一個(gè)新頁(yè)面進(jìn)行購(gòu)物車添加食寡，就可以直接傳遞到最開始打開的頁(yè)面里的購(gòu)物車數(shù)字增長(zhǎng)，
qq音樂的跨頁(yè)面嗤栓，添加歌曲到歌單冻河，就是用到了storage事件
