网站首页 > 技术文章 正文
好程序员web前端培训分享JavaScript学习笔记cookie,cookie 是一个以字符串的形式存储数据的位置
每一个 HTTP 请求都会在请求头中携带 cookie 到服务端
每一个 HTTP 响应都会在响应头中携带 cookie 到客户端
也就是说,cookie 是不需要我们手动设置,就会自动在 客户端 和 服务端之间游走的数据
我们只是需要设置一下 cookie 的内容就可以
COOKIE 的存储形式
cookie 是以字符串的形式存储,在字符串中以 key=value 的形式出现
每一个 key=value 是一条数据
多个数据之间以 ; 分割
// cookie 的形态'a=100; b=200; c=300;'
COOKIE 的特点
00001. 存储大小有限制,一般是 4 KB 左右
00002. 数量有限制,一般是 50 条左右
00003. 有时效性,也就是有过期时间,一般是 会话级别(也就是浏览器关闭就过期了)
00004. 有域名限制,也就是说谁设置的谁才能读取
使用方式
· 读取 cookie 的内容使用 document.cookie
const cookie = document.cookieconsole.log(cookie) // 就能得到当前 cookie 的值
· 设置 cookie 的内容使用 document.cookie
// 设置一个时效性为会话级别的 cookiedocument.cookie = 'a=100'?// 设置一个有过期时间的 cookiedocument.cookie = 'b=200;expires=Thu, 18 Dec 2043 12:00:00 GMT";'// 上面这个 cookie 数据会在 2043 年 12 月 18 日 12 点以后过期,过期后会自动消失
· 删除 cookie 的内容使用 document.cookie
// 因为 cookie 不能直接删除// 所以我们只能把某一条 cookie 的过期时间设置成当前时间之前// 那么浏览器就会自动删除 cookiedocument.cookie = 'b=200;expires=Thu, 18 Dec 2018 12:00:00 GMT";'
COOKIE 操作封装
· 因为 js 中没有专门操作 COOKIE 增删改查的方法
· 所以需要我们自己封装一个方法
设置 cookie
/** * setCookie 用于设置 cookie * @param {STRING} key 要设置的 cookie 名称 * @param {STRING} value 要设置的 cookie 内容 * @param {NUMBER} expires 过期时间 */function setCookie (key, value, expires) {
const time = new Date()
time.setTime(time.getTime() - 1000 * 60 * 60 * 24 * 8 + expires) // 用于设置过期时间?
document.cookie = `${key}=${value};expires=${time};`}
读取 cookie
/** * getCookie 获取 cookie 中的某一个属性 * @param {STRING} key 你要查询的 cookie 属性 * @return {STRING} 你要查询的那个 cookie 属性的值 */function getCookie(key) {
const cookieArr = document.cookie.split(';')?
let value = ''?
cookieArr.forEach(item => {
if (item.split('=')[0] === key) {
value = item.split('=')[1]
}
})?
return value}
删除 cookie
/** * delCookie 删除 cookie 中的某一个属性 * @param {STRING} name 你要删除的某一个 cookie 属性的名称 */function delCookie(name) {
setCookie(name, 1, -1)}
猜你喜欢
- 2024-11-22 Http无状态、Cookie、Session、Token三者之间的区别
- 2024-11-22 零基础web前端学习路线,前端入门到精通
- 2024-11-22 太多人把Cookie当缓存用,我无语了
- 2024-11-22 JavaScript知识点——详细的Cookie总结
- 2024-11-22 node 中间层如何转存 cookie
- 2024-11-22 好程序员Web前端教程分享Cookie和Session有什么不同
- 2024-11-22 cookie、session、token区别
- 2024-11-22 Web前端cookie,sessionStorage的区别
- 2024-11-22 连环画解析“单点登录”原理,保证你能看懂
- 2024-11-22 前端中cookie和localStorage的区别
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 602℃几个Oracle空值处理函数 oracle处理null值的函数
- 594℃Oracle分析函数之Lag和Lead()使用
- 582℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 579℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 574℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 567℃【数据统计分析】详解Oracle分组函数之CUBE
- 554℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 548℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)