本文已参与「新人创作礼」活动，一起开启掘金创作之路。
浏览器的缓存机制提供了可以将用户数据存储在客户端的方式，可以利用 cookie 和 session 等跟服务端进行数据交互。
cookie 和 session
cookie 和 session 都是浏览器用来跟踪浏览器用户身份的会话方式。
两者之间的机制
- cookie 机制：若不在浏览器中设置过期时间，cookie 就存在内存中，生命周期随浏览器关闭而结束；如果设置了过期时间，cookie 则存在硬盘中，关闭浏览器仍然存在，直到过期消失；
- session 机制：当服务器收到请求需要创建 session 对象时，首先会检查客户端请求中是否包含 sessionid。如果有 sessionid，服务器将根据该 id 返回对应 session 对象。如果客户端请求中没有 sessionid，服务器会创建新的 session 对象，并把 sessionid 在本次响应中返回给客户端。通常使用 cookie 方式存储 sessionid 到客户端，在交互中浏览器按照规则将 sessionid 发送给服务器。
两者之间的区别
- cookie 保存在浏览器端，session 保存在服务器端
- cookie 只能以文本方式保存字符串类型，session 能支持任何类型的对象
- 单个 cookie 存储数据不能超过 4kb，session 大小无限制
- session 的安全性要高于 cookie，sessionID 存储在 cookie 中，要攻破 session 需先攻破 cookie
两者应用场景
- cookie：用于保存用户的浏览行为信息，变量值保存在客户端，不区分客户
- 判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）；
- 保存上次登录时间等信息；
- 保存上次查看的页面；
- 浏览计数
- session：用于保存每个用户的专用信息，变量值保存在服务器端，通过 sessionID 区分客户（登录后）
- 保存用户登录信息；
- 防止用户非法登录；
- 网上商城的购物车；
两者缺点
- cookie：
- 大小受限，单条 4k 以内；
- 用户可以禁用 cookie，使得功能受限；
- 安全性低；
- 每次访问都要传送 cookie 到服务器端，浪费带宽；
- session：
- session 保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。
- 依赖于 cookie（sessionID 保存在 cookie），如果禁用 cookie，则要使用 URL 重写，不安全
- 创建 session 变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用 session 变量将会导致代码不可读而且不好维护。
localStorage 和 sessionStorage
由于 cookie 存储的一些缺点（存储数据小、浪费带宽、操作要求高），为了克服 cookie 的一些限制，所以 H5 提出了改良后的 webStorage 存储机制（即 localStorage、sessionStorage）
两者机制
- sessionStorage：数据存储在本地的临时会话存储机制
- localStorage：数据存储在本地的长期存储机制
两者特性
- localStorage 生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据不会消失。除非主动删除，否则数据永久存在；sessionStorage 生命周期仅在当前会话有效。
- localStorage 和 sessionStorage 的存储数据大小一般都为 5MB；
- localStorage 和 sessionStorage 都存储在客户端，不与服务器端通信；
- localStorage 和 sessionStorage 都只能存储字符串类型，复杂对象的存储需要用到 JSON 的方法（stringify 和 parse）
两者的应用场景
- sessionStorage：用于敏感账号的一次性登录；
- localStorage：用于长期登录（判断用户是否已经登录）
webStorage 优点
- 存储空间更大：cookie 为 4kb，webStorage 为 5MB；
- 节省网络流量：webStorage 存储数据不会像 cookie 传送到服务器。
- 快速显示：本地获取数据会比服务器获取数据速度快得多；
- 安全性高：不用像 cookie 担心被截获的问题，但仍存在伪造的可能；
- 对数据操作方便：webStorage 提供了封装好的数据操作方法
webStorage 操作方法
- setItem (key, value) —— 保存数据，以键值对的方式储存信息。
- getItem (key) —— 获取数据，将键值传入，即可获取到对应的 value 值。
- removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
- clear () —— 删除所有的数据
- key (index) —— 获取某个索引的 key
webStorage 数据共享
数据共享问题 不同浏览器无法共享 localStorage 和 sessionStorage 存储的数据。
相同浏览器的不同页面可以共享相同的 localStorage（要相同域名和端口）；
不同页面和标签页无法共享 sessionStorage 信息，注意这里的页面和标签页指的是顶级窗口，如果一个标签页包含多个 iframe，那他们属于同源页面，可以共享 sessionStorage 信息
