js如何操作cookie-js教程-PHP中文网

js如何操作cookie

煙雲

发布： 2025-08-12 14:41:01

原创

872人浏览过

解决javascript操作cookie时的编码问题需在设置时使用encodeuricomponent编码，读取时使用decodeuricomponent解码，以避免特殊字符导致值被截断或解析错误；2. 确保javascript cookie安全的方法包括避免存储敏感信息、通过服务器端设置httponly和secure标志防止xss和中间人攻击、设置合理过期时间并验证来源，更安全的方式是使用服务器端session；3. 在react、vue、angular等框架中可分别使用js-cookie、vue-cookies、ngx-cookie-service等库简化cookie操作，这些库提供统一api并自动处理编码与部分安全问题，提升开发效率与可靠性。

js如何操作cookie

直接操作JavaScript中的Cookie，其实就像在浏览器的“小饼干罐”里存取数据一样。虽然简单，但也有些需要注意的地方。

解决方案

JavaScript操作Cookie主要通过

document.cookie

登录后复制

属性。这个属性允许你读取、设置和删除Cookie。

设置Cookie：

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

登录后复制

这条语句会创建一个名为

username

登录后复制

的Cookie，值为

John Doe

登录后复制

，过期时间设置为2024年12月18日，作用路径为根目录

登录后复制

。注意，

expires

登录后复制

指定过期日期，

path

登录后复制

指定Cookie生效的路径。如果不设置

expires

登录后复制

，Cookie会在浏览器会话结束时失效（会话Cookie）。如果不设置

path

登录后复制

，Cookie默认只在当前目录及其子目录下生效。

读取Cookie：

let cookies = document.cookie;
console.log(cookies); // 输出类似 "username=John Doe; otherCookie=value" 的字符串

登录后复制

document.cookie

登录后复制

返回一个包含所有Cookie的字符串，每个Cookie之间用分号和空格分隔。你需要自己解析这个字符串来获取特定Cookie的值。

解析Cookie：

function getCookie(name) {
  let cookieName = name + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(cookieName) == 0) {
      return c.substring(cookieName.length, c.length);
    }
  }
  return "";
}

let username = getCookie("username");
if (username != "") {
  console.log("Welcome " + username);
} else {
  console.log("Username not set");
}

登录后复制

这段代码定义了一个

getCookie

登录后复制

函数，用于根据Cookie的名称获取其值。它首先解码Cookie字符串，然后分割成单个Cookie，最后查找匹配的Cookie并返回其值。

删除Cookie：

删除Cookie实际上是将Cookie的过期时间设置为过去的时间。

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

登录后复制

这条语句将

username

登录后复制

Cookie的过期时间设置为1970年1月1日，从而使其立即失效。同样，

path

登录后复制

也必须与设置Cookie时使用的

path

登录后复制

一致，否则Cookie不会被正确删除。

PPT.CN,PPTCN,PPT.CN是什么,PPT.CN官网,PPT.CN如何使用

一键操作，智能生成专业级PPT

查看详情

JavaScript操作Cookie的局限性是Cookie的大小限制（通常为4KB）和安全性问题。对于更复杂的数据存储，可以考虑使用

localStorage

登录后复制

或

sessionStorage

登录后复制

。

如何解决JavaScript操作Cookie时的编码问题？

Cookie的值在存储时需要进行编码，读取时需要解码，以避免特殊字符引起的错误。通常使用

encodeURIComponent

登录后复制

和

decodeURIComponent

登录后复制

函数。

// 设置Cookie时编码
document.cookie = "itemName=" + encodeURIComponent("商品名称包含特殊字符") + "; path=/";

// 读取Cookie时解码
let itemName = decodeURIComponent(getCookie("itemName"));
console.log(itemName); // 输出 "商品名称包含特殊字符"

登录后复制

不进行编码解码，可能会导致Cookie值被截断，或者无法正确解析。

如何确保JavaScript Cookie的安全性？

Cookie的安全性是一个重要问题，尤其是存储敏感信息时。以下是一些建议：

不要在Cookie中存储敏感信息： 尽量避免直接存储密码、信用卡信息等敏感数据。
使用
HttpOnly
登录后复制
标志：设置
```
HttpOnly
```
登录后复制
标志后，Cookie只能通过HTTP(S)协议访问，JavaScript无法读取，可以防止XSS攻击。这个标志需要在服务器端设置，JavaScript无法直接设置。例如，在PHP中可以这样设置：
```
setcookie("cookieName", "cookieValue", ["httponly" => true]);
```
登录后复制
使用
Secure
登录后复制
标志：设置
```
Secure
```
登录后复制
标志后，Cookie只能通过HTTPS协议传输，可以防止中间人攻击。同样需要在服务器端设置。
设置合理的过期时间： 避免Cookie长期有效，减少被盗用的风险。
验证Cookie的来源： 在服务器端验证Cookie的来源，防止跨域攻击。

尽管如此，由于JavaScript可以操作Cookie，仍然存在一定的安全风险。更安全的选择是使用服务器端Session存储敏感信息。

如何在不同的JavaScript框架（如React、Vue、Angular）中使用Cookie？

虽然底层的Cookie操作都是基于

document.cookie

登录后复制

，但在不同的JavaScript框架中，通常会使用一些辅助库来简化Cookie的管理。

React： 可以使用
```
js-cookie
```
登录后复制
库。

import Cookies from 'js-cookie'

Cookies.set('name', 'value', { expires: 7 }); // 设置Cookie，过期时间为7天
let value = Cookies.get('name'); // 获取Cookie
Cookies.remove('name'); // 删除Cookie

登录后复制

Vue： 可以使用
```
vue-cookies
```
登录后复制
插件。

import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

this.$cookies.set('name', 'value', '7d'); // 设置Cookie，过期时间为7天
let value = this.$cookies.get('name'); // 获取Cookie
this.$cookies.remove('name'); // 删除Cookie

登录后复制

Angular： 可以使用
```
ngx-cookie-service
```
登录后复制
。

import { CookieService } from 'ngx-cookie-service';

constructor(private cookieService: CookieService) { }

ngOnInit(): void {
  this.cookieService.set('name', 'value', 7); // 设置Cookie，过期时间为7天
  let value = this.cookieService.get('name'); // 获取Cookie
  this.cookieService.delete('name'); // 删除Cookie
}

登录后复制

这些库或插件提供了更方便的API，可以更轻松地设置、读取和删除Cookie，并且通常会处理一些常见的编码和安全问题。选择哪个库取决于你的项目需求和个人偏好。

以上就是js如何操作cookie的详细内容，更多请关注php中文网其它相关文章！