1. 程式人生 > >客戶端存儲cookie

客戶端存儲cookie

var http請求 一個數 ring 而不是 index 數據傳輸 keys h+

1.cookie是一種早期的客戶端存儲機制,起初是針對服務器端腳本的設計使用的。

盡管在客戶端提供了非常繁瑣的api 來操作cookie,但他們難用至極,而且只能

存儲少量的文本數據,任何以cookie形式存儲的數據無論服務端是否需要,每一次http請求

都會把這些數據傳輸到服務端。cookie目前任然被客戶端程序員大量使用的一個重要原因是:

所有新舊瀏覽器都支持它。但是,隨著Web Storage 的普及,cookie最終會回到最初的狀態:

作為一種被服務端腳本使用的客戶端存儲機制。

2.cookie的屬性:有效期和作用域

name/value,名/值對。有效期daysLive:cookie的有效期和整個瀏覽器進程而不是單個瀏覽器窗口

的有效期一致。可以通過max-age屬性設置cookie的有效期。

作用域:cookie的作用域不是局限於瀏覽器的單個窗口中,而是在這個瀏覽器的進程;

3.保存cookie

cookie的屬性值設置為一個字符串形式的值:name=value

example:document.cookie = "version="+ encodeURLComponent(document.lastMNodified);

4.設置cookie

技術分享圖片

5.存儲cookie

function cookieStorage(maxage, path) {
//獲取一個存儲全部cookie信息的對象
var cookie = (function() {
var cookie = {};
var all = document.cookie;
if (all == "") {
return cookie;
}
var list = all.split(";");
for (var i = 0; i < list.length; i++) {
var cookie = list[i];
var p = cookie.indexOf("=");
var name = cookie.substring(0, p);
var value = cookie.substring(p + 1);
value = decodeURIComponent(value);
cookie[name] = value;
}
console.log(cookie);
}());

//將所有的cookie的名字存儲到一個數組中
var keys = [];
for(var key in cookie){
keys.push(key);
};
//定義存儲api公共屬性和方法
//存儲屬性的個數
this.length = keys.length;
//返回第n個cookie的名字,如果n越界則返回null
this.key = function(n){
if(n<0 || n>keys.length){
return null;
}
return keys[n];
};
//返回指定名字的cookie的值,如果不存返回null
this.getItem = function(name){
return cookie[name] || null;
};
//存儲cookie的值
this.setItem = function(key,value){
if(!(key in cookie)){
keys.push(key);
this.length++;
}
cookie[key] = value;
var cookie = key + "=" + encodeURIComponent(value);
//將cookie的屬性也加入到該字符串中
if(maxage) cookie += ";max-age=" + maxage;
if(path) cookie = ";path=" + path;
document.cookie = cookie;
};
//刪除指定的cookie
this.removeItem = function(key){
if(!(key in cookie)) return;
delete cookie[key];
for(var i = 0;i<keys.length;i++){
if(keys[i] === key){
keys.splice(i,1);
break;
}
}
this.length--;
document.cookie = key + "=; max-age=0";
};
this.clear = function(){
for(var i = 0;i<keys.legnth;i++){
document.cookie = keys[i] + "=; max-age=0";
}
cookie = {};
keys = [];
this.length = 0;
}

}

客戶端存儲cookie