JavaScript-BOM-Cookie-的用法

JavaScript Cookie

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

username = John Doe

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

使用 JavaScript 创建 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

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

var x = document.cookie;

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

使用 JavaScript 更改 Cookie

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

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

旧 cookie 被覆盖。

使用 JavaScript 删除 Cookie

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

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

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

Cookie 字符串

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

JavaScript Cookie 示例

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

1. 用于设置 cookie 值的函数
2. 获取 cookie 值的函数
3. 用于检查 cookie 值的函数
4. 设置 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 技术文章