导航
HTML
CSS
JavaScript
浏览器 & 网络
版本管理
框架
构建工具
TypeScript
性能优化
软实力
算法
UI、组件库
Node
冷门技能
cookie与session
cookie和session区别
存储位置
使用方式
cooki机制：
- 生命周期
- 默认情况下，cookie保存在内存中，浏览器关闭就没了
- 设置过期时间后，cookie保存在硬盘上，关闭浏览器仍然存在，直到过期时间结束才消失。
- 数据类型
- cookie以文本形式保存在客户端，每次请求时都带上它。
session机制：
- 每次请求，服务器会检查是否有sessionid
- 有，服务器根据id返回对应session对象
- 无，服务器创建新的session对象，并把sessionid在本次响应中返回给客户端。
- 通常使用cookie方式存储sessionid到客户端
- 用户禁用cookie时，如何传递sessionid
- 服务端渲染：服务端可以使用URL重写，就是把session_id附带在每个网址后面
GET <http://www.xx.com/index.php?session_id=xxxxx>
POST <http://www.xx.com/post.php?session_id=xxxxx>
存储方式
存储大小
- cookie单个不超过4kb
- session没限制
安全性
- cookie（不安全）：Cookie欺骗，Cookie截获；
- session（相对安全）的原因：
- sessionID存在cookie中，首先得攻破cookie
- sessionID得有人登录，或启动session_start才会有，所以攻破cookie也不一定能得到sessionID
- 第二次启动session_start后，前一次的sessionID就失效，session过期后，sessionID也随之失效
- sessionID是加密的
cookie使用
// 设置
document.cookie = 'age=16'; // 每次只能设置一对cookie
// 获取
document.cookie // 获取全部cookie值，获取特定用循环
// 删除
document.cookie = 'name=xiaoming; max-age=-1000'; // 设置一个当前之前的时间即可
// 设置过期时间
var name = 'one_name';
var value = '123';
var exp = new Date();
exp.setTime(exp.getTime() + 60 * 2000);//过期时间 2分钟
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
console.log(name + "=" + escape(value) + ";expires=" + exp.toGMTString());
// 如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，
// 这种cookie简称会话cookie。
// 如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，
// 关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。
cookie限制（缺点）
- 大小限制：每个域名下每个最大4k
- 数量限制：每个域名下数量最多50个（IE6及以下版本20个）
- 浪费带宽：每次访问都要传送cookie给服务器
- 需要自己封装获取、设置、删除cookie的方法
session限制（缺点）
- Session保存的东西越多，就越占用服务器内存
- 依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全
更多
前端安全之XSS攻击
js创建cookie js设置cookie过期时间
WebStorage
localStorage 和 sessionStorage 区别
生命周期
- sessionStorage：
- 有“浏览器窗口”的概念，在同源的窗口中始终存在。只要这个浏览器标签或窗口没有关闭，刷新或进入同源另一个页面(不是同源也行)，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
- localStorage：
- 生命周期永久，除非主动删除**（js删除，清除浏览器缓存）**
存储大小
存储位置
存储类型
- 只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
使用场景
- localStorage：购物车
- sessionStorage：编辑页刷新页面，写的内容不丢失。
web storage 和 cookie 的区别
作用不同：web storage是用于本地大容量存储数据(存储量5MB);而cookie是用于存用户登录状态；
使用方式：web storage有setItem、getItem、removeItem、clear等方法，cookie需要我们自己来封装setCookie、getCookie、removeCookie。
参考