Cookies 和 Session 以及 webStorage 的作用与区别

Cookeis 和 Session 利用了浏览器的缓存机制，都可以用来保存用户的数据，得以和服务器进行交互。
又因为 http 是无状态的，可以使用 Cookeis 和 Session 来保存用户的状态。

1.Cookeis（保存在浏览器端）

Cookies 是服务器向客户端发来的信息，以文本方式进行储存，每一次请求时携带 Cookeis

Cookies 机制 分为两种情况：
1.未设置过期时间：Cookies 会存在浏览器的内存中，当页面关闭时，Cookies 的生命周期即结束
2.设置了过期时间：此时 Cookies 会储存在硬盘中，直到时间过期。

1.Session（保存在服务器端）

Session 机制：
通常使用 Cookie 方式存储 SessionID 到客户端，当服务器收到需要创建 Session 的命令时，服务器会检测 客户端的 Cookeis 中 是否包含 SessionID。
1.Cookeis 中包含 SessionID：服务器根据 SessionID 返回对应的 Session 对象。
2.Cookeis 中不包含 SessionID：服务器会生成所需要的 Session 对象，并将 SessionID 返回给客户端

注意：如果用户禁用 Cookeis ，则要使用 URL 重写来发送 SessionID
通过response.encodeURL(url) 进行实现；API 对 encodeURL 的结束为，当浏览器支持 Cookie时，url 不做任何处理；当浏览器不支持 Cookie 的时候，将会重写 URL 将 SessionID 拼接到访问地址后。

3.二者区别

• 储存大小
  Cookie： 单个数据只能为 4kb。
  Session： 无限制。

• 存储内容
  Cookie： 只保存字符串类型
  Session：通过类似 hashMap 保存，可以存储任何类型的对象

• 安全性
  Cookie： 容易受到 “截取” 等安全问题
  Session：储存了 SessionID 在 Cookies 中，所以 需要通过 Cookies 后，才可能得到 SessionID (而且SessionID 是加密的)。其次 SessionID 需要有登录操作才会有，所以攻破了 Cookie 也不会有。

• 缺点
  Cookie：1.大小限制。 2.用户可操作 Cookie ，使功能受限。 3.安全性相对低。 4.每次访问都会传送 Cookie 给服务器。 5.使用复杂
  Session：1.当用户多时，使用其储存用户数据，给服务器的存储造成压力。 2.依赖于 Cookie，若 Cookie 禁用，则会重写 URL。3. Session 使用有很大随意性，大量使用会造成代码不易读

• 使用场景

Cookie：1.网站自动登录。 2.保存上一次登陆时间。 3.保存上传查看的页面。 4.浏览计数

Session：1.用于保存用户的专属信息，变量值保存在服务器端，通过 SessionID 来区分客户。
2.商城购物车。 3.保存用户登录信息 3.将某些数据放入session中，供同一用户的不同页面使用。

3.webStorage

webStorage（本地数据库） 为 HTML5 的新特性。其储存机制是对 Cookie 的改善。HTML5 不再使用 Cookie。

webStorage（本地数据库） 使用它可以再客户端本地建立一个数据库，使得原本必须保存在服务器端的数据，现在可以直接保存在浏览器中。这减轻了服务器的负担，加快了访问速度。

webStorage 分为 sessionStorage 和 localStorage

• sessionStorage：将数据保存在 session 中，可以在整个页面生命周期开始后至结束前存储你的数据，当你关闭当前窗口，数据就会消失
• localStorage：将数据保存在 本地设备（硬盘） 中，即使浏览器关闭，还是会一直存在。直到你手动删除数据

存储大小：二者的存储数据大小一般都是 5MB

存储位置：二者都保存在客户端，不与服务器进行交互通信。

存储内容：二者只能存储字符串类型，可以使用 JS 来进行处理

应用场景：localStoragese 常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage敏感账号一次性登录

优点

1. 储存空间更大（相对于Cookies）
2. 更加节省网络带宽，无需服务器请求
3. 速度更快
4. 安全性更好，无与服务端的数据传输，仍然可能存在伪造问题
5. 操作更加方便，提供了方便的 API

setItem (key, value) —— 保存数据，以键值对的方式储存信息。
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
clear () —— 删除所有的数据
key (index) —— 获取某个索引的key