cookie，sessionstorage，localstorage区别

都是保存在浏览器端，且同源的，区别如下：

1.携带

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。

而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

2.路径

cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

3.存储大小限制

cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

4.数据有效期

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

5.作用域

sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

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

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

Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

---

cookie使用场景

cookie机制将信息存储于用户硬盘,因此可以作为全局变量,这是它最大的一个优点,它可以用于以下几种场合.

1.保存用户登录状态：

例如将用户ID存储于一个cookie内,这样当用户下次访问这个页面时就不需要重新登录了,现在很多论坛和社区都提供这样的功能,cookie还可以设置过期时间,当超过时间期限后,cookie就会自动消失,因此,系统往往可以提示用户保持登录状态的时间;觉选项有一个月,三个月,一年等.

 

2.跟踪用户行为：

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

3.定制页面：

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

4.创建购物卡：

正如在前面的例子中使用cookie来记录用户需要购买的商品一样,在结账的时候可以统一提交,例如淘宝网就使用cookie记录了用户曾经浏览过的商品,方便随时进行比较.