沃梦达 / IT编程 / 前端开发 / 正文

用js读写cookie的简单方法(推荐)

以下是详细讲解“用js读写cookie的简单方法(推荐)”的完整攻略:

以下是详细讲解“用js读写cookie的简单方法(推荐)”的完整攻略:

1. 什么是cookie

1.1 定义

cookie 是一种在客户端存储数据的小文件。在 HTTP 协议中,Web 服务器可以向客户端发送一个 Set-Cookie 的响应头,来告诉客户端保存这个 cookie。之后客户端每次请求响应都会带上这个 cookie,用来告诉服务器用户是谁。

1.2 作用

cookie 主要有以下作用:

  • 保存用户在站点中的一些信息,如用户名、密码等。
  • 跟踪用户的行为,实现多个页面之间的状态保持,如购物车、喜欢列表等。
  • 持久化用户的登录状态,实现免密码登录等功能。

2. 读取cookie

在 JavaScript 中,可以用 document.cookie 来读取当前浏览器的所有 cookie,返回的结果是一个字符串类型,多个 cookie 之间用分号 ; 隔开。

示例 1:

假设当前页面的 domain 是 http://example.com,并且将下面这个 cookie 设置到了客户端。

document.cookie = "name=John Doe; expires=Thu, 18 Dec 2030 12:00:00 UTC; path=/";

那么通过如下方式就可以在 JavaScript 中读取这个 cookie 并打印出来:

console.log(document.cookie); // 输出 "name=John Doe"

3. 写入cookie

写入 cookie 可以用 document.cookie 来设置。

示例 2:

假设当前页面的 domain 是 http://example.com,我们要在客户端写入一个 cookie,将名字为 name 的 cookie 的值设为 John Doe

document.cookie = "name=John Doe; expires=Thu, 18 Dec 2030 12:00:00 UTC; path=/";

在上述代码中,name 是 cookie 的名字,John Doe 是 cookie 的值。expires 是一个可选的属性,用来决定 cookie 何时过期,它的值为一个 UTC 格式的日期字符串,比如 Thu, 18 Dec 2030 12:00:00 UTC 表示 cookie 将在 2030 年 12 月 18 日 12 点过期。path 是指 cookie 的作用路径,通常是网站的根目录 /,表示整个站点都可以访问这个 cookie。

4. 删除cookie

通过将 cookie 的 expires 属性设置为过去的日期,就可以删除 cookie。

示例 3:

假设当前页面的 domain 是 http://example.com,我们要删除客户端中名字为 name 的 cookie。

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

在上述代码中,name 是 cookie 的名字,=; 表示将 cookie 的值设为空字符串,expires 属性被设置为一个过去的日期,表示这个 cookie 已经过期,浏览器会自动删除它。

注意:为了确保删除 cookie 的成功,path 属性要和之前写入 cookie 的时候一样。

以上就是关于“用js读写cookie的简单方法(推荐)”的详细攻略,希望对你有帮助。

本文标题为:用js读写cookie的简单方法(推荐)