cookie
能存储内容较小,在4k左右,一般用作保存用户登录状态、记住密码,记住账号使用。不清除的话会一直存在,可以设置过期时间自动清除,设置的时候可以设置在不同的域下面。每次在和服务端交互都会放在header
里面,所以若是储存太多会影响性能。
localStorage
localStorage
生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage
信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
sessionStorage
sessionStorage
仅在当前会话下有效,关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。源生接口可以接受,亦可再次封装来对Object
和Array
有更好的支持。
区别
相同点:都是保存在浏览器端、且同源的;
1)cookie
数据始终在同源的http
请求中携带(即使不需要),即cookie
在浏览器和服务器间来回传递,而sessionStorage
和localStorage
不会自动把数据发送给服务器,仅在本地保存。cookie
数据还有路径(path
)的概念,可以限制cookie
只属于某个路径下;
2)存储大小限制不同
cookie
数据不能超过4K,同时因为每次http
请求都会携带cookie
、所以cookie
只适合保存很小的数据,如会话标识。sessionStorage
和localStorage
虽然也有存储大小的限制,但比cookie
大得多,可以达到5M或更大;
3)数据有效期不同
sessionStorage
:仅在当前浏览器窗口关闭之前有效;
localStorage
:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;
cookie
:只在设置的cookie
过期时间之前有效,即使窗口关闭或浏览器关闭;
4)作用域不同
sessionStorage
不在不同的浏览器窗口中共享,即使是同一个页面;
localstorage
在所有同源窗口中都是共享的;
cookie
也是在所有同源窗口中都是共享的;
5)存储位置:
localStorage
和sessionStorage
都保存在客户端,不与服务器进行交互通信
6)存储内容类型:
localStorage
和sessionStorage
只能存储字符串类型,对于复杂的对象可以使用ECMAScript
提供的JSON
对象的stringify
和parse
来处理
7)应用场景:
localStoragese
:常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据;
sessionStorage
:敏感账号一次性登录;
cookie
的作用:主要用于保存登录信息;
webstorage
是本地存储,存储在客户端,包括localStorage
和sessionStorage
web Storage
支持事件通知机制,可以将数据更新的通知发送给监听者;
web Storage
的api
接口使用更方便;
参考大佬:https://blog.csdn.net/weixin_42614080/article/details/90706499