【重温JS】JavaScript 巩固基础-cookie

这是我参与8月更文挑战的第17天，活动详情查看：8月更文挑战

☆☆☆ 今天学习的内容: ( cookie ) !! ☆☆☆

可作为初学者的学习路线, 可参考一下, 学习进度也不是特别赶! 持续更新中

结合自己的理解, 用白话文简单又全面概括 JavaScript 学习过程中的基础知识点, 方便加深理解!

开始今天的学习吧! '打牢地基才能筑高楼'! 加油! 认真对待!!

1、梳理复习昨天知识点

正则实现表单验证
正则中的相关方法
- 正则表达式相关方法: .test()、 .exec()
- 正则中字符串的方法： .search(reg) .match() str.replace(原字符串,新字符串)
- 正则表达式方法练习
  - 字符串中的 替换
  - 局部查找标识: i全局查找标识: g
  - 去除字符串开始位置处的空白字符
  - 查找字符串中的数字，存入到数组中

cookie

什么是 cookie ？

就是会话跟踪技术

作用: 数据存储、数据共享是存在浏览器上的数据

会话：从浏览网站开始到结束的这个过程称为一次会话浏览器关闭表示会话结束
会话跟踪技术 ：客户端向服务器端请求数据，多次请求时，实现数据共享的过程，称为会话跟踪技术.

如图解释: m8-day14--cookie1

cookie 如何存取

取: document.cookie 取 cookie

存: document.cookie = "键=值" 键的名称可以按照标识符的命名规范值是一个字符串

documnet.cookie = "username = xn213"

字符串和对象之间类型转换

向 cookie 中存储数据时必须存字符串
将字符串转成对象： JSON.parse() '{"username":"xn213"}' '[{},{},{}]'
将对象转成字符串： JSON.stringify() [] {}

cookie 的生存期

生存期 ： cookie 数据在浏览器中保存的时间

如果不设置生存期，浏览器关闭，表示会话结束，cookie 数据自动删除
如果设置生存期，浏览器关闭，cookie 数据保存在浏览器上，生存期内 cookie 不会自动删除
如何设置生存期？？需要 expires 参数

document.cookie = "键=值;expires=过期时间" 过期时间格式：要求标准时间格式

删除 cookie

需要以相同的名字路径和域再设置一遍: 将某个键的值设置为 "" 或将生存期设置为 -1

使用 cookie 需要注意

1、cookie 存储的 数据安全性低 2、cookie 存储的 数据量小 最多存 4kb 数据一般不能超过50个cookie 3、cookie 不能跨文件夹访问 在 a 目录下存储的 cookie 在 b 目录下不能访问到 a 中的 cookie 数据

cookie 参数：

键必须
值必须

document.cookie = '键=值;expires=' + 生存期

封装 cookie

设置 cookie

获取 cookie

删除 cookie

修改 cookie : 需要以相同的名字,路径和域重新设置一次它的值

cookie 的具体使用方法

点击按钮, 存储 cookie 数据, 并设置生存期(生存期之前, cookie 不会过期)

<input type="button" value="存 cookie" id="btn-set-cookie">

var oBtn = document.querySelector("#btn-set-cookie")
oBtn.onclick = function() {
  var now = new Date();
  // 设置三天后的时间
  now.setDate(now.getDate() + 3)
  document.cookie = "username=xn213;expiires=" + now
}

打开浏览器, 查看是否有 cookie 数据

预告: 加油, 追梦人

【预告】: 接下来开始学习 ES6 的强大功能, 提升开发逼格..

学习就是一个不断进行的过程, 坚持下去, 定有收获!

日积月累, 巩固基础, 早进大厂!

坚持很不容易, 坚持下来更不容易, 你真棒!

Calm Down & Carry On!

【重温JS】JavaScript 巩固基础-cookie

1、梳理复习昨天知识点

cookie

什么是 cookie ？

cookie 如何存取

cookie 的生存期

删除 cookie

使用 cookie 需要注意

cookie 参数 ：

cookie 的具体使用方法

预告: 加油, 追梦人

更多阅读:

cookie 参数：