JavaScript对于Cookie的使用

Cookie包含多个互不相关的信息块：

• 名称
• 值
• 到期日期和时间
• 有效路径（默认为当前路径）
• 域（默认为当前主机）

创建Cookie

JavaScript中的Cookie通过document对象的cookie属性访问。

document.cookie = value;

Cookie值必须使用特定的语法，这种语法以cookieName=cookieValue开始。

//如：保存用户偏爱的字体大小
document.cookie = 'fontSize=12';

上述代码发送的Cookie有默认的到期时间、路径和域。在Cookie值字符串中添加一个分号，后面跟上Cookie属性expires、path和domain及其值，可以修改这些值：

document.cookie = 'fontSize=14;expires='+someDate.toGMTString()+';path=/;domain=*.example.com';

读取Cookie

一旦在JavaScript中设置了一个Cookie，就可以读取它。但是读取到的Cookie是多个Cookie，它们之间用分号分隔，所以为了读入每个Cookie，必须先拆解字符串：

var cookies = document.cookie.split(";");

注：无法访问单独的Cookie属性——到期时间、路径和域，因为访问Cookie本身就说明Cookie还未到期，可用于当前路径和域中的页面

删除Cookie

在JavaScript中删除Cookie只需要设置一个同名Cookie，不提供Cookie的值，并将到期时间设置为过去的一个时刻——如UNIX时间戳：

document.cookie = 'fontSize=;expires=Thu,01-Jan-1970 00:00:01 GMT';

有了上面的基础知识，我们对此可以进一步封装Cookie

封装Cookie操作类

/**
 * Cookie操作类：Cookie.js
 */
function Cookie(){
}
/**
 * 获取Cookie
 * @param {string} key cookie的键
 * @returns {string} cookie的值
 */
Cookie.prototype.get = function(key){
    var cookies = document.cookie.split(";");
    for(let i=0;i<cookies.length;i++){
        if(cookies[i].indexOf(key) !== -1){
            return cookies[i].split("=")[1];
        }
    }
    return undefined;
}
/**
 * 设置Cookie
 * @param {string} key 键名
 * @param {string} value 值
 * @param {number} expire 租期，单位为毫秒
 * @returns 
 */
Cookie.prototype.set = function(key, value, expire){
    let exp = new Date();
    exp.setTime(exp.getTime() + expire);
    document.cookie = key + "=" + value + ";expires=" + exp.toGMTString() + ";path=/";
}
/**
 * 删除Cookie
 * @param {string} key 
 */
Cookie.prototype.remove = function(key){
    document.cookie = key + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/"; // 传入一个过期时间即为删除 
}

示例

<script src="Cookie.js"></script>
<script type="text/javascript">
	// 初始化Cookie对象
	const myCookie = new Cookie();
	// 设置cookie
	myCookie.set("name", "Kevin", 30*60*1000); // 保存cookie，有效期30分钟
	// 读取cookie
	console.log(myCookie.get("name"));
	// 删除cookie
	myCookie.remove("name");
</script>