Cookies和Session
cookies是什么?
cookie 就是浏览器储存在用户电脑上的一小段文本文件。cookie 是纯文本格式,不包含任何可执行的代码。
Cookie的作用是什么?
- HTTP协议是无状态的,对于一个浏览器发出的多次请求,WEB服务器无法区分 是不是来源于同一个浏览器。Cookie可以随HTTP请求一起被传递的额外数据, 用来识别身份.
- 记录用户使用历史
设想你某次登陆过一个网站,下次登录的时候不想再次输入账号了,怎么办?我们可以把这个信息可以写到Cookie里面,访问网站的时候,网站页面的脚本可以读取这个信息,就自动帮你把用户名给填了,能够方便一下用户。这也是Cookie名称的由来,给用户的一点甜头。
如何使用Cookie
- 服务器通过Set-Cookie 响应头设置Cookie 给客户端一串字符串
response.setHeader('Set-Cookie', 'sign_in_email=...;HTTPOnly')
- 浏览器得到Cookie之后,每次请求(访问)相同页面时都要带上Cookie
- 服务器读取Cookie就知道登录用户的信息(email)
- 客户端要在一段时间内保存这个Cookie
用户登录成功 得到一个cookie sign_in_emial
用户访问首页时 请求里面包含了Cookie
服务器读取 Cookie
面试的常见问题
- 用Chrome登录再用safari登录, safari会带上cookie吗?
当然不会 - 在windows系统中存在c盘的一个文件, 其他存在硬盘的一个文件.
- cookie可以作假吗? 可以(不安全)
- cookie 有有效期吗?
默认在用户关闭页面后关闭, 后台代码可以设置有效期
Session
Session是什么?
前面提到了Cookie有个缺点是可以人为修改,有一定的安全隐患. 于是诞生了Session.
如何使用Session?
一般来说Session是基于Cookie实现的,它利用一个sessionId把用户的敏感数据隐藏起来
- 将 SessionID(随机数) 通过 Cookie 发给客户端
- 客户端访问服务器时, 服务器读取 SessionID
- 服务器有一块内存(哈希表)保存了所有 Session
- 通过 Session 我们可以得到对应用户的隐私信息, 如 id, email
- 这块内存就是服务器上的所有 session
//预先在服务器端预留对象准备存储各种session
let sessions = {}
...
let sessionId = Math.random() * 100000
sessions[sessionId] = {sign_in_email: email}
response.setHeader('Set-Cookie', `sessionId=${sessionId};HTTPOnly`)
Tips: 使用随机数来做sessionId,其他人只能看到这串随机数,而真正的信息却保存在了服务器端的sessions对象里面。它就像一个密码簿一样,有效的信息与sessionId一一对应,这是服务器的事,保证了安全性。
LocalStorage
在HTML里面js文件里面的变量或对象,每当网页刷新的时候,就会死掉,又重新生成,虽然还是那个a,但是刷新后已经是另一块内存了。既然它也没变,我们为什么不把一些不重要的信息一直保留着呢,即使刷新了a还是那个a,也就是持久化存储的意义。以前使用Cookie做这个功能,不过Cookie每次发请求会把Cookie里面的所有东西都带着去服务器,加重内存的负担,请求响应时间长,所以html5给了一个新的API localStorage
LocalStorage本质上还是个hash,不过是存在于浏览器端的,不同于session存在与服务器端的hash。一般存储的都是没有用的或者不敏感的信息。
localStorage是window的全局属性,常用的有三个方法
//1. 添加键、值
var arr = [1,2,3]
localStorage.setItem('a', arr)
//2. 获得键、值
localStorage.getItem('a')
//3.清空localStorage
localStorage.clear()
注意,存储JSON对象时,它存的值全是字符串,如果想存储字符串我们需要用到JSON.stringify( )
1.LocalStorage跟http的值无关
2.http不会带上Localstorage的值
3.只有相同域名的页面才能互相读取LocalStorage
4.每个域名LocalStorage最大存储量为5mb
5.用来记录有没有提示过用户, 以及一些没用的信息,不能存密码
6.永久有效,除非用户清理缓存
SessionStorage(会话存储)
1234同上
5.用户关闭页面后失效(会话结束后)
有趣的问题
-
cookie和Session是什么关系?
Session是基于Cookie实现的, 因为Session必须将SessionID放到cookie里面然后发到客户端 -
cookie和localstorage的区别
cookie会被带到服务器中, 一般大小为4kb , 而localstorage不会, 一般大小为5mb. -
LocalStorage和SessionStorage关系
SessionStorage用户关闭页面后失效而LocalStorage不会.