先了解一下两者之间的优缺点：

Web Storage的优缺点：
优点：
 存储空间更大。在IE下每个独立存储空间为10M，其它浏览器存储空间略有不同，但可以肯定的是至少要比cookie要大很多。
 存储内容不会与服务器发生任何交互，数据仅仅单纯地存储在本地。不用担心对服务器数据的影响！
 独立的存储空间，每个域都有自己独立的存储空间，各个存储空间又完全是独立的，所以不会对数据千万混乱。
缺点：
 存储在本地的数据未加密且永远不会过期，容易造成隐私泄漏！
 存储的数据类型只能是字符串；
Cookie 的优缺点：
优点：
 可配置到期规则 Cookie 可以在浏览器会话结束时到期，或者可以在客户端计算机上无限期存在，这取决于客户端的到期规则。
 不需要任何服务器资源 Cookie 存储在客户端并在发送后由服务器读取。
 简单性 Cookie 是一种基于文本的轻量结构，包含简单的键值对。
 数据持久性 虽然客户端计算机上 Cookie 的持续时间取决于客户端上的 Cookie 过期处理和用户干预，Cookie 通常是客户端上持续时间最长的数据保留形式。
缺点：
 大小受到限制 大多数浏览器对 Cookie 的大小有 4096 字节的限制，尽管在当今新的浏览器和客户端设备版本中，支持 8192 字节的 Cookie 大小已愈发常见。
 用户配置为禁用 有些用户禁用了浏览器或客户端设备接收 Cookie 的能力，因此限制了这一功能。
 潜在的安全风险 Cookie 可能会被篡改。用户可能会操纵其计算机上的 Cookie，这意味着会对安全性造成潜在风险或者导致依赖于 Cookie 的应用程序失败。另外，虽然 Cookie 只能被将它们发送到客户端的域访问，历史上黑客已经发现从用户计算机上的其他域访问 Cookie 的方法。您可以手动加密和解密 Cookie，但这需要额外的编码，并且因为加密和解密需要耗费一定的时间而影响应用程序的性能。
注意：Cookie 通常用于为已知用户自定义内容的个性化情况。在大多数此类情况中，Cookie 是作为“标识”而不是“身份验证”。因此，通常保护用于标识的 Cookie 的方法是在 Cookie 中存储用户名、帐户名或唯一用户 ID（例如 GUID），然后用以访问站点的用户个性化结构中的信息。
两者之间有一个共同点：都是保存在浏览器端,并且且同源的；
主要区别有以下几点：
1、cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递
2、cookie数据还有路径（path）的概念，可以限制。cookie只属于某个路径下、
3、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如回话标识。
4、webStorage虽然也有存储大小的限制，但是比cookie大得多，可以达到5M或更大
5、数据的有效期不同：
 sessionStorage：仅在当前的浏览器窗口关闭有效；
 localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
 cookie：只在设置的cookie过期时间之前一直有效，即使窗口和浏览器关闭
6、作用域不同：
 sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；
 localStorage：在所有同源窗口都是共享的；
 cookie：也是在所有同源窗口中共享的；
7、webStorage支持事件通知机制，可以将数据更新的通知发生给监听者
8、webStorage的API借口使用更方便；