document.cookie 下载APP
章节索引 :

document.cookie

Cookie 是一个请求首部,其中含有先前由服务器通过 Set-Cookie 首部投放并存储到客户端的 HTTP cookies。

cookie 可以作为单独知识了解,这里其实介绍的是 document.cookie

1. document.cookie

通过 document.cookie 可以获取与设置 cookie 。

图片描述

document.cookie;

通过 document.cookie 获取到的 cookie 由 cookie 的名称和值组成,由等号=分隔,并且可以有多条,每条 cookie 之间用分号 ‘;’ 分隔。

3. 设置cookie

var cookie = 'cookie名称=cookie值';

document.cookie = cookie;

设置 cookie 采用键值对的形式。

对应的就是 cookie的名称cookie值

每次只能设置一条 cookie ,但可以同时设置这条 cookie的属性

如果需要设置多条 cookie ,则再次给 document.cookie 赋一个新值即可,但如果是相同名称的 cookie ,值就会被覆盖。

设置 cookie 的同时可以设置这条 cookie 的属性。

document.cookie = '名称=值; 属性1=属性值1; 属性2=属性值2';

看起来是可以设置多条 cookie 一样,其实只有第一对值才是 cookie 的值,后面跟的都是这条 cookie 的属性。

可以跟随的属性有:

  • path cookie 生效的路径
  • domain cookie 生效的域名
  • max-age 过期时间,单位是秒
  • expires 过期时间,为一个 UTC 时间
  • secure 是否只能通过 https 来传递这条 cookie

这些属性具体作用可以参考 cookie 相关的内容。

设置完属性可以通过开发者工具查看。

在开发者工具的 Application 面板,cookie 分类下,每一条 cookie 都可以看到对应的属性。

图片描述

5. 注意点

由于设置 cookie 是具有一定格式的,所以不能有字符来干扰这个格式。

var cookie = 'code=var a = 1; var b = 2;';

document.cookie = cookie;

这种情况下,cookie 就不符合预期了,被切断。

cookie 中不应该含有空格、分号、逗号这些符号。

借助 encodeURIComponent 方法,对 cookie 的值进行编码就可以避免这类问题。

var cookie = 'code=' + encodeURIComponent('var a = 1; var b = 2;');

document.cookie = cookie;

后续需要使用到这一条 cookie 的地方,再做一次解码操作即可。

注意:对字符串编码还可以使用 escape 方法,但已经从标准中移除,目前浏览器虽然还支持这个方法,但无法保证永远会保留这个方法,最好避免使用 escape 方法。

6. 小结

随着前端存储方案的增加,前端程序员访问 document.cookie 相对曾经减少了很多。

document.cookie 赋值可以增加一条 cookie,同时通过 ; 相隔,来设置这条 cookie 的属性。

当设置的 cookie 带有特殊字符的时候,如 ; 或者 =,应采用 encodeURIComponent 对内容编码,建议所有的 cookie 都进行编码。

前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源