javascript封裝 Cookie 應用接口
本文章記錄本人在學習 Cookie 中看書理解到的一些東西,加深記憶和并且整理記錄下來,方便之后的復習。
封裝函數(shù)
在默認的情況下存取Cookie是一件比較麻煩的事情。由于Cookie是通過字符串來存儲信息的,所以容易導致在執(zhí)行賦值運算的時需要轉(zhuǎn)換讀取信息的數(shù)據(jù)類型。而且Cookie信息的字符串本身就令人討厭,在經(jīng)常使用Cookie信息的 Web 應用中格外的不方便。所以需要自行的封裝一個Cookie函數(shù)來提供開發(fā)效率!
定義一個函數(shù)Cookie(),這個函數(shù)能夠?qū)懭胫付ǖ腃ookie信息,刪除指定的Cookie信息,也能夠讀取指定名稱的Cookie值,另外,在該函數(shù)中還可以制定Cookie信息的有效期、有效路徑、作用域和安全性選項設置。完整的代碼:
var Cookie = function(name, value, options) {
// 如果第二個參數(shù)存在
if (typeof value != 'undefined') {
options = options || {};
if (value === null) {
// 設置失效時間
options.expires = -1;
}
var expires = '';
// 如果存在事件參數(shù)項,并且類型為 number,或者具體的時間,那么分別設置事件
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString();
}
var path = options.path ? '; path=' + options.path : '', // 設置路徑
domain = options.domain ? '; domain=' + options.domain : '', // 設置域
secure = options.secure ? '; secure' : ''; // 設置安全措施,為 true 則直接設置,否則為空
// 把所有字符串信息都存入數(shù)組,然后調(diào)用 join() 方法轉(zhuǎn)換為字符串,并寫入 Cookie 信息
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // 如果第二個參數(shù)不存在
var CookieValue = null;
if (document.cookie && document.cookie != '') {
var Cookie = document.cookie.split(';');
for (var i = 0; i < Cookies.length; i++) {
var Cookie = (Cookie[i] || "").replace( /^\s+|\s+$/g, "");
if (Cookie.substring(0, name.length + 1) == (name + '=')) {
CookieValue = decodeURIComponent(Cookie.substring(name.length + 1));
break;
}
}
}
return CookieValue;
}
};
如何使用
寫入Cookie信息:
// 簡單寫入一條 Cookie 信息
cookie("user", "baidu");
// 寫入一條 Cookie 信息,并且設置更多選項
cookie("user", "baidu", {
expires: 10, // 有效期為 10 天
path: "/", // 整個站點有效
domain: "www.baidu.com", // 有效域名
secure: true // 加密數(shù)據(jù)傳輸
});
2.讀取Cookie信息:
cookie("user");
3.刪除Cookie信息:
cookie("user", null);
再給大家分享一個封裝好的代碼
//向cookie寫入數(shù)據(jù)
function writeCookie(name, value, days) {
// 定義有效日期(cookie的有效時間)
var expires = "";
// 為有效日期賦值
if (days) {
var date = new Date();
//設置有效期(當前時間+時間段)
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));//時間段為毫秒數(shù)
expires = "; expires=" + date.toGMTString();
}
// 給cookie賦值 name, value和expiration date(有效期)
document.cookie = name + "=" + value + expires + "; path=/";
}
//讀取cookie數(shù)據(jù)
function readCookie(name) {
var searchName = name + "=";
var cookies = document.cookie.split(';');
for(var i=0; i < cookies.length; i++) {
var c = cookies[i];
while (c.charAt(0) == ' ')
c = c.substring(1, c.length);
if (c.indexOf(searchName) == 0)
return c.substring(searchName.length, c.length);
}
return null;
}
//清楚所有的cookie
function eraseCookie(name) {
// 將時間設置成-1將清除存儲在cookie中的數(shù)據(jù)
writeCookie(name, "", -1);
}
最后,如果文章有什么錯誤和疑問的地方,請指出。與sf各位共勉!
相關(guān)文章
JS中onpropertychange和onchange事件區(qū)別小結(jié)
當一個HTML元素的屬性用js改變的時候,都能通過onpropertychange來捕獲。例如一個文本text對象的value屬性被頁面的腳本修改的時候,onchange無法捕獲到,而onpropertychange卻能夠捕獲。2010-07-07
JS基于面向?qū)ο髮崿F(xiàn)的多個倒計時器功能示例
這篇文章主要介紹了JS基于面向?qū)ο髮崿F(xiàn)的多個倒計時器功能,結(jié)合實例形式分析了javascript面向?qū)ο蠹皶r間操作相關(guān)技巧,需要的朋友可以參考下2017-02-02
JavaScript使表單中的內(nèi)容顯示在屏幕上的方法
這篇文章主要介紹了JavaScript使表單中的內(nèi)容顯示在屏幕上的方法,涉及javascript針對表單元素操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06
layui.tree組件的使用以及搜索節(jié)點功能的實現(xiàn)
今天小編就為大家分享一篇layui.tree組件的使用以及搜索節(jié)點功能的實現(xiàn),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript實現(xiàn)使用Canvas繪制圖形的基本教程
本篇文章主要介紹了JavaScript實現(xiàn)使用Canvas繪制圖形的基本教程,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2016-10-10

