• cookie：存放于浏览器中的数据；常用于会话管理，用户设置，行为跟踪等。在js中可以通过document.cookie来进行设置，获取或删除等操作；不过cookie有许多明显的缺点：
  • cookie的大小限制在4KB；
  • cookie会伴随http请求一起被发送，会浪费网络带宽
  • cookie的正确操作比较困难
• webStorage：H5新增的API，数据存放于客户端本地内存中；sessionStorage和localStorage操作一致，而sessionStorage的有效期限为一次session会话（即一个tab页从打开到关闭之间的时间段），localStorage是没有失效时间的（即永久保存，删除需要手动处理）；

cookie : 是网站为了对用户身份做标识而存储在本地的数据。

1. 在同源的http请求中会被一同发送，因此会占用网络带宽。
2. 最大大小4KB
3. 以前每个域名支持20个，新版本的增加到50个
4. 生命周期为设置的过期时间，若不设置则到关闭浏览器为止。

localStorage：是HTML5新增的，不会将数据自动发送到服务器，仅存储在本地，并且会永久存储，除非用户主动删除，不然不会过期或者自动清除。

sessionStorage：大部分类同localStorage 除了生命周期持续到当前窗口关闭

后两者在不同浏览器的最大大小不同，因此一般以5M为上限较为安全。

• cookies:

  历史最悠久的客户端存储手段。由于 HTTP 是无状态的，服务端为了记住用户（如登录后的状态）的状态，会把一个 token 在用户登录后发给客户端。客户端在之后的请求中会带着这个 token 表明自己的身份。cookie 可以在浏览器中查看到，因此不应该存储敏感信息，并且浏览器对 cookie 有大小限制（一般为 5KB 左右），因此也不宜存储过多信息。

  可以通过 document.cookie 访问到 cookie。同一个域名下，cookie 是共享的，即可以作为跨标签共享数据的手段之一。

  可以通过 document.cooke=newCookie 来对 cookie 进行设置。cookie 的值是 key=value 的键值对。同时可以给 cookie 设置相应的过期事件、domain、是否通过 https 来传输。

• sessionStorage / localStorage

  HTML5 中增加的存储手段。两者之间的差别就是 sessionStorage 在网页关闭后就自动销毁了，而 localStorage 则会一直存在直到用户手动清除。sessionStorage 在跨标签页数据共享时会遇到问题（当 a 标签为 target="_blank" 的时候可以使用 sessionStorage 进行数据共享）。localStorage 则没有这个限制。两者都是存储 key=value 的键值对，其中 value 必须是字符串，一般在存储前会通过 JSON.stringify 进行转化。

参考文章: MDN Cookie

Cookies

网站为了对用户身份做标识而存储在本地的数据。在同源的http请求中会被一同发送，因此会占用网络带宽。最大大小4KB。以前每个域名支持20个，新版本的增加到50个。生命周期为设置的过期时间，若不设置则到关闭浏览器为止。

localStorage

HTML5新增的，不会将数据自动发送到服务器，仅存储在本地，并且会永久存储，除非用户主动删除，不然不会过期或者自动清除。

sessionStorage

有效期限为一次session会话（即一个tab页从打开到关闭之间的时间段）。

webStorage在不同浏览器的最大大小不同，因此一般以5M为上限较为安全。

Cookie：保存在浏览器端，若不设置过期时间，会随浏览器关闭而销毁，若设置过期时间，则直到过期时间结束才销毁，只能保存字符串类型，单个cookie不超过4k，http请求时数据会自动传递到服务器上
sessionStorage：保存在浏览器端，将数据保存在session对象中，浏览器关闭就会销毁
localStorage：保存在浏览器端，将数据保存在客户端本地的硬件设备，需手动关闭才会销毁