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