基本概念

1. cookie：主要用来保存登录信息，比如登录某个网站市场可以看到“记住密码”这就是通过cookie中存入一段辨别用户身份的数据来实现的
2. sessionStorage：会话，是可以将一部分数据在当前的会话中保存下来，刷新页面数据依旧存在。但是页面关闭时，sessionStorage中的数据就会被清空。
3. localStorage：是HTML5标准找那个新加入的技术，当然早在IE6时代就有一个userData的东西用于本地存储，当时考虑到浏览器的兼容性，更通用的方案是flash，如今localStorage被大多数浏览器所支持。localStorage中的键值对总是以字符串的形式存储。localStorage类似sessionStorage，但其区别在于：存储在localStorage 的数据可以长期保留；
4. 补充：同源：协议相同/域名相同/端口相同

区别

1. 存储大小

cookie：一般不超过4k

sessionStorage：5M甚至更多

localStorage：5M甚至更多

2. 数据有效期

cookie:一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，如果设置了时间，cookie就会存储在硬盘中，过期失效

sessionStorage：仅在当前浏览器窗口关闭之前有效，关闭页面或者浏览器会被清除

localStorage：永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久删除

3. 作用域

cookie：在所有同源窗口中都是共享的

sessionStorage：在同一个浏览器窗口是共享的（不同浏览器，即使是统一页面也不共享）

localStorage：在所有同源窗口中共享

4. 通信

cookie：cookie在浏览器和服务器之间来回传递，如果使用cookie保存过多数据会造成性能问题

sessionStorage：仅在客户端（浏览器）中保存，不参与服务器的通信

localStorage：仅在客户端（浏览器）中保存，不参与服务器的通信

5. 应用场景

cookie：判断用户是否登录过网站，以便实现下次自动登录或记住密码；保存事件信息

sessionStorage：敏感账号一次性登录，单页面用的较多

localStorage：用于长期登录，适于长期保存在本地的数据