Cookie 和Session、WebStorage

前言：cookie和Session都是用来跟踪浏览器用户身份的会话方式。

Cookie

  由于http是无状态的协议，一旦客户端和服务器的数据交换完毕，就会断开连接，再次请求连接，又需要重新验证，所以必须找到一种方法让服务端记住客户端， Cookie就可以实现这种操作。

Cookie 的缺点：

• 数据安全性较低；
• 只能存储字符串；
• 容量限制，约4KB。

---

Session

  由于 Cookie 是服务端下发给客户端由客户端本地保存的。换而言之客户端可以在本地对其随意操作，包括删除和修改。如果客户端随意伪造一个 Cookie 的话，对于服务端是无法辨别的，就会造成服务端被蒙蔽，构成安全隐患。

Session 的优点：

• 数据存在服务器端，相对于比较安全；
• 服务器将Session数据保存在服务器上，而将Session的用户id存储在客户端电脑上。
• Session存储的数据类型，除了资源外的数据类型都可以；
• Session文件没有大小限制；

session 的缺点：

• 存的东西越多，就越占用服务器内存；
• sessionID保存在cookie，依赖于cookie，如果禁用cookie，则要使用URL重写，不安全。

---

cookie 和session 的区别

1. cookie数据存放在客户的浏览器上，session数据放在服务器上。
2. cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗考虑到安全应当使用session。
3. session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie。
4. 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

---

WebStorage

  由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的WebStorage存储机制。

本地数据库是HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库，原本必须保存在服务器端数据库中的内容现在可以直接保存在客户端本地了，这大大减轻了服务器端的负担，同时也加快了访问数据的速度。

WebStorage的两种API

sessionStorage（会话存储）：存储的数据只在会话期间有效，关闭浏览器则自动删除。
localStorage（本地存储） ：本地永久性存储数据，只能手动将其删除或清空。

WebStorage 的优点：

• 存储空间更大，约5MB（高版本的浏览器中支持）；
• 不会传送到服务器，存储在本地的数据可以直接获取，减少http请求，节约带宽；
• 安全性较高。

WebStorage 的缺点：

• IE8以上的IE版本才支持localStorage这个属性
• 页面刷新不会消除数据，因此存储内容过多时页面会变卡；
• 在浏览器的隐私模式下面是不可读取的；
• 不能被爬虫抓取到。

localStorage 方法

localStorage 和 sessionStorage，可使用的API都相同

存储数据

localStorage.setItem('变量名'，'储存的数据')

读取数据

• 根据变量名读取数据

localStorage.getItem('变量名')

• 读取存储在localStorage上的所有数据

localStorage.valueOf()

• 取存储在localStorage上的第一条数据

localStorage.key(0)

删除数据

• 删除某个数据

localStorage.removeItem('变量名')

• 清空所有数据

localStorage.clear