共同点：用于数据的存储。
区别：
1、是否需要添加到http请求头？
HTTP Cookie（cookie）：在客户端存储会话信息，要求服务器对任意HTTP请求发送set-cookie HTTP头作为响应的一部分，包含会话信息。例如set-cookie: name=value。然后浏览器会存储这样的会话信息，并在这之后，通过为每个请求添加cookie HTTP头将信息发送回服务器。如cookie:name=value。
Web Storage：无须将数据发回服务器。
2、作用范围
cookie：是绑定在特定域名下的，当设定了一个cookie后，再给创建它的域名发送请求时，都会包含这个cookie。这个限制保证了储存在cookie中的信息只能让批准的接受者访问，而无法被其他域访问。
sessionStorage：sessionStorage对象存储特定于某个会话的数据，可以跨越页面刷新而存在。它绑定于某个服务器会话，所以当文件在本地运行时是不可用的。对多页面应用有限制，因为数据只能由最初给对象存储数据的页面访问到。
localStorage：要访问同一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。
3、容量
cookie：每个域的cookie总数是有限的，各个浏览器之间各有不同。例如：
IE6以及更低版本限制每个域名最多20个cookie，IE7和之后版本每个域名最多50个；Firefox限制每个域最多50个cookie，Opera限制每个域最多30个cookie；Safari和Chrome对每个域的cookie数量限制没有硬性规定。
浏览器对cookie的尺寸也有限制，最好是4095B，尺寸限制影响到一个域下所有的cookie，而并非每个cookie单独限制。
Web Storage：5MB
4、失效时间
Cookie：设置expires来表示cookie何时应该被删除的时间戳。
sessionStorage：存储特定会话数据，在浏览器关闭后立即删除。
localStorage：数据保留到通过JavaScript删除或是用户清除浏览器缓存。