欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

cookie、localStorage、sessionStorage的区别

程序员文章站 2022-04-14 12:53:42
localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 共同点:sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。 区别: cookie数据始终在同源的http请求中携带(即使不需要) ......

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

 

共同点:sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。

区别:

  • cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,localStorage和sessionStorage仅保存在客户端,不与服务器进行交互通信。
  • cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据。sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
  • 存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。localStorage 和sessionStorage,但比cookie大得多,可以达到5M或更大。
  • localStorage支持事件通知机制,可以将数据更新的通知发送给监听者。 api 接口使用更方便。而cookie的原生接口不友好,需要程序员自己封装
  • 作用域不同,sessionStorage不在不同的浏览器窗口*享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
  • 应用场景:localStoragese:常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据。sessionStorage:敏感账号一次性登录;

localStorage提供了几个方法:

1.存储:localStorage.setItem(key,value)如果key存在时,更新value

2.获取 localStorage.getItem(key)如果key不存在返回null

3.删除 localStorage.removeItem(key)一旦删除,key对应的数据将会全部删除

4.全部清除 localStorage.clear() 使用removeItem逐个删除太麻烦,可以使用clear,执行的后果是会清除所有localStorage对象保存的数据。