cookie存儲(chǔ)
基本介紹:
web存儲(chǔ)相關(guān)的技術(shù)：cookie | sessionStorage | localStorage |應(yīng)用緩存
-
cookie是一種會(huì)話跟蹤技術(shù)，用于在進(jìn)行網(wǎng)頁(yè)訪問(wèn)的時(shí)候，存儲(chǔ)頁(yè)面中的某些數(shù)據(jù)信息。
cookie的使用注意點(diǎn):- 使用cookie來(lái)進(jìn)行數(shù)據(jù)存儲(chǔ)的大小有限制，4KB;
- 每個(gè)網(wǎng)頁(yè)中存儲(chǔ)cookie的個(gè)數(shù)（最多50）和每個(gè)網(wǎng)站中存儲(chǔ)cookie的個(gè)數(shù)都有限制（200）;
- 各個(gè)不同的瀏覽器對(duì)cookie的數(shù)量也不相同.
IE6.0：每個(gè)域?yàn)?0個(gè)，大小為4095個(gè)字節(jié);
IE7.0/8.0：每個(gè)域?yàn)?0個(gè) ，大小為4095個(gè)字節(jié);
Opera：每個(gè)域?yàn)?0個(gè) ，4096個(gè)字節(jié);
FF：每個(gè)域?yàn)?0個(gè) ，大小為4097個(gè)字節(jié);
Safari：沒(méi)有個(gè)數(shù)限制，大小為4097個(gè)字節(jié);
Chrome：每個(gè)域?yàn)?3個(gè)，大小為4097個(gè)字節(jié);
總結(jié)：在進(jìn)行頁(yè)面cookie操作的時(shí)候，應(yīng)該盡量保證cookie個(gè)數(shù)小于20個(gè)，總大小 小于4KB-
cookie數(shù)據(jù)的過(guò)期時(shí)間
- 默認(rèn)情況下，cookie存儲(chǔ)的內(nèi)容是一次性的，它的有效期間是當(dāng)前會(huì)話（需要把整個(gè)瀏覽器都關(guān)閉會(huì)話就結(jié)束）
- 設(shè)置過(guò)期時(shí)間：通過(guò)expires=time;的格式來(lái)進(jìn)行指定, 設(shè)置了之后只要沒(méi)有超過(guò)過(guò)期時(shí)間，那么數(shù)據(jù)將一直都在
cookie是不可以跨瀏覽器的(在IE中保存的cookie, 不可以在火狐中使用)
-
cookie是不可以跨域的(跨域名)
示例：127.0.0.1/code/test.html 和127.0.0.1/code/test1.html可以訪問(wèn)
網(wǎng)絡(luò)請(qǐng)求的常見(jiàn)路徑：
http://www.baidu.com:80/資源
協(xié)議://域名.后綴:端口號(hào)/資源
不能跨域的含義：就是只有 （協(xié)議+域名+后綴+端口）號(hào)都相同才能相互訪問(wèn)
http://www.baidu.com:80/a.html
http://www.baidu.com:80/b.html 能http://www.baidu.com:81/a.html http://www.baidu.com:80/b.html 不能（端口號(hào)不相同） http://mp3.baidu.com:80/a.html http://map.baidu.com:80/b.html 不能（二級(jí)域名不相同） https://www.baidu.com:80/a.html http://www.baidu.com:80/b.html 不能（協(xié)議不相同） http://www.bdu.com:80/a.html http://www.dbu.com:80/b.html 不能（以及域名不相同）
cookie的設(shè)置和使用
- 設(shè)置方法：
設(shè)置cookie數(shù)據(jù)：document.cookie = "name=zhangsan";
設(shè)置cookie數(shù)據(jù)和過(guò)期的時(shí)間：document.cookie = "name=zhangsan; expires="+date+";";
過(guò)期7天的設(shè)置：var date = new Date(); // date.setDate(date.getDate() + 7); - 使用注意：
在設(shè)置cookie的時(shí)候，一次只能設(shè)置一個(gè)數(shù)據(jù)（一個(gè)鍵值對(duì)），不能進(jìn)行批量設(shè)置
錯(cuò)誤的演示：window.cookie = "name=zhangsan&age=18";
示例代碼
//設(shè)置三個(gè)cookie的值，默認(rèn)的過(guò)期時(shí)間是seesion（會(huì)話內(nèi)）
document.cookie = "name=wendingding";
document.cookie = "age=18";
document.cookie = "des=12345";
//設(shè)置cookie的值，并指定過(guò)期的時(shí)間
var date = new Date();
date.setDate(date.getDate() + 3); //3天的過(guò)期時(shí)間
//注意：在設(shè)置過(guò)期時(shí)間的時(shí)候，中間使用；分隔開(kāi)發(fā)
document.cookie = "color=red;expires="+date;
//刪除cookie
//刪除cookie的原理：只要過(guò)期時(shí)間超過(guò)了當(dāng)前的時(shí)間, 數(shù)據(jù)就會(huì)被刪除
date.setDate(date.getDate() + -1);
document.cookie = "age=18; expires="+date+";";
cookie相關(guān)方法的封裝
- 讀取某個(gè)cookie的值（需要做切割處理）
document.cookie = "name=zhangsan";
document.cookie = "age=18";
console.log(document.cookie);
//01 獲取某個(gè)key對(duì)應(yīng)的cookie值
function getCookie(key) {
//01 先對(duì)獲取的字符串進(jìn)行切割，獲取得到數(shù)組
var arrM = document.cookie.split(";");
console.log(arrM);
//02 遍歷數(shù)組
for (var i = 0,len = arrM.length;i<len;i++)
{
//03 對(duì)數(shù)組中取出來(lái)的每個(gè)元素再進(jìn)行切割
var arrT = arrM[i].split("=");
var res = arrT[0].replace(" ","");
if(res == key)
{
return arrT[1];
}
}
}
console.log(getCookie("age"));
- 添加cookie數(shù)據(jù)（需要判斷是否要設(shè)置過(guò)期時(shí)間）
//添加單個(gè)cookie的值
function addCookie(key,value,date) {
//01 判斷是否需要設(shè)置過(guò)期時(shí)間
if (arguments.length == 2)
{
document.cookie = key + "=" + value;
}else if (arguments.length == 3)
{
//02 設(shè)置過(guò)期時(shí)間
var dateM = new Date();
dateM.setDate(dateM.getDate() + date);
var res = key + "=" + value +";" + "expires="+dateM;
document.cookie = res;
}
}
addCookie("haha","wuwuwuw",2);
- 刪除cookie數(shù)據(jù)（利用過(guò)期時(shí)間和添加cookie的方法實(shí)現(xiàn)）
//刪除cookie數(shù)據(jù)：原理（當(dāng)前的時(shí)間超過(guò)了cookie的過(guò)期時(shí)間那么該數(shù)據(jù)就會(huì)被刪除）
function removeCookie(key){
//重新設(shè)置某個(gè)cookie的過(guò)期時(shí)間
addCookie(key,"",-1);
}
removeCookie("haha");
使用cookie存儲(chǔ)技術(shù)來(lái)記住頁(yè)碼
使用cookie技術(shù)來(lái)處理微博項(xiàng)目說(shuō)明
- 之前的微博項(xiàng)目中還存在一些問(wèn)題，如果當(dāng)前的頁(yè)面是第二頁(yè)，那么此時(shí)刷新頁(yè)面會(huì)自動(dòng)跳轉(zhuǎn)到默認(rèn)顯示的第一頁(yè)
- 要求在進(jìn)行刷新的時(shí)候，顯示的還是當(dāng)前頁(yè)的數(shù)據(jù)
具體實(shí)現(xiàn)思路：在代碼中獲取當(dāng)前的pageNumber,那么當(dāng)頁(yè)面加載完成之后就調(diào)用方法傳遞pageNumber作為參數(shù)刷新指定頁(yè)的數(shù)據(jù)
具體實(shí)現(xiàn)：
1. 在點(diǎn)擊頁(yè)碼的時(shí)候拿到當(dāng)前的頁(yè)碼，通過(guò)page.text()
2. 在切換頁(yè)碼選中狀態(tài)之后，添加代碼：addCookie("pageNumber",$(this).text());
3. 在按鈕點(diǎn)擊之前（頁(yè)面加載完成之后）獲取頁(yè)碼，var pageNumber = getCookie("pageNumber") || 1;
4. 在獲取默認(rèn)顯示微博列表數(shù)據(jù)的位置，把獲取第一頁(yè)的數(shù)據(jù)修改成獲取第pageNumber頁(yè)的數(shù)據(jù)
5. 處理默認(rèn)選中的頁(yè)碼：oPage.child
sessionStorage存儲(chǔ)
簡(jiǎn)單說(shuō)明
1. 在存儲(chǔ)用戶(hù)數(shù)據(jù)的時(shí)候，因?yàn)閏ookie可以存儲(chǔ)的數(shù)據(jù)比較小才4KB左右，所以也可以考慮使用sessionStorage來(lái)存儲(chǔ),大小限制為2M左右
2. 該技術(shù)和localStorage是h5推出的，因此在使用的時(shí)候，需要考慮到兼容性的問(wèn)題
3. 相關(guān)資料：http://www.w3school.com.cn/html5/html_5_webstorage.asp
4. 簡(jiǎn)單介紹和使用：
001 sessionStorage：會(huì)話存儲(chǔ)技術(shù)（session-會(huì)話）
002 該技術(shù)和cookie一樣，一樣瀏覽器退出了，那么保存的數(shù)據(jù)就會(huì)
003 演示sessionStorage技術(shù)的相關(guān)操作
添加|獲取|更新|刪除|清空
示例代碼
<input type="text">
<button class="btn1">添加</button>
<button class="btn2">獲取</button>
<button class="btn3">更新</button>
<button class="btn4">刪除</button>
<button class="btn5">清空</button>
<script>
window.sessionStorage.setItem("age","18");
window.sessionStorage.setItem("color","red");
window.sessionStorage.setItem("des","no des");
var oInput = document.querySelector("input");
var oBtn1 = document.querySelector(".btn1");
oBtn1.onclick = function () {
//添加操作
window.sessionStorage.setItem("name",oInput.value);
};
var oBtn2 = document.querySelector(".btn2");
oBtn2.onclick = function () {
//獲取操作
console.log(window.sessionStorage.getItem("name"));
};
var oBtn3 = document.querySelector(".btn3");
oBtn3.onclick = function () {
//更新操作
window.sessionStorage.setItem("name",oInput.value);
};
var oBtn4 = document.querySelector(".btn4");
oBtn4.onclick = function () {
//刪除操作
window.sessionStorage.removeItem("name");
};
var oBtn5 = document.querySelector(".btn5");
oBtn5.onclick = function () {
//清空操作
window.sessionStorage.clear();
};
</script>
localStorage存儲(chǔ)
簡(jiǎn)單說(shuō)明
1. 簡(jiǎn)單對(duì)比：保存在本地 + 沒(méi)有時(shí)間限制
2. 大小比較：4K - 5M - 20M
3. 使用方式和sessionStorage相同
示例代碼
<input type="text">
<button class="btn1">添加</button>
<button class="btn2">獲取</button>
<button class="btn3">更新</button>
<button class="btn4">刪除</button>
<button class="btn5">清空</button>
<script>
window.localStorage.setItem("age","18");
window.localStorage.setItem("color","red");
window.localStorage.setItem("des","no des");
var oInput = document.querySelector("input");
var oBtn1 = document.querySelector(".btn1");
oBtn1.onclick = function () {
//添加操作
window.localStorage.setItem("name",oInput.value);
};
var oBtn2 = document.querySelector(".btn2");
oBtn2.onclick = function () {
//獲取操作
console.log(window.localStorage.getItem("name"));
};
var oBtn3 = document.querySelector(".btn3");
oBtn3.onclick = function () {
//更新操作
window.localStorage.setItem("name",oInput.value);
};
var oBtn4 = document.querySelector(".btn4");
oBtn4.onclick = function () {
//刪除操作
window.localStorage.removeItem("name");
};
var oBtn5 = document.querySelector(".btn5");
oBtn5.onclick = function () {
//清空操作
window.localStorage.clear();
};
</script>
