了解并使用JavaScript Cookie

Cookie是一个简短的文本文件，在计算机上存储一些数据（大约4KB）。它们通常会记录一些信息，如对网站的偏好，提示用户在下次访问时改进网页。

Cookies是一种古老的方法，它可以防止客户使用第三方编写的脚本，如PHP、ASP等。

使用JavaScript，可以直接创建、检索和修改cookies，而且过程很简单。Cookie的名称、值和长度都可以被限制。

当一个页面从浏览器服务器被请求时，所有的cookie数据都会立即传输到应用服务器。Cookie不应该被用来存储敏感信息，如密码或信用卡号码，因为这些信息可能被恶意的用户获取。

各种类型的cookie

有三种类型的cookie。

第一方cookie - 这些是由您的网站创建的cookie，只能由您的网站读取。
第三方cookie - 这些cookie是由您网站上的第三方广告产生的。这些cookies只能在任何使用广告代码显示相同广告的网站上读取。
会话cookie - 这些cookie保存在您的浏览器上。它们在浏览器关闭时被销毁。

创建一个cookie

你可以使用document.cookie 属性制作一个cookie。在JavaScript中，你可以使用这个属性来设置、读取和删除cookies。

此外，任何与文档相连的cookie都由这个属性表示。我们使用document.cookie 属性，以name=value 的形式创建一个cookie。

使用这个属性，你一次只能设置一个cookie。

看一下下面的例子。

document.cookie = "UserName = fabuluosDesigns";

在创建cookie时，你必须使用一个内置的名为encodeURIComponent() 的javascript函数来使用特殊字符。

在保存cookie之前，这个函数会对特殊字符进行编码，如空白、分号和其他。

请看下面的例子。

document.cookie = "UserName=" + encodeURIComponent("fabulous designs");

同样地，当你想读取cookie时，你必须利用decodeURIcomponent() 函数来读取cookie的值。

Cookie的寿命仅限于当前浏览器会话的时间，因此，当用户退出浏览器时，它将被删除。

如果你需要在当前浏览器会话之后使用cookie，请使用适龄属性来指定其寿命（以秒为单位）。设置max-age ，设定cookie在从你的系统中删除之前可以存储的时间。

看一下下面的例子。这个cookie有一个30天的到期日。

document.cookie = "Username = coolDesign; max-age =" + 30 * 24 * 60 * 60;

也可以使用expires 元素来指定有效的cookie时间。这个cookie不会根据持续时间被销毁，但会采取cookie过期的实际日期（GMT/UTC格式）。

请看下面的例子。

document.cookie = "Username = stunningDesign; expires =Fri, 31 jan 2022 23:59:59 GMT";

在所有网页上，或在该目录的任何子目录中，总是有一个cookie。如果你指定path ，该cookie也将对该子目录下的所有网页可用。例如，如果路径被设置为/ ，cookie将在整个网站上可用，无论它是在哪个页面上创建的。

document.cookie = "Username = ExcellentDesign; Path = /";

如果你想让一个cookie在许多子域中发挥作用，请使用domain 属性。该cookie将只能在设置cookie的域中的页面上访问。

document.cookie = "Username = ExcellentDesign; path = /; domain = sample.com";

此外，如果设置了secure 属性，cookie将只通过安全（加密）连接传递，如HTTPS。

document.cookie = "Username = ExcellentDesign; path = /; domain = sample.com; secure";

读取一个cookie

document.cookie 属性简单地返回一个包含分号和空格分隔的所有cookie列表的字符串（即name=value 对，例如：firstName=Fabulous; lastName=Designs; ）。这个字符串不包括cookie的任何特征，如过期时间、路径、域名等。

要从这个列表中获得一个单独的cookie，请使用split() 方法将其分解为单独的name=value 对，然后搜索你想要的名字，如下面的例子所示。

function setCookie(name, value, daysToLive) {
    var cookie = name + "=" + encodeURIComponent(value);
    if(typeof daysToLive === "number") {
        cookie += "; max-age=" + (daysToLive*24*60*60);
        document.cookie = cookie;
    }
}

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");
        if(name == cookiePair[0].trim()) {
            return decodeURIComponent(cookiePair[1]);
        }
    }
    return null;
}

function checkCookie() {
    var UserName = getCookie("UserName");
    if(UserName != "") {
        alert("Welcome again, " + UserName);
    } else {
        firstName = prompt("Please enter your UserName:");
        if(UserName != "" && UserName != null) {
            setCookie("UserName", UserName, 30);
        }
    }
}

在上面的代码中，我们创建了三个函数。setCookie(),getCookie(), 和checkCookie() 。

setCookie()- 创建一个带有可选的max-age 属性的cookie。
getCookie()- 这个函数，读取一个cookie的值。
checkCookie()- 使用getCookie() ，这个函数检查UserName 是否被设置。如果设置了，它将显示一个问候信息。如果没有设置，它将提示用户输入他们的用户名，并使用setCookie() ，将其存储在cookie中。

更新一个cookie

一个cookie可以通过给cookie属性设置新的值而被更新。

请看下面的例子。我们将UserName cookie的max-age 属性从30天更新为365年。

document.cookie = "UserName=fabulousDesign; path=/; max-age=" + 30 * 24 * 60 * 60;

document.cookie = "UserName=beautifulDesign; path=/; max-age=" + 365 * 24 * 60 * 60;

删除一个cookie

要删除一个cookie，只需使用相同的name ，指定一个空值，或将其max-age 属性设置为0，就可以重新命名它。

document.cookie = "UserName=; max-age=0";

如果你指定了cookie的路径和域属性，你需要在删除它时将它们包括在内。

document.cookie = "UserName=; path=/; domain=example.com; max-age=0";

要使用expires属性删除一个cookie，只需将其值（过期日期）改为一个过去的日期，如下图所示。

document.cookie = "UserName=; path=/; expires=Thu, 01 feb 1990 00:00:00 GMT";

结论

如果禁用cookie，一些页面和服务将无法正常工作。Cookie对于网站的正常工作是必要的。尽管有必要征求用户的许可来使用cookies，但一些必要的cookies不需要许可就可以使用。

总之，使用网站不需要用户的许可，但使用网站信息则需要用户的许可。

了解并使用JavaScript Cookies