JS cookie及其用法 – JavaScript高级教程 JScookie|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等。
【JS cookie及其用法 – JavaScript高级教程】为了从这个列表中获取单独的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指定了路径和域属性，那么在删除它时也需要包含它们。