cookie
- 什么是cookie
- 在客户端的一种会话跟踪技术,用于将网页中的数据保存到浏览器中
- cookie的生命周期
- 默认情况下生命周期是一次会话(浏览器被关闭)
- 如果通过
expires=设置了过期时间, 并且过期时间没有过期, 那么下次打开浏览器还是存在
- 如果通过
expires=设置了过期时间, 并且过期时间已经过期了,那么会立即删除保存的数据
- cookie注意点
- cookie默认不会保存任何的数据
- cookie不能一次性保存多条数据, 要想保存多条数据,只能一条一条的设置
- cookie有大小和个数的限制,个数限制: 20~50,大小限制: 4KB左右
- cookie作用范围
- 同一个浏览器的同一个路径下访问
- 如果在同一个浏览器中, 默认情况下下一级路径就可以访问
- 如果在同一个浏览器中, 想让上一级目录也能访问保存的cookie, 那么需要添加一个
path属性才可以:document.cookie = "name=zs;path=/;";
- 若二级域名与顶级域名一样，而三级域名不一样，需要加一个
domain属性才可以,如document.cookie = "name=zs;path=/;domain=wxm.com;";
H5新增存储方案
- SessionStorage和LocalStorage
- SessionStorage和LocalStorage也是用于存储网页中的数据的
- Cookie、 SessionStorage、LocalStorage区别
- 生命周期(同一浏览器下)
- Cookie生命周期: 默认是关闭浏览器后失效, 但是也可以设置过期时间
- SessionStorage生命周期: 仅在当前会话(窗口)下有效，关闭窗口或浏览器后被清除, 不能设置过期时间
- LocalStorage生命周期: 除非被清除，否则永久保存
- 容量
- Cookie容量: 有大小(4KB左右)和个数(20~50)限制
- SessionStorage容量: 有大小限制(5M左右)
- LocalStorage容量: 有大小限制(5M左右)
- 网络请求
- Cookie网络请求: 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
- SessionStorage网络请求: 仅在浏览器中保存，不参与和服务器的通信
- LocalStorage网络请求: 仅在浏览器中保存，不参与和服务器的通信
- 应用场景
- Cookie: 判断用户是否登录
- LocalStorage: 购物车
- sessionStorage: 表单数据
- 无论通过以上那种方式存储的数据, 切记不能将敏感数据直接存储到本地
// 存储
localStorage.setItem("name", "wxm");
// 移除
sessionStorage.removeItem("name");
// 修改
sessionStorage.setItem("name", "jason");
// 获取
value = sessionStorage.getItem("name");
// 清空
sessionStorage.clear();
