原生js设置cookie

在原生JavaScript中设置Cookie可以通过document.cookie属性来完成。以下是设置Cookie的基本语法：

document.cookie = "键=值; expires=过期时间; path=路径; domain=域名; secure; samesite";

基础概念

• 键值对：Cookie是以键值对的形式存储的，例如username=JohnDoe。
• expires：设置Cookie的过期时间，格式为GMT字符串。如果不设置，Cookie会在会话结束时（通常是关闭浏览器）被删除。
• path：指定Cookie的有效路径，默认是当前页面所在的目录。
• domain：指定Cookie的有效域名。
• secure：如果设置，Cookie只能通过HTTPS协议发送。
• samesite：控制Cookie在跨站请求中的发送行为，有三个值：Strict、Lax和None。

示例代码

以下是一个设置Cookie的示例：

// 设置一个名为username的Cookie，值为JohnDoe，过期时间为7天
document.cookie = "username=JohnDoe; expires=" + new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toUTCString() + "; path=/";

优势

• 简单易用：通过document.cookie可以直接设置和读取Cookie。
• 灵活性：可以设置过期时间、路径、域名等属性，控制Cookie的作用范围和生命周期。

类型

• 会话Cookie：不设置过期时间，浏览器关闭后自动删除。
• 持久Cookie：设置过期时间，浏览器关闭后仍然存在，直到过期时间到达。

应用场景

• 用户身份验证：存储用户的登录状态。
• 购物车数据：存储用户在购物车中的商品信息。
• 个性化设置：存储用户的个性化设置，如主题、语言等。

常见问题及解决方法

1. Cookie无法设置
   • 原因：可能是路径或域名设置不正确，或者浏览器禁用了Cookie。
   • 解决方法：检查路径和域名设置，确保浏览器允许Cookie。

• Cookie被篡改
  • 原因：Cookie是以明文形式存储在客户端的，容易受到XSS攻击。
  • 解决方法：对敏感信息进行加密，使用HttpOnly属性防止JavaScript访问。
• Cookie跨域问题
  • 原因：Cookie默认只能在设置它的域名下访问。
  • 解决方法：设置合适的路径和域名，或者使用跨域资源共享（CORS）技术。

通过以上方法，你可以有效地在原生JavaScript中设置和管理Cookie。