【cookie】
平時(shí)我們經(jīng)常在頁面中使用一些能存儲(chǔ)數(shù)據(jù)的方法因俐，比如記錄頁面上次打開的位置化借，選項(xiàng)點(diǎn)擊的位置，經(jīng)常輸入的記錄帜乞，等等等司抱。很多用到。但是目前用的少因?yàn)镠5有新的方法黎烈，我下一篇會(huì)講习柠，不要著急~
注：必須在服務(wù)器環(huán)境下
服務(wù)器
提供計(jì)算機(jī)服務(wù)的設(shè)備，電腦
1照棋、響應(yīng)瀏覽器的請(qǐng)求
2资溃、存東西
cookie干什么：
可以臨時(shí)在瀏覽中中儲(chǔ)存一些東西
特點(diǎn)
1、必須放在服務(wù)器環(huán)境
2必怜、不安全（想看就看肉拓，想刪就刪）
3、cookie有生命周期,默認(rèn)關(guān)閉瀏覽器就消失
4梳庆、有大小4K左右（cookie比較珍貴）
cookie的條數(shù)300個(gè)（一個(gè)瀏覽器）
每個(gè)網(wǎng)站cookie的條數(shù)不能超過20個(gè)
怎么用它?
存暖途、寫:document.cookie='name=value; expires='時(shí)間期限'; path=路徑';
取、讀：document.cookie
在瀏覽器中怎么看膏执？
打開瀏覽器控制臺(tái)驻售，Application中的Storage中Cookie看即可。不同瀏覽器些許不同更米。
document.cookie=123; //直接這樣存
alert(document.cookie) //123
//或者是這樣 ：
document.cookie='password=123';
alert(document.cookie) //password=123
下面就開始直接進(jìn)入話題欺栗，不啰嗦。
但是 cookie是有到期時(shí)間的征峦，如果默認(rèn)不寫時(shí)間迟几，是一個(gè)會(huì)話就沒了，
expires cookie到期時(shí)間栏笆，可以隨便設(shè)置类腮，默認(rèn)是session。
session 會(huì)話（一段時(shí)間）：一個(gè)會(huì)話是指瀏覽打開到關(guān)閉蛉加。
var oDate=new Date();
oDate.setDate(oDate.getDate()+3);
document.cookie='password=123; expires='+oDate; //這樣時(shí)間就是三天后蚜枢，也可不用時(shí)間對(duì)象，直接寫针饥。
alert(document.cookie) //password=123
cookie是有路徑的厂抽，cookie默認(rèn)存在當(dāng)前文件路徑中。
路徑：
cookie默認(rèn)存在當(dāng)前文件路徑中
里層文件可以去到外層文件存的cookie丁眼，外層文件取不到里層文件存的cookie
但是一般我們一個(gè)項(xiàng)目就用一套cookie筷凤，所以我們都存在根目錄下：
var oDate=new Date();
oDate.setDate(oDate.getDate()+3);
document.cookie='password=123; expires='+oDate+'; path=/'; //注：/代表根目錄下
不啰嗦，太簡單户盯，那我們就先封裝一個(gè)cookie方便以后用：
//設(shè)置
function setCookie(sName,sValue,iDay){
if(iDay){ //有時(shí)候我們并不會(huì)存時(shí)間嵌施，所有要判斷一下
var oDate=new Date(); //先new一個(gè)時(shí)間對(duì)象饲化，
oDate.setDate(oDate.getDate()+iDay); //設(shè)置時(shí)間對(duì)象：我們要給cookie到期時(shí)間
document.cookie=sName+'='+sValue+'; expires='+oDate+'; path=/'; //開始存
}else{
document.cookie=sName+'='+sValue+'; path=/'; //如果不需要時(shí)間的話，這樣存
}
}
//獲取
function getCookie(sName){
var str=document.cookie; //cookie獲取下來是一串字符串吗伤，
var arr=str.split('; '); //然后我們切成數(shù)組
// arr -> password=123,n2=qq,abc=123
for(var i=0;i<arr.length;i++){ //循環(huán)數(shù)組吃靠，
//arr[i] -> password=123
var arr2=arr[i].split('='); //在把每一條切開成數(shù)組
//[password,123]
if(arr2[0]==sName){ //用我們要的那條cookie名字和每一條cookie的名字對(duì)比
return arr2[1] //如果一樣，就把值給返回出去足淆。
}
}
return '' //如果最后沒有我們也返回相同的數(shù)據(jù)格式巢块，空字符串
}
//刪除
function removeCookie(sName){
setCookie(sName,'',-1); //刪除就直接把那條cookie時(shí)間設(shè)置成-1就行
}
比如我就來寫一個(gè)Cookie使用的例子吧：
那就拿最常用的效果選項(xiàng)卡來說吧
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>李鵬-前端開發(fā)-兩年經(jīng)驗(yàn)-13522974525</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 100px;
height: 100px;
background: red;
display: none;
}
div.on{
display: block;
}
input.on{
background: blue;
}
</style>
<script src="cookie.js"></script>
<script>
window.onload=function(){
var aInp=document.getElementsByTagName('input');
var aDiv=document.getElementsByTagName('div');
function tab(index){
var index=index || 0; //這個(gè)是為了下面，因?yàn)橄旅嬷苯诱{(diào)用了一下巧号，有時(shí)候沒有存cookie族奢，所有就讓沒存的情況下默認(rèn)為0.
for(var i=0;i<aInp.length;i++){
aInp[i].className='';
aDiv[i].className='';
}
aInp[index].className='on';
aDiv[index].className='on';
}
//設(shè)置cookie
tab(getCookie('index'));//頁面一打開調(diào)用一下，讓自動(dòng)停留在我們上次點(diǎn)擊的那個(gè)選項(xiàng)上丹鸿。
for(var i=0;i<aInp.length;i++){
(function(index){
aInp[i].onclick=function(){
tab(index);
setCookie('index',index,3); //開始存我們的cookie越走，記錄選項(xiàng)停留在哪個(gè)上面。
};
})(i);
}
};
</script>
</head>
<body>
<input type="button" value="aaa" class="on"/>
<input type="button" value="bbb"/>
<input type="button" value="ccc"/>
<div class="on">111</div>
<div>222</div>
<div>333</div>
</body>
</html>
以上結(jié)束靠欢。
