共同点：都是保存在浏览器端，并且是同源的
不同点:

• 存储大小限制不同

cookie数据不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如回话标识。

webStorage虽然也有存储大小的限制，但是比cookie大得多，可以达到5M或更大

• 数据的有效期不同
  sessionStorage：仅在当前的浏览器窗口关闭之前有效；
  localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
  cookie：只在设置的cookie过期时间之前一直有效，即使窗口和浏览器关闭

• 作用域不同
  sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；
  localStorage：在所有同源窗口都是共享的；
  cookie：也是在所有同源窗口中共享的

---

Cookie

可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。

sessionStorage

本身就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话

仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，
localStorage始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

localStorage

同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效

localStorage在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的。

补充 : cookie的作用

保存用户登录状态。
例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。

cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。
因此，系统往往可以提示用户 保持登录状态 的时间：常见选项有一个月、三个 月、一年等。

跟踪用户行为。
例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。

如果每次都需要选择所在地是烦琐的，当利用了cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。
因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便定制页面。

如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。
当用户下次访问时，仍然可以保存上一次访问的界面风格。