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记录了用户曾经浏览过的商品,方便随时进行比较.

原文地址:https://www.cnblogs.com/taoxiaodan/p/6385358.html