Cookies和Session

image

---

cookies是什么？

cookie 就是浏览器储存在用户电脑上的一小段文本文件。cookie 是纯文本格式，不包含任何可执行的代码。

Cookie的作用是什么?

1. HTTP协议是无状态的，对于一个浏览器发出的多次请求，WEB服务器无法区分 是不是来源于同一个浏览器。Cookie可以随HTTP请求一起被传递的额外数据, 用来识别身份.
2. 记录用户使用历史
   设想你某次登陆过一个网站，下次登录的时候不想再次输入账号了，怎么办？我们可以把这个信息可以写到Cookie里面，访问网站的时候，网站页面的脚本可以读取这个信息，就自动帮你把用户名给填了，能够方便一下用户。这也是Cookie名称的由来，给用户的一点甜头。

如何使用Cookie

1. 服务器通过Set-Cookie 响应头设置Cookie 给客户端一串字符串
   response.setHeader('Set-Cookie', 'sign_in_email=...;HTTPOnly')
2. 浏览器得到Cookie之后,每次请求(访问)相同页面时都要带上Cookie
3. 服务器读取Cookie就知道登录用户的信息(email)
4. 客户端要在一段时间内保存这个Cookie

用户登录成功 得到一个cookie sign_in_emial
用户访问首页时 请求里面包含了Cookie
服务器读取 Cookie

---

面试的常见问题

1. 用Chrome登录再用safari登录, safari会带上cookie吗?
   当然不会
2. 在windows系统中存在c盘的一个文件, 其他存在硬盘的一个文件.
3. cookie可以作假吗? 可以(不安全)
4. cookie 有有效期吗?
   默认在用户关闭页面后关闭, 后台代码可以设置有效期

Session

Session是什么?

前面提到了Cookie有个缺点是可以人为修改，有一定的安全隐患. 于是诞生了Session.

---

如何使用Session?
一般来说Session是基于Cookie实现的，它利用一个sessionId把用户的敏感数据隐藏起来

1. 将 SessionID(随机数) 通过 Cookie 发给客户端
2. 客户端访问服务器时, 服务器读取 SessionID
3. 服务器有一块内存(哈希表)保存了所有 Session
4. 通过 Session 我们可以得到对应用户的隐私信息, 如 id, email
5. 这块内存就是服务器上的所有 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.用户关闭页面后失效(会话结束后)

---

有趣的问题

1. cookie和Session是什么关系?
   Session是基于Cookie实现的, 因为Session必须将SessionID放到cookie里面然后发到客户端

2. cookie和localstorage的区别
   cookie会被带到服务器中, 一般大小为4kb , 而localstorage不会, 一般大小为5mb.

3. LocalStorage和SessionStorage关系
   SessionStorage用户关闭页面后失效而LocalStorage不会.