一、cookie:
本地存儲(chǔ)仙逻,通俗的講就是把變量存在瀏覽器(保存頁(yè)面信息驰吓,用戶名,密碼)
特點(diǎn):同一個(gè)網(wǎng)頁(yè)cookie共享桨醋,cookie必須依賴于服務(wù)器環(huán)境
有過(guò)期時(shí)間
1.創(chuàng)建過(guò)期時(shí)間
toUTCString()--根據(jù)世界時(shí)間棚瘟,把date轉(zhuǎn)換為字符串
var date =new Date();
date.setDate(date.getDate()+3);//3天后過(guò)期
2.存儲(chǔ)cookie:通過(guò)鍵值對(duì)方式存儲(chǔ)
document.cookie ="age=18;expries="+date.toUTCString();
document.cookie ="name=lisi;expries="+date.toUTCString();
3.讀取cookie: 類似于json字符串
console.log(document.cookie); //"age=18; name=lisi"
4.讀取cookie的值
function getCookie(key){
var arr = document.cookie.split("; ")//分號(hào)加空格分開(kāi)
for(index in arr){
var resArr =arr[index].split("=");
if(resArr[0]==key){
return resArr[1];//把鍵所對(duì)應(yīng)的值返回
}
}
}
5.應(yīng)用
要求:點(diǎn)擊button按鈕,讓value++喜最,存儲(chǔ)每次的value值
input.onclick=function(){
this.value++;
//設(shè)置過(guò)期時(shí)間
var date =new Date();
date.setDate(date.getDate()+2);
//存儲(chǔ)cookie
document.cookie="count="+this.value+";expries="+date.toUTCString();
}
//判斷是否有cookie的值
if(getCookie("count")){
input.value=getCookie("cookie");//getCookie是上面所寫的讀取值函數(shù)
}
二偎蘸、localStorage:本地存儲(chǔ)
特點(diǎn):
- 同源策略限制。若想在不同頁(yè)面之間對(duì)同一個(gè)localStorage進(jìn)行操作瞬内,這些頁(yè)面必須在同一協(xié)議迷雪、同一主機(jī)名和同一端口下。(IE8和9存儲(chǔ)數(shù)據(jù)僅基于同一主機(jī)名虫蝶,忽略協(xié)議(HTTP和HTTPS)和端口號(hào)的要求)
- 只在本地存儲(chǔ)章咧。localStorage的數(shù)據(jù)不會(huì)跟隨HTTP請(qǐng)求一起發(fā)送到服務(wù)器,只會(huì)在本地生效能真。
- 永久保存赁严。保存的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間,直到手動(dòng)去除粉铐。
- 存儲(chǔ)方式疼约。localStorage的存儲(chǔ)方式采用key、value的方式蝙泼。value的值必須為字符串類型(傳入非字符串程剥,也會(huì)在存儲(chǔ)時(shí)轉(zhuǎn)換為字符串。true值會(huì)轉(zhuǎn)換為"true")汤踏。
- 存儲(chǔ)上限限制:不同的瀏覽器存儲(chǔ)的上限也不一樣织鲸,但大多數(shù)瀏覽器把上限限制在5MB以下舔腾。
- 同瀏覽器共享。localStorage的數(shù)據(jù)可
1.存儲(chǔ):
localStorage.a = 3//設(shè)置a為3
localStorage.["a"]="sds";//設(shè)置a為“sds”,會(huì)覆蓋上面的值
localStorage.setItem("b","fdfs");//設(shè)置b的值為fdfs
2.獲取
var a1 =localStorage["a"];
var a2 =localStorage.a;
var b =localStorage.getItem("b")
3.清除
localStorage.removeItem("c");//清除c的值