cookie
和 session
是为了让 http
协议有状态。 session
是由服务器记录的一次会话,他会把 会话id
返回给客户端,客户端进行记录,就是 cookie
。
cookie-session-localStorage
部分内容参考来自WebStorage是什么?
经常会疑惑于三者之间的关系,下面就进行简单的梳理
cookie
- 特点
- 服务器通过set-Cookie头给客户端一串字符串
- 客户端每次访问相同域名的网页时,必须带上这段字符串
- 客户端要在一段时间内保存这个Cookie
- 一般存储大小在 4k 左右
- cookie在用户关闭页面(会话结束)候就会失效,但是后台代码可以任意设置cookie的过期时间
1
response.setHeader('set-Cookie',`login_email = ${email}`)
cookie解决的是,一个网站不用重复登录的问题
session
- 特点
- 将sessionID(随机数)通过Cookie发送给客户端
- 客户端访问服务器时,服务器读取sessionID
- 服务器有一块内存(哈希表)保存了所有的session
- 通过sessionID,我们可以得到对应用户的隐私信息,如id,email
- 这块内存就是服务器上的所有session
下面是单条数据的代码表示session解决的是,cookie明文可见并且用户可以随意更改cookie带来的安全问题。1
2
3cookie // { sessionId: 'random number' }
session // { sessionId: { loginin_email: 'xxxx@gmail.com' } }
sessionID // { loginin_email: 'xxxx@gmail.com' }
也可以说通常情况下,session是基于cookie实现的
localStorage
- 特点
- 跟HTTP无关
- HTTP不会带上localStorage的值
- 只有相同域名的页面才能读取localStorage(没有同源那么严格)
- 每个localStorage最大存储量一般为5M左右(每个浏览器不同)
- 常用场景: 记录有没有提示过用户,如更新等(没有用的信息,不能记录密码)
- localStorage永久有效,除非用户主动清理
sessionStorage
1.前面四点同localStorage
5.sessionStorage在用户关闭页面(会话结束)候就会失效
看似cookie和localStorage没关系,为什么被放在一起比较
因为开始没有localStorage这个API时,只能用cookie做跨页面访问和持久化存储。
还有一个忠告就是前端尽量不要操作cookie
- 本文作者: Jambo
- 版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!