JavaScript Cookie的读取和写入函数

下面我们来详细讲解如何读取和写入JavaScript Cookie。

什么是Cookie？

Cookie是在Web浏览器中存储的小数据文件。通常，当您第一次访问一个网站时，该网站将会创建一个Cookie，并存储在您的计算机上。当您访问该网站的其他页面时，该Cookie会被发送回该网站，以便它可以“记住”您的首选项或其他设置。

如何读取和写入Cookie？

写入Cookie

我们可以使用以下JavaScript代码来写入Cookie：

function setCookie(name, value, days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

参数说明：
- name：要设置的Cookie的名称
- value：Cookie的值
- days：Cookie的生命周期，以天数为单位

例如，我们可以使用以下代码将名称为“username”的Cookie设置为“John”，生命周期为1天。

setCookie("username", "John", 1);

读取Cookie

我们可以使用以下JavaScript代码来读取Cookie：

function getCookie(name) {
  var nameEQ = name + "=";
  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,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

参数说明：
- name：要读取的Cookie的名称

例如，我们可以使用以下代码来获取名称为“username”的Cookie的值：

var username = getCookie("username");

如果Cookie存在，则键“username”将包含“John”；否则，键“username”将为空。

示例说明

示例1：写入和读取Cookie

以下代码将存储名称为“username”的Cookie，值为“John”，生命周期为1天。并使用getCookie函数读取该Cookie，并在控制台输出其值。

function setCookie(name, value, days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

function getCookie(name) {
  var nameEQ = name + "=";
  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,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

setCookie("username", "John", 1);
var username = getCookie("username");
console.log(username); // 输出John

示例2：在不同子页面之间共享Cookie

以下代码演示了如何在不同的子页面之间共享Cookie。当我们在页面1上存储了Cookie时，我们可以在页面2上访问相同的Cookie。

页面1

function setCookie(name, value, days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

setCookie("username", "John", 1);

页面2

function getCookie(name) {
  var nameEQ = name + "=";
  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,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

var username = getCookie("username");
console.log(username); // 输出John

注意：需要在两个页面上包含setCookie和getCookie函数定义。