JS封装cookie操作函数实例(设置、读取、删除)

2023年6月11日下午12:41 • JavaScript

下面我来为你详细讲解“JS封装cookie操作函数实例(设置、读取、删除)”的完整攻略。

什么是cookie

cookie 是浏览器用于存储用户信息的一种机制。当我们需要在应用程序之间共享数据时，可以使用 cookie 来存储数据。它是一种名为键-值对的数据结构，可以存储在浏览器中的本地电脑上，并在将来的会话之间使用。

如何进行cookie操作

我们可以使用 JavaScript 来设置、读取和删除 cookie。下面我会为你逐一介绍。

设置cookie

要设置 cookie，我们需要传入三个参数：cookie名称（键），cookie值（值）和可选的过期时间（以天数为单位）。以下是一个设置 cookie 的示例：

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

在此示例中，我们使用 document.cookie 属性来设置 cookie。

读取cookie

要读取 cookie，我们只需要提供要检索的 cookie 的名称（键）。以下是一个读取 cookie 的示例：

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

在此示例中，我们使用 document.cookie 属性来检索 cookie，并使用 split() 函数将 cookie 字符串拆分为 cookie 数组。然后我们循环遍历 cookie 数组，并提取我们要检索的 cookie。

删除cookie

要删除 cookie，我们只需要将 cookie 的过期日期设置为当前日期之前的一个月。以下是一个删除 cookie 的示例：

function deleteCookie(name) {
  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
}

在此示例中，我们使用 document.cookie 属性来删除 cookie，并将过期时间设置为遥远的日期。

示例说明

下面，我将通过两个示例来更详细地介绍 cookie 操作。

示例一：使用 cookie 存储用户信息

我们可以使用 cookie 来存储用户信息，比如用户名、密码等。当用户访问网站时，我们可以检查 cookie 中是否存在该用户的信息，并自动填充相应的表单。以下是一个示例：

var form = document.querySelector('form');
var usernameInput = document.querySelector('input[name="username"]');
var passwordInput = document.querySelector('input[name="password"]');
var rememberInput = document.querySelector('input[name="remember"]');

// 检查 cookie 中是否有用户信息
var username = getCookie('username');
var password = getCookie('password');
var remember = getCookie('remember');

// 如果存在用户信息，自动填充相应的表单
if (username) {
  usernameInput.value = username;
}
if (password) {
  passwordInput.value = password;
}
if (remember) {
  rememberInput.checked = true;
}

// 当用户提交表单时，将用户信息存储到 cookie 中
form.addEventListener('submit', function (event) {
  if (rememberInput.checked) {
    setCookie('username', usernameInput.value, 7);
    setCookie('password', passwordInput.value, 7);
    setCookie('remember', 'true', 7);
  } else {
    deleteCookie('username');
    deleteCookie('password');
    deleteCookie('remember');
  }
});

在此示例中，我们使用 getCookie() 函数来检查 cookie 中是否存在用户信息，并使用 setCookie() 函数将用户信息保存到 cookie 中。当用户提交表单时，我们将用户信息存储到 cookie 中，并在下次访问网站时自动填充表单。

示例二：使用 cookie 存储用户偏好设置

我们还可以使用 cookie 存储用户偏好设置，比如用户选择的语言、主题等。以下是一个示例：

var languageSelect = document.querySelector('#language-select');
var themeSelect = document.querySelector('#theme-select');

// 检查 cookie 中是否有用户偏好设置
var language = getCookie('language');
var theme = getCookie('theme');

// 如果存在用户偏好设置，自动选中相应的选项
if (language) {
  languageSelect.value = language;
}
if (theme) {
  themeSelect.value = theme;
}

// 当用户更改偏好设置时，将其存储到 cookie 中
languageSelect.addEventListener('change', function () {
  setCookie('language', languageSelect.value, 7);
});
themeSelect.addEventListener('change', function () {
  setCookie('theme', themeSelect.value, 7);
});

在此示例中，我们使用 getCookie() 函数来检查 cookie 中是否存在用户偏好设置，并使用 setCookie() 函数将用户偏好设置保存到 cookie 中。当用户更改偏好设置时，我们将其存储到 cookie 中，并在下次访问网站时自动选中相应的选项。