实例学习JavaScript读取和写入cookie

下面是实例学习JavaScript读取和写入cookie的完整攻略。

什么是Cookie？

Cookie是存储在用户计算机上的小文件，它通常包含有关用户的信息，例如网站首选项、购物车中的商品等等。网站可以通过JavaScript读取和写入cookie来存储这些信息。

如何读取Cookie？

要读取cookie，可以使用JavaScript中的document.cookie属性。该属性返回一个字符串，其中包含浏览器中所有cookie的名称和值。要获取特定cookie的值，可以编写以下函数：

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

该函数将传递的cookie名称作为参数，并返回该cookie的值。如果找不到该cookie，则返回null。下面是一个简单的示例说明如何使用getCookie()函数读取cookie：

var username = getCookie("username");
if (username) {
  console.log("Welcome back, " + username + "!");
} else {
  console.log("Please login.");
}

上述代码将尝试读取名为“username”的cookie，并根据cookie是否存在向控制台输出不同的消息。

如何写入Cookie？

要写入cookie，可以使用JavaScript中的document.cookie属性。您可以将cookie写入该属性，将cookie名称和值作为字符串连接。您还可以设置cookie过期时间、路径和域。以下是编写cookie函数的示例：

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

该函数将传递的cookie名称、cookie的值和cookie的过期时间（以天为单位）作为参数。最后一个参数是cookie的路径，这里将其设置为根路径/。下面是一个示例说明如何使用setCookie()函数创建一个可在7天内过期的cookie：

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

上述代码将在浏览器中创建一个名为“username”的cookie，其值为“John”，并将在7天后过期。

示例

以下是一个完整示例，该示例演示如何使用getCookie()和setCookie()函数读取和写入cookie：

// Check for existing username cookie
var username = getCookie("username");

if (username) {
  console.log("Welcome back, " + username + "!");
} else {
  // Prompt user to enter username
  var username = prompt("Please enter your username:");
  if (username) {
    // Save username as cookie
    setCookie("username", username, 7);
    console.log("Welcome, " + username + "!");
  }
}

上述代码将首先尝试读取名为“username”的cookie，如果找到cookie，则向控制台输出欢迎消息。如果cookie不存在，则提示用户输入用户名，并使用setCookie()函数将其保存为7天cookie。最后，向控制台输出欢迎消息。

另外，以下是一个演示如何使用setCookie()函数在单击按钮时创建cookie的示例：

<button onclick="setCookie('visits', '1', 365)">Accept</button>

上述代码将创建一个名为“visits”的cookie，其值为“1”，并且在一年后过期。