Cookie、sessionStorage、localStorage的区别

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

Cookie:

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

sessionStorage:

  • 仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持
  • localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据
  • cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
  • (key:本身就是一个回话过程,关闭浏览器后消失,session为一个回话,当页面不同即使是同一页面打开两次,也被视为同一次回话)

localStorage:

  • 在所有同源窗口中都是共享的;
  • cookie也是在所有同源窗口中都是共享的。
  • (key:同源窗口都会共享,并且不会失效,不管窗口或者浏览器关闭与否都会始终生效)

补充cookie的作用:

  • 保存用户登录状态。例如将用户id存储于一个cookie内,这样当用户下次访问该页面时就不需要重新登录了,现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间,当超过时间期限后,cookie就会自动消失。因此,系统往往可以提示用户保持登录状态的时间:常见选项有一个月、三个 月、一年等。
  • 跟踪用户行为。例如一个天气预报网站,能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的,当利用了cookie后就会显得很人性化了,系统能够记住上一次访问的地区,当下次再打开该页面时,它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成,所以这样的页面就像为某个用户所定制的一样,使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能,那么可以使用cookie来记录用户的选项,例如:背景色、分辨率等。当用户下次访问时,仍然可以保存上一次访问的界面风格。
上一篇:[JavaScript初级面试]10. WEB API - 存储


下一篇:cookie、sessionStorage和localStorage的使用