博客

如何使用jQuery来设置和取消cookie

  • Post category:jquery

使用jQuery来设置和取消cookie的步骤可以分为两步，分别是：

  1. 设置cookie
  2. 取消cookie

下面分别给出详细的说明。

一、设置cookie

设置cookie的方法可以使用jQuery插件jQuery.Cookie，其提供了很多便捷的方法。具体方法如下：

  1. 引入jQuery库和jQuery.Cookie插件
<!-- 引入jQuery库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 引入jQuery.Cookie插件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
  1. 设置cookie
// 设置一个名为user，值为John的cookie，有效期为7天
$.cookie('user', 'John', { expires: 7 });

上述代码中，使用$.cookie()方法来设置cookie，接收三个参数：cookie名、cookie值和cookie选项。其中，cookie选项包括cookie的有效期（expires）、cookie的路径（path）和cookie的作用域（domain）等。

二、取消cookie

取消cookie的方法可以使用jQuery.Cookie插件提供的删除cookie方法。具体方法如下：

// 删除名为user的cookie
$.removeCookie('user');

上述代码中，使用$.removeCookie()方法来删除指定名字的cookie。如果想删除所有的cookie，则可以使用以下代码：

// 删除所有的cookie
$.removeCookie();

至此，使用jQuery来设置和取消cookie的攻略就讲解完毕。

下面给出两条示例说明：

示例一：设置cookie并读取

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Cookie示例一</title>
  <!-- 引入jQuery库 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <!-- 引入jQuery.Cookie插件 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
  <button id="setCookie">设置cookie</button>
  <button id="getCookie">读取cookie</button>
  <button id="clearCookie">删除cookie</button>
  <script>
    $('#setCookie').on('click', function() {
      $.cookie('user', 'John', { expires: 7 });
      console.log('cookie已设置');
    });

    $('#getCookie').on('click', function() {
      const user = $.cookie('user');
      if (user) {
        console.log(`cookie的值为${user}`);
      } else {
        console.log('cookie不存在');
      }
    });

    $('#clearCookie').on('click', function() {
      $.removeCookie('user');
      console.log('cookie已删除');
    })
  </script>
</body>
</html>

示例二：取消cookie

$.removeCookie('user');

以上两种方法均可以通过浏览器开发者工具查看cookie是否存在，具体位置在浏览器的Application（应用）标签中的Cookies（cookie）目录下。

Tags: