轻松搞定前端JS操作Cookie：入门指南

前端

2022-12-31 21:04:16

前端 JS 操作 Cookie 的奥秘：解锁个性化体验的钥匙

Cookie 的魔力

Cookie 虽然不起眼，但在前端 JS 开发中却扮演着举足轻重的角色。它们如同一个个小盒子，可以存储用户数据，在不同的 HTTP 请求间保持会话状态，让网站变得更加贴心和顺畅。

操作 Cookie 的步骤

揭开前端 JS 操作 Cookie 的秘密只需几步：

认识 Cookie： 它是服务器发送到浏览器的字符串，用于在客户端存储数据，比如用户首选项、登录信息或购物车内容。
设置 Cookie： 通过 document.cookie 属性，我们可以设置 Cookie 的值，具体格式为：name=value; expires=date; path=/，其中 name 是 Cookie 的名称，value 是值，expires 是过期时间，path 是 Cookie 的作用域。
获取 Cookie： 同样使用 document.cookie 属性，我们可以获取所有的 Cookie 信息。
删除 Cookie： 只需设置 Cookie 的过期时间为过去即可，例如：document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 GMT";。

实战应用

前端 JS 操作 Cookie 的应用可谓五花八门：

保持登录状态： 存储用户的登录信息，让下次访问自动登录。
记录用户首选项： 保存用户喜欢的语言、主题等设置，下次访问时自动加载。
实现购物车功能： 在用户浏览器中保存购物车商品信息，方便用户随时查看。
进行用户跟踪： 收集用户在网站上的活动信息，分析用户行为，优化网站体验。

// 设置 Cookie
document.cookie = "username=John Doe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";

// 获取 Cookie
var cookie = document.cookie;

// 删除 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

安全与限制

虽然前端 JS 操作 Cookie 十分便利，但也存在一些安全隐患和限制：