好程序员web前端培训分享JavaScript学习笔记cookie

简介:

  好程序员web前端培训分享JavaScript学习笔记cookie,cookie 是一个以字符串的形式存储数据的位置
  每一个 HTTP 请求都会在请求头中携带 cookie 到服务端
  每一个 HTTP 响应都会在响应头中携带 cookie 到客户端
  也就是说,cookie 是不需要我们手动设置,就会自动在 客户端 和 服务端之间游走的数据
  我们只是需要设置一下 cookie 的内容就可以
  COOKIE 的存储形式
  cookie 是以字符串的形式存储,在字符串中以 key=value 的形式出现
  每一个 key=value 是一条数据
  多个数据之间以 ; 分割
// cookie 的形态'a=100; b=200; c=300;'
COOKIE 的特点
.存储大小有限制,一般是 4 KB 左右
.数量有限制,一般是 50 条左右
.有时效性,也就是有过期时间,一般是 会话级别(也就是浏览器关闭就过期了)
.有域名限制,也就是说谁设置的谁才能读取
使用方式
读取 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)}

相关文章
|
2月前
|
存储 Web App开发 安全
Cookie和session 及Web相关工具
Cookie和session 及Web相关工具
|
2月前
|
前端开发 JavaScript 区块链
连接区块链节点的 JavaScript 库 web3.js
连接区块链节点的 JavaScript 库 web3.js
|
2月前
|
存储 搜索推荐 安全
Cookie 探秘:了解 Web 浏览器中的小甜饼
Cookie 探秘:了解 Web 浏览器中的小甜饼
|
17天前
|
缓存 JavaScript 前端开发
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第4天】JavaScript的Web Workers和Service Worker增强了Web性能。Web Workers处理后台多线程,减轻主线程负担,但通信有开销,受同源策略限制。Service Worker则用于离线缓存和推送通知,需管理其生命周期、更新策略,并确保安全。两者都带来了挑战,但也极大提升了用户体验。通过理解和优化,开发者能构建更高效、安全的Web应用。
|
25天前
|
JavaScript 程序员 应用服务中间件
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(2)
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(2)
32 7
|
25天前
|
XML 存储 JavaScript
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(1)
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(1)
27 5
|
11天前
|
缓存 前端开发 JavaScript
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第10天】在Web开发中,Web Workers和Service Worker提升性能。Workers运行后台任务,防止界面冻结。Web Workers处理计算密集型任务,Service Worker则缓存资源实现离线支持。常见问题包括通信故障、资源限制、注册错误及缓存更新。通过示例代码展示了两者用法,并强调生命周期管理和错误处理的重要性。善用这些技术,可构建高性能的Web应用。
|
13天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
14 0
|
14天前
|
缓存 JavaScript 前端开发
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第6天】JavaScript的Web Workers和Service Worker增强了浏览器的性能处理和离线功能。Web Workers处理后台计算,减轻主线程压力,但通信有开销,受同源策略限制。Service Worker则能拦截网络请求,支持离线缓存和推送通知,但其生命周期和权限管理需谨慎处理。通过理解它们的工作原理和限制,开发者能创建更流畅、更健壮的Web应用。
|
24天前
|
缓存 JavaScript 前端开发
程序员必知:广告等第三方应用嵌入到web页面方案之使用js片段
程序员必知:广告等第三方应用嵌入到web页面方案之使用js片段
12 0