JS操作cookie
原创
一、 Cookie
本篇文章主要讲述对cookie的操作，如 设置、读取、检查、删除 。
首先了解下cookie的基本知识：
关于cookie
Cookie，有时也用其复数形式
Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。
组成
Cookie是一段 不超过4KB 的小型文本数据，由 一个名称（Name）、一个值（Value）
和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成。
特点
- Cookie 存储数据在客户端浏览器
- 浏览器对于单个 Cookie 的大小有限制(4kb)以及对同一个域名下的总 Cookie 数量也有限制(20个)
- 可以在不登录的情况下，完成服务器对客户端的身份识别
二、 操作cookie
大致了解cookie后，发现cookie其实挺重要的，例如项目里面前后端交互，很多就是使用cookie来进行校验的。那在项目里面怎么使用呢？
1. 新建cookie.js
一般情况下，为了在项目里能友好的使用一个功能，那么就会将其封装，然后模块导出使用。此时，我们可以在目录下新建文件夹util，在util中将各种封装的工具类放入。此时我们可以在
util 下新建 cookie.js 文件。
2. 设置cookie
这类使用场景较多，例如登录或将部分信息存储到cookie等场景都会用到。
新建 setCookie 方法，将常用的内容放到参数中，如： key, value, 过期时间等。我们以这三个参数为例，那么设置 cookie 的方法如下：
// 设置cookieexport function setCookie(c_name, value, expire_days) { let exDate = new Date(); exDate.setDate(exDate.getDate() + expire_days); document.cookie = c_name + '=' + encodeURIComponent(value) + ';expires=' + exDate.toUTCString() + ';path=/';}3. 读取cookie
顾名思义，读取，不需要改变什么，那么只需要知道要读取的 cookie 名即可，如果没有找到则返空处理：
export function getCookie(c_name) { let c_start = null; let c_end = null; if (document.cookie.length > 0) { c_start = document.cookie.indexOf(c_name + '='); if (c_start !== -1) { c_start = c_start + c_name.length + 1; c_end = document.cookie.indexOf(';', c_start); if (c_end === -1) c_end = document.cookie.length; return decodeURIComponent(document.cookie.substring(c_start, c_end)); } } return '';}4. 检查cookie
同样，只需要 cookie 名即可知道是否存在此cookie：
// 检查cookieexport function checkCookie(c_name) { let username = getCookie(c_name); if (username !== null && username !== '') { return true; } else { return false; }}5. 清除cookie
在进行退出登录等操作时，一般我们需要将 cookie 进行清除，操作比较简单，接收到要清除的 cookie 名后操作即可，如下：
// 清除cookieexport function clearCookie(name) { setCookie(name, '', -1);}三、 具体使用
在对 cookie 进行了这四个方法处理后，一般的业务场景都可满足。那么怎么使用呢？
以 vue 为例，使用方法如下：
1. 引入挂载
在 main.js 中操作：
// ...import Vue from 'vue'// 引入import { setCookie, getCookie, checkCookie, clearCookie } from '@/util/cookie'// 挂载到Vue实例上Vue.prototype.$setCookie = setCookie;Vue.prototype.$getCookie = getCookie;Vue.prototype.$checkCookie = checkCookie;Vue.prototype.$clearCookie = clearCookie;2. 组件使用
在需要用到的组件，如登陆组件中，在登陆检验完毕后，后端返回了 cookie 值。在于后端商量好 cookie 名之后，便可设置：
// 例如 res 是拿到的后端的返回值let res = { code: 200, data: { value: 'ads12as1d32sa13d1sa2d13sa1f' }, msg: '登陆成功'};// 与后端写上 cookie 名，例如是：test_cookie_namelet cookieName = 'test_cookie_name';let cookieValue = res.data.value;// 设置 cookie，有效期1天this.$setCookie(cookieName, cookieValue, 1);当然，检查、读取、删除一样处理即可。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号