JS cookie及其用法 – JavaScript高级教程

上一章JavaScript教程请查看：JS表单验证

在本教程中，你将学习如何在JavaScript中创建、读取、更新和删除cookie。

什么是cookie？

cookie是一个小文本文件，它允许你在用户的计算机上存储少量数据(大约4KB)。它们通常用于跟踪诸如用户首选项之类的信息，当用户下次访问网站时，站点可以检索这些信息来个性化页面。

cookie是一种老式的客户端存储机制，最初是为PHP、ASP等服务器端脚本语言设计的。但是，也可以使用JavaScript直接创建、访问和修改cookie，但是这个过程有点复杂和混乱。

提示：一个cookie可以达到4 KB，包括它的名称和值，超过这个长度的cookie会被裁剪以适应。而且，每次浏览器向服务器请求一个页面时，cookie中的所有数据都会自动发送到请求中的服务器。

警告：不要将密码或信用卡信息等敏感数据存储在cookie中，因为它可能被恶意用户操纵。

用JavaScript创建Cookie

在JavaScript中，你可以使用document.cookie创建、读取和删除cookie，此属性表示与文档关联的所有cookie。

要创建或存储一个新的cookie，将name=value字符串赋给这个属性，如下所示:

document.cookie = "firstName=Christopher";

cookie值不能包含分号、逗号或空格。因此，需要使用JavaScript的内置函数encodeURIComponent()对包含这些字符的值进行编码，然后将其存储到cookie中。同样，在读取cookie值时需要使用相应的decodeURIComponent()函数。

document.cookie = "name=" + encodeURIComponent("Christopher Columbus");

默认情况下，cookie的生存期是当前浏览器会话，这意味着当用户退出浏览器时它将丢失。要使cookie在当前浏览器会话之外持久存在，需要使用max-age属性指定它的生存期(以秒为单位)。这个属性决定了一个cookie在被删除之前可以在用户的系统上停留多长时间，例如，跟踪cookie将持续30天。

document.cookie = "firstName=Christopher; max-age=" + 30*24*60*60;

你还可以使用expires属性指定cookie的生存期。此属性采用cookie到期的确切日期(采用GMT/UTC格式)，而不是以秒为单位的偏移量。

document.cookie = "firstName=Christopher; expires=Thu, 31 Dec 2099 23:59:59 GMT";

下面是一个函数，它使用可选的max-age属性设置cookie。你还可以使用相同的函数通过传递daysToLive参数的值0来删除cookie。

function setCookie(name, value, daysToLive) {
    // 对值进行编码，以转义分号、逗号和空格
    var cookie = name + "=" + encodeURIComponent(value);
    
    if(typeof daysToLive === "number") {
        /* 设置max-age属性，使在指定的天数之后cookie过期 */
        cookie += "; max-age=" + (daysToLive*24*60*60);
        
        document.cookie = cookie;
    }
}function setCookie(name, value, daysToLive) {

默认情况下，同一目录或该目录的任何子目录中的所有web页面都可以使用cookie。但是，如果指定了路径，则该cookie对指定路径中的所有web页面以及该路径的所有子目录中的所有web页面都是可用的。例如，如果路径设置为/ cookie在整个网站中都可用，无论哪个页面创建cookie。

document.cookie = "firstName=Christopher; path=/";

此外，如果希望在子域之间使用cookie，还可以使用域属性。默认情况下，cookie仅对其设置的域中的页面可用。

如果由blog.example.com页面创建的cookie将其path属性设置为/，将其域属性设置为example.com，则该cookie也可用于backend.example.com、portal.example.com上的所有web页面。但是，你不能在域之外共享cookie。

document.cookie = "firstName=Christopher; path=/; domain=example.com";

还有一个名为secure的布尔属性，如果指定了此属性，cookie将仅通过安全(即加密)连接(如HTTPS)传输。

document.cookie = "firstName=Christopher; path=/; domain=example.com; secure";

读取一个cookie

读取cookie稍微复杂一些，因为document.cookie属性简单地返回一个包含分号和所有cookie的空格分隔列表的字符串(例如，name=value对，例如，firstName=John;lastName =Doe;)。此字符串不包含为cookie设置的属性，如expires、path、domain等。

为了从这个列表中获取单独的cookie，你需要使用split()方法将其分成单独的name=value对，并搜索特定的名称，如下所示:

function getCookie(name) {
    // 拆分cookie字符串并获取数组中所有单独的名称=值对
    var cookieArr = document.cookie.split(";");
    
    // 遍历数组元素
    for(var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");
        
        /* 删除cookie名称开头的空白
并与给定的字符串进行比较 */
        if(name == cookiePair[0].trim()) {
            // 解码cookie值并返回
            return decodeURIComponent(cookiePair[1]);
        }
    }
    
    // 如果没有找到，返回null
    return null;
}

现在我们要创建一个函数checkCookie()，利用上述getCookie()函数检查是否设置firstName cookie，如果它被设置将显示一个问候的信息，如果它不是那么这个函数将提示用户输入他们的名字，并将它存储在cookie使用我们以前创建的setCookie()函数。

function checkCookie() {
    // 使用我们的自定义函数获取cookie
    var firstName = getCookie("firstName");
    
    if(firstName != "") {
        alert("Welcome again, " + firstName);
    } else {
        firstName = prompt("请输入你的名字:");
        if(firstName != "" && firstName != null) {
            // 使用我们的自定义函数设置cookie
            setCookie("firstName", firstName, 30);
        }
    }
}

更新一个cookie

更新或修改cookie的惟一方法是创建与现有cookie具有相同name和path的另一个cookie，创建一个同名但路径不同的cookie将添加一个额外的cookie。这里有一个例子:

// 创建一个cookie
document.cookie = "firstName=Christopher; path=/; max-age=" + 30*24*60*60;

// 更新cookie
document.cookie = "firstName=Alexander; path=/; max-age=" + 365*24*60*60;

删除一个cookie

要删除cookie，只需再次使用相同的名称设置它，指定一个空值或任意值，并将其max-age属性设置为0。请记住，如果你已经为cookie指定了路径和域属性，那么在删除它时也需要包含它们。

// 删除cookie
document.cookie = "firstName=; max-age=0";

// 删除cookie时指定路径和域
document.cookie = "firstName=; path=/; domain=example.com; max-age=0";

但是，要使用expires属性删除cookie，只需将其值(即过期日期)设置为已经过期的日期，如下所示。

document.cookie = "firstName=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";