資訊專欄INFORMATION COLUMN
摘要：中的在中操作通過(guò)來(lái)實(shí)現(xiàn)操作在傳遞過(guò)程中，使用上面這樣的方式對(duì)于參數(shù)的傳遞和拼接都是不太方便的，下面我們來(lái)封裝一個(gè)自己的功能。上面就是我們封裝的功能模塊來(lái)幫主我們?cè)O(shè)置和獲取，之所以封裝這個(gè)功能最終的目的就是讓我們更方便的通過(guò)來(lái)操作。
閱讀原文
由于瀏覽器無(wú)狀態(tài)的特性，cookie 技術(shù)應(yīng)運(yùn)而生，cookie 是一個(gè)會(huì)話級(jí)的存儲(chǔ)，用于某些網(wǎng)站為了辨別用戶身份、進(jìn)行 session 跟蹤而儲(chǔ)存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過(guò)加密），通過(guò)訪問(wèn)某些服務(wù)器而特定攜帶的存儲(chǔ)信息，不支持跨域，在瀏覽器清空緩存或超過(guò)有效期后失效。
JavaScript 中的 cookie在 JavaScript 中操作 cookie 通過(guò) document.cookie 來(lái)實(shí)現(xiàn)：
// 操作 cookie document.cookie = "key1=value1; key2=value2; path=/; domain=pandashen.com";
在傳遞 cookie 過(guò)程中，使用上面這樣的方式對(duì)于參數(shù)的傳遞和拼接都是不太方便的，下面我們來(lái)封裝一個(gè)自己的 cookie 功能。
封裝一個(gè) cookie 模塊 1、整體思路設(shè)計(jì)(function() {
var kvTool = {
maxage: "max-age",
path: "path",
domain: "domain",
secure: "secure"
};
function setCookie() {}
function getCookie() {}
var cookieUtil = function() {};
window.cookieUtil = cookieUtil;
})();
我們封裝了一個(gè)自執(zhí)行函數(shù)，在內(nèi)部將 cookie 基本參數(shù)的鍵名存入 kvTool 對(duì)象當(dāng)中設(shè)計(jì)的 options 參數(shù)的鍵名一一對(duì)應(yīng)，并多帶帶聲明一個(gè)設(shè)置 cookie 的方法 setCookie 和獲取 cookie 的方法 getCookie，最后用函數(shù)表達(dá)式的形式聲明一個(gè) cookieUtil 暴露給全局作用域。
2、setCookie 方法的實(shí)現(xiàn)(function() {
var kvTool = {
maxage: "max-age",
path: "path",
domain: "domain",
secure: "secure"
};
function setCookie(k, v, options) {
if (!options) {
document.cookie = k + "=" + v;
} else {
var tmp = [];
for (var key in options) {
// { path="/", domain="pandashen.com" }
tmp.push(kvTool[key] + "=" + options[key]);
}
document.cookie = k + "=" + v + "; " + tmp.join("; ");
}
}
function getCookie() {}
var cookieUtil = function() {};
window.cookieUtil = cookieUtil;
})();
setCookie 方法的有三個(gè)參數(shù)：
k：cookie 發(fā)送信息的鍵
v：cookie 發(fā)送信息的值
options：cookie 的基本參數(shù)
當(dāng)沒(méi)有傳入基本參數(shù) options 的時(shí)候直接將 cookie 發(fā)送信息的鍵值拼接賦值給 document.cookie。
傳入基本參數(shù) options 的時(shí)候取出 kvTool 真正的鍵名，并和 cookie 發(fā)送的信息的鍵值拼接成 k=v; k=v 形式的字符串賦值給 document.cookie。
3、getCookie 方法的實(shí)現(xiàn)(function() {
var kvTool = {
maxage: "max-age",
path: "path",
domain: "domain",
secure: "secure"
};
function setCookie(k, v, options) {
if (!options) {
document.cookie = k + "=" + v;
} else {
var tmp = [];
for (var key in options) {
// { path="/", domain="pandashen.com" }
tmp.push(kvTool[key] + "=" + options[key]);
}
document.cookie = k + "=" + v + "; " + tmp.join("; ");
}
}
function getCookie(k) {
var strCookie = document.cookie;
// 形如: "k=v; k=v; k=v; k=v"
var kvs = strCookie.split(";").map(v => v.trim());
var objCookie = {};
kvs.forEach(v => {
var kv = v.split("=");
objCookie[kv[0]] = kv[1];
});
return objCookie[k];
}
var cookieUtil = function() {};
window.cookieUtil = cookieUtil;
})();
getCookie 方法只有一個(gè)參數(shù)，即我們要獲取的 cookie 的某一個(gè)屬性的鍵，函數(shù)會(huì)將對(duì)應(yīng)的值返回。
其實(shí)對(duì)外暴露的方法只有 cookieUtil，所以 setCookie 和 getCookie 都是在 cookieUtil 內(nèi)部調(diào)用的。
4、cookieUtil 方法的實(shí)現(xiàn)(function() {
var kvTool = {
maxage: "max-age",
path: "path",
domain: "domain",
secure: "secure"
};
function setCookie(k, v, options) {
if (!options) {
document.cookie = k + "=" + v;
} else {
var tmp = [];
for (var key in options) {
// { path="/", domain="pandashen.com" }
tmp.push(kvTool[key] + "=" + options[key]);
}
document.cookie = k + "=" + v + "; " + tmp.join("; ");
}
}
function getCookie(k) {
var strCookie = document.cookie;
// 形如: "k=v; k=v; k=v; k=v"
var kvs = strCookie.split(";").map(v => v.trim());
var objCookie = {};
kvs.forEach(v => {
var kv = v.split("=");
objCookie[kv[0]] = kv[1];
});
return objCookie[k];
}
var cookieUtil = function(key, value, options) {
if (!value) {
// 沒(méi)有傳參, 得到數(shù)據(jù)
return getCookie(key);
} else {
setCookie(key, value, options);
}
};
window.cookieUtil = cookieUtil;
})();
cookieUtil 的邏輯為當(dāng) key 和 value 兩個(gè)參數(shù)都傳入時(shí)，調(diào)用 setCookie 來(lái)設(shè)置 cookie，只傳入 key 時(shí)，調(diào)用 getCookie 獲取 cookie 對(duì)應(yīng)參數(shù)的值。
上面就是我們封裝的 cookie 功能模塊來(lái)幫主我們?cè)O(shè)置和獲取 cookie，之所以封裝這個(gè)功能最終的目的就是讓我們更方便的通過(guò) JavaScript 來(lái)操作 cookie。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98289.html
摘要：本地存儲(chǔ)的封裝，提供簡(jiǎn)單的，沒(méi)有對(duì)做兼容處理，因?yàn)榘持饕糜?，，移?dòng)端等先進(jìn)瀏覽器里面跑。安裝下載地址設(shè)置的值，生存時(shí)間半個(gè)小時(shí)獲取的值，顯示刪除清空獲取所有批量設(shè)置的值過(guò)期時(shí)間路徑域以及安全。如果想讓本地也加密，得自己加密數(shù)據(jù)。 showImg(https://img.shields.io/github/issues/jaywcjlove/cookie.js.svg); showIm...
摘要：設(shè)置天過(guò)期，代表昨天已經(jīng)過(guò)期存一個(gè)，天之后過(guò)期天之后過(guò)期記得用火狐測(cè)試做一個(gè)小記住用戶名兼容測(cè)試名字值多少天過(guò)期參數(shù)傳多少天，就過(guò)期多少天如果沒(méi)找到返回空字符串。 最簡(jiǎn)單的設(shè)置cookie的方法 document.cookie=password=123456; 用expires設(shè)置cookie過(guò)期時(shí)間 window.onload=function(){ v...
摘要：介紹如有不詳細(xì)或者不正確的地方多多指正。可以通過(guò)官方提供的命令行進(jìn)行安裝，官方目前默認(rèn)的界面文件用格式，建議修改為格式的文件版權(quán)問(wèn)題，同時(shí)要在中安裝對(duì)應(yīng)的包和設(shè)置對(duì)應(yīng)的界面引擎解釋器。 express介紹 如有不詳細(xì)或者不正確的地方多多指正。 我們可以拿js與jquery關(guān)系來(lái)類比一下： jQuery是JS在瀏覽器環(huán)境下的封裝庫(kù)，把DOM操作，ajax等封裝成了兼容性好，方便使用的方法...
摘要：接上次挖的坑，對(duì)相關(guān)的源碼進(jìn)行分析第一篇。和同為一批人進(jìn)行開(kāi)發(fā)，與相比，顯得非常的迷你。在接收到一個(gè)請(qǐng)求后，會(huì)拿之前提到的與來(lái)創(chuàng)建本次請(qǐng)求所使用的上下文。以及如果沒(méi)有手動(dòng)指定，會(huì)默認(rèn)指定為。 接上次挖的坑，對(duì)koa2.x相關(guān)的源碼進(jìn)行分析 第一篇。 不得不說(shuō)，koa是一個(gè)很輕量、很優(yōu)雅的http框架，尤其是在2.x以后移除了co的引入，使其代碼變得更為清晰。 express和ko...
摘要：簡(jiǎn)介最近寫(xiě)了一個(gè)基于權(quán)限管理系統(tǒng)的后臺(tái)模板，包含了正常項(xiàng)目開(kāi)發(fā)所需的框架功能，開(kāi)發(fā)者使用的時(shí)候只需要專注于項(xiàng)目的業(yè)務(wù)邏輯就好。同時(shí)接下來(lái)會(huì)讓你擁有一個(gè)自己完全掌控的框架。 簡(jiǎn)介 最近寫(xiě)了一個(gè)基于vue2.0+element-ui權(quán)限管理系統(tǒng)的后臺(tái)模板，包含了正常項(xiàng)目開(kāi)發(fā)所需的框架功能，開(kāi)發(fā)者使用的時(shí)候只需要專注于項(xiàng)目的業(yè)務(wù)邏輯就好。同時(shí)接下來(lái)會(huì)讓你擁有一個(gè)自己完全掌控的框架。 源碼地址...
閱讀 3679·2021-11-24 09:38
閱讀 3159·2021-11-15 11:37
閱讀 799·2021-11-12 10:36
閱讀 3557·2021-10-21 09:38
閱讀 3230·2021-09-28 09:36
閱讀 2430·2021-09-22 16:01
閱讀 5005·2021-09-22 15:09
閱讀 1230·2019-08-30 15:55
