JavaScript數(shù)據(jù)存儲(chǔ) Cookie篇
1.什么是cookie？
答：cookie是用于在客戶端存儲(chǔ)會(huì)話信息的。
2.cookie的組成部分？
①名稱：一個(gè)唯一確定cookie 的名稱。建議區(qū)分大小寫。cookie 的名稱必須是經(jīng)過(guò)URL 編碼的。
②值：儲(chǔ)存在cookie 中的字符串值。值必須被URL 編碼。
③域：cookie 對(duì)于哪個(gè)域是有效的。所有向該域發(fā)送的請(qǐng)求中都會(huì)包含這個(gè)cookie 信息。這個(gè)值可以包含子域（subdomain，如www.wrox.com），也可以不包含它（如.wrox.com，則對(duì)于wrox.com的所有子域都有效）。如果沒(méi)有明確設(shè)定，那么這個(gè)域會(huì)被認(rèn)作來(lái)自設(shè)置cookie 的那個(gè)域。
④路徑：對(duì)于指定域中的那個(gè)路徑，應(yīng)該向服務(wù)器發(fā)送cookie。例如，你可以指定cookie 只有從http://www.wrox.com/books/ 中才能訪問(wèn)，那么http://www.wrox.com 的頁(yè)面就不會(huì)發(fā)送cookie 信息，即使請(qǐng)求都是來(lái)自同一個(gè)域的。
⑤失效時(shí)間：表示cookie 何時(shí)應(yīng)該被刪除的時(shí)間戳。默認(rèn)情況下，瀏覽器會(huì)話結(jié)束時(shí)即將所有cookie 刪除；不過(guò)也可以自己設(shè)置刪除時(shí)間。這個(gè)值是個(gè)GMT 格式的日期（Wdy, DD-Mon-YYYY HH:MM:SS GMT），用于指定應(yīng)該刪除cookie 的準(zhǔn)確時(shí)間。因此，cookie
可在瀏覽器關(guān)閉后依然保存在用戶的機(jī)器上。如果你設(shè)置的失效日期是個(gè)以前的時(shí)間，則cookie 會(huì)被立刻刪除。
⑥安全標(biāo)志：指定后，cookie 只有在使用SSL 連接的時(shí)候才發(fā)送到服務(wù)器。例如，cookie 信息只能發(fā)送給https://www.wrox.com，而http://www.wrox.com 的請(qǐng)求則不能發(fā)送cookie。
3.列舉一個(gè)cookie的例子？
以下是一個(gè)完整的cookie的例子，我們將把它分解開(kāi)來(lái)：
Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com; path=/; secure
①名稱: name字符串表示
②值：value字符串表示
③過(guò)期時(shí)間：Mon, 22-Jan-07 07:10:24 GMT
④域名：.wrox.com
⑤路徑：當(dāng)前目錄/
⑥安全標(biāo)志：secure
4.如何操作cookie？
var CookieUtil = {
// 設(shè)置cookie
set : function (name, value, expires, domain, path, secure) {
var cookieText = "";
cookieText += encodeURIComponent(name) + "=" + encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += "; expires=" + expires.toGMTString();
}
if (path) {
cookieText += "; path=" + path;
}
if (domain) {
cookieText += "; domain=" + domain;
}
if (secure) {
cookieText += "; secure";
}
document.cookie = cookieText;
},
// name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure
// 獲取cookie
get : function (name) {
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = "";
if (cookieStart > -1) {
var cookieEnd = document.cookie.indexOf (";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;
},
// 刪除cookie
unset : function (name, domain, path, secure) {
this.set(name, "", Date(0), domain, path, secure);
}
};
// 測(cè)試
CookieUtil.set("name", "zhang");
var name = CookieUtil.get("name");
alert(name); // zhang
CookieUtil.unset("name");
alert(CookieUtil.get("name")); // 空
5.cookie的限制
①存儲(chǔ)數(shù)據(jù)數(shù)量有限
②保了儲(chǔ)存在cookie 中的信息只能讓批準(zhǔn)的接受者訪問(wèn)，而無(wú)法被其他域訪問(wèn)
③安全性有限
6.針對(duì)cookie數(shù)據(jù)存儲(chǔ)少量的問(wèn)題，我們提出了子cookie的概念。即在每條cookie的值中存儲(chǔ)多條數(shù)據(jù)，用"&"隔開(kāi)。
var SubCookieUtil = {
/** 設(shè)置一條完整的cookie
* param name : 表示cookie的名稱，必填
* param subCookies : 表示cookie的值，為一個(gè)對(duì)象，必填
* param expires : 表示cookie的過(guò)期時(shí)間，可以不填
* param domain : 表示cookie的域名，可以不填
* param path : 表示cookie的路徑，可以不填
* param secure : 表示cookie的安全標(biāo)志，可以不填
* eg : SubCookieUtil.setAll("info", { name : "zhang", age : 23});
**/
setAll : function (name, subCookies, expires, domain, path, secure) {
var cookieText = "", subName, cookieParts = [];
cookieText += encodeURIComponent(name) + "=";
for(subName in subCookies) {
cookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subCookies[subName]));
}
if (cookieParts.length > 0) {
cookieText += cookieParts.join("&");
if (expires instanceof Date) {
cookieText += "; expires=" + expires.toGMTString();
}
if (path) {
cookieText += "; path=" + path;
}
if (domain) {
cookieText += "; domain=" + domain;
}
if (secure) {
cookieText += "; secure";
}
} else {
cookieText += "; expires=" + Date(0).toGMTString();
}
document.cookie = cookieText;
},
/** 設(shè)置一條子cookie
* param name : 表示cookie的名稱，必填
* param subName : 表示子cookie的名稱，必填
* param value : 表示子cookie的值，必填
* param expires : 表示cookie的過(guò)期時(shí)間，可以不填
* param domain : 表示cookie的域名，可以不填
* param path : 表示cookie的路徑，可以不填
* param secure : 表示cookie的安全標(biāo)志，可以不填
* eg : SubCookieUtil.set("info", "sex", "boy");
**/
set : function (name, subName, value, expires, domain, path, secure) {
var cookies = this.getAll(name) || {};
cookies[subName] = value;
this.setAll(name, cookies, expires, domain, path, secure);
},
/** 讀取一條完整cookie
* param name : 表示cookie的名稱，必填
* return : 一個(gè)cookie對(duì)象
* eg : SubCookieUtil.getAll("info");
**/
getAll : function (name) {
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = "", i, len, subCookies, parts, result = {};
if (cookieStart > -1) {
var cookieEnd = document.cookie.indexOf (";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
if (cookieValue.length > 0) {
subCookies = cookieValue.split("&");
for (i = 0, len = subCookies.length; i < len; i++) {
parts = subCookies[i].split("=");
result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
}
return result;
}
}
return null;
},
/** 獲取一條子cookie的值
* param name : 表示cookie的名稱，必填
* param subName : 表示子cookie的名稱
* return : 一個(gè)子cookie的值
* eg : SubCookieUtil.get("info", "name");
**/
get : function (name, subName) {
var cookies = this.getAll(name);
if (cookies) {
return cookies[subName];
} else {
return null;
}
},
/** 刪除一條完整cookie
* param name : 表示cookie的名稱，必填
* param domain : 表示cookie的域名，可以不填
* param path : 表示cookie的路徑，可以不填
* param secure : 表示cookie的安全標(biāo)志，可以不填
* eg : SubCookieUtil.unsetAll("info");
**/
unsetAll : function (name, domain, path, secure) {
this.setAll(name, "", Date(0).toGMTString(), domain, path, secure);
},
/** 刪除一條子cookie
* param name : 表示cookie的名稱，必填
* param subName : 表示子cookie的名稱，必填
* param domain : 表示cookie的域名，可以不填
* param path : 表示cookie的路徑，可以不填
* param secure : 表示cookie的安全標(biāo)志，可以不填
* eg : SubCookieUtil.unset("info", "name");
**/
unset : function (name, subName, domain, path, secure) {
var cookies = this.getAll(name);
if (cookies) {
delete cookies[subName];
this.setAll(name, cookies, null, domain, path, secure);
}
}
};
// 測(cè)試：
var zhang = {
name : "zhang",
age : 23,
height : "178cm",
weight : "66kg"
}
// 設(shè)置一條完整的cookie
SubCookieUtil.setAll("zhang", zhang);
// 獲取一條完整的cookie
var zhang = SubCookieUtil.getAll("zhang");
alert(zhang.weight); // 66kg
// 再為張?zhí)砑右粋€(gè)子cookie
SubCookieUtil.set("zhang", "sport", "basketball");
// 獲取子cookie
alert(SubCookieUtil.get("zhang", "sport")); // basketball
// 刪除一條子cookie
SubCookieUtil.unset("zhang", "age");
alert(SubCookieUtil.get("zhang", "age")); // undefined
// 刪除一條完整的cookie
SubCookieUtil.unsetAll("zhang");
alert(SubCookieUtil.getAll("zhang")); // 報(bào)錯(cuò)，因?yàn)橐呀?jīng)被刪除
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
- javascript js cookie的存儲(chǔ),獲取和刪除
- javascript創(chuàng)建和存儲(chǔ)cookie示例
- javascript中本地存儲(chǔ)localStorage，sessionStorage，cookie，indexDB的用法與使用場(chǎng)景匯總
- JavaScript使用IndexedDB進(jìn)行數(shù)據(jù)存儲(chǔ)
- 前端JS中sessionStorage,localStorage,IndexedDB本地存儲(chǔ)數(shù)據(jù)的三種方法詳解
- JavaScript存儲(chǔ)方式Cookie到IndexedDB全解析
相關(guān)文章
詳解Javascript動(dòng)態(tài)操作CSS
本文我們會(huì)討論如何通過(guò) JavaScript 在運(yùn)行時(shí)操作 CSS，從而動(dòng)態(tài)地更新應(yīng)用到我們的元素上的式樣。本文所用的技術(shù)是我們已經(jīng)看到過(guò)的，但在利用 CSS DOM 來(lái)進(jìn)行操作的時(shí)候還需要注意幾個(gè)特殊點(diǎn)。2014-12-12
ionic實(shí)現(xiàn)滑動(dòng)的三種方式
這篇文章主要為大家詳細(xì)介紹了ionic實(shí)現(xiàn)滑動(dòng)的三種方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
微信小程序中的wxs文件,大家或多或少都有見(jiàn)過(guò),下面這篇文章主要給大家介紹了關(guān)于微信小程序生命周期和WXS使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
網(wǎng)頁(yè)上的Javascript編輯器和代碼格式化
因?yàn)槲覀兊捻?xiàng)目可以通過(guò)編寫腳本（javascript）進(jìn)行功能擴(kuò)展，所以為了方便現(xiàn)場(chǎng)實(shí)施人員，所以突發(fā)奇想想在網(wǎng)頁(yè)上（系統(tǒng)是B/S的）提供一個(gè)javascript的編輯器。2010-04-04
基于JavaScript實(shí)現(xiàn)熔巖燈效果導(dǎo)航菜單
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)熔巖燈效果導(dǎo)航菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
js實(shí)現(xiàn)界面向原生界面發(fā)消息并跳轉(zhuǎn)功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)界面向原生界面發(fā)消息并跳轉(zhuǎn)功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Highslide.js是一款基于js實(shí)現(xiàn)的網(wǎng)頁(yè)中圖片展示插件
這篇文章主要介紹了Highslide.js是一款基于js實(shí)現(xiàn)的網(wǎng)頁(yè)中圖片預(yù)覽查看工具,需要的朋友可以參考下2007-05-05
這篇文章主要介紹了JS ES6變量的解構(gòu)賦值，對(duì)ES6感興趣的同學(xué)，可以參考下2021-05-05
JS實(shí)現(xiàn)的數(shù)組全排列輸出算法
這篇文章主要介紹了JS實(shí)現(xiàn)的數(shù)組全排列輸出算法,實(shí)例分析了全排列的原理與相關(guān)的javascript實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
如何利用Three.js實(shí)現(xiàn)跳一跳小游戲
最近在公司寫H5的3D游戲,選擇了ThreeJS去做,做的過(guò)程中遇到了很多問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于如何利用Three.js實(shí)現(xiàn)跳一跳小游戲的相關(guān)資料,需要的朋友可以參考下2022-04-04