JavaScript-BOM-Cookie-的用法

共计 3584 个字符，预计需要花费 9 分钟才能阅读完成。

Cookie 是计算机上存储在小文本文件中的数据。当 Web 服务器将网页发送到浏览器时，连接将关闭，服务器将忘记用户的所有内容。发明 Cookie 是为了解决“如何记住用户信息”的问题：
当用户访问网页时，他 / 她的名字可以存储在 cookie 中。
下次用户访问该页面时，cookie 会“记住”他 / 她的名字。
Cookie 以键值对形式保存，如：

username = John Doe

当浏览器从服务器请求网页时，属于该页面的 cookie 将添加到请求中。这样，服务器获取必要的数据以“记住”有关用户的信息。
如果您的浏览器已关闭本地 Cookie 支持，则以下示例均无效。

JavaScript 可以使用 document.cookie 属性创建，读取和删除 cookie。使用 JavaScript，可以像这样创建一个 cookie：

document.cookie = "username=John Doe";

您还可以添加到期日期（以 UTC 时间为单位）。默认情况下，在浏览器关闭时删除 cookie：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

使用 path 参数，您可以告诉浏览器 cookie 属于哪个路径。默认情况下，cookie 属于当前页面。

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

使用 JavaScript，cookie 可以像这样读取：

var x = document.cookie;

document.cookie 将返回一个字符串中的所有 cookie，如：cookie1 = value; cookie2 = 值; cookie3 = 值;

使用 JavaScript，您可以像创建 cookie 一样更改 cookie：

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

旧 cookie 被覆盖。

删除 cookie 非常简单。删除 cookie 时，不必指定 cookie 值。只需将 expires 参数设置为传递日期：

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

您应该定义 cookie 路径以确保删除正确的 cookie。如果您未指定路径，某些浏览器将不允许您删除 cookie。

document.cookie 属性看起来像普通的文本字符串。但事实并非如此。即使你将一个完整的 cookie 字符串写入 document.cookie，当你再次读出它时，你只能看到它的名称 – 值对。如果您设置了新 cookie，则不会覆盖较旧的 cookie。新的 cookie 被添加到 document.cookie，所以如果你再次阅读 document.cookie，你会得到类似的东西：cookie1 = value; cookie2 = value;
如果要查找一个指定 cookie 的值，则必须编写一个 JavaScript 函数来搜索 cookie 字符串中的 cookie 值。

在下面的示例中，我们将创建一个存储访客姓名的 cookie。访问者第一次到达网页时，将要求他 / 她填写他 / 她的姓名。然后将名称存储在 cookie 中。下次访问者到达同一页面时，他 / 她将收到欢迎信息。在这个例子中，我们将创建 3 个 JavaScript 函数：

用于设置 cookie 值的函数
获取 cookie 值的函数
用于检查 cookie 值的函数
设置 Cookie 的功能

首先，我们创建一个函数将访问者的名称存储在 cookie 变量中：

function setCookie(cname, cvalue, exdays) {var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

示例说明：
上述函数的参数是 cookie 的名称（cname），cookie 的值（cvalue）以及 cookie 到期之前的天数（exdays）。该函数通过将 cookiename，cookie 值和 expires 字符串相加来设置 cookie。
获取 Cookie 的功能
然后，我们创建一个 function 返回指定 cookie 的值：

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i < ca.length; i++) {var c = ca[i];
    while (c.charAt(0) == ' ') {c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {return c.substring(name.length, c.length);
    }
  }
  return "";
}

功能说明：
将 cookiename 作为参数（cname）。使用要搜索的文本（cname +“=”）创建变量（名称）。解码 cookie 字符串，处理带有特殊字符的 cookie，例如 ’$’ 将分号上的 document.cookie 拆分为名为 ca 的数组（ca = decodingCookie.split（’;’））。循环通过 ca 数组（i = 0; i < ca.length; i ++），并读出每个值 c = ca [i]）。如果找到 cookie（c.indexOf（name）== 0），则返回 cookie 的值（c.substring（name.length，c.length））。如果找不到 cookie，则返回“”。
检查 Cookie 的功能
最后，我们创建一个函数来检查是否设置了 cookie。如果设置了 cookie，它将显示问候语。如果未设置 cookie，它将显示一个提示框，询问用户的名称，并通过调用 setCookie 函数将用户名 cookie 存储 365 天：

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

所有代码都在一起实现

function setCookie(cname, cvalue, exdays) {var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i = 0; i < ca.length; i++) {var c = ca[i];
    while (c.charAt(0) == ' ') {c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {return c.substring(name.length, c.length);
    }
  }
  return "";
}
function checkCookie() {var user = getCookie("username");
  if (user != "") {alert("Welcome again" + user);
  } else {user = prompt("Please enter your name:", "");
    if (user != "" && user != null) {setCookie("username", user, 365);
    }
  }
}

上面的示例 checkCookie()在页面加载时运行该函数。
更详情的 Cookie 技术文章

JavaScript Cookie

使用 JavaScript 创建 Cookie

使用 JavaScript 阅读 Cookie

使用 JavaScript 更改 Cookie

使用 JavaScript 删除 Cookie

Cookie 字符串

JavaScript Cookie 示例

Just My Socks（注册教程内含优惠码）