阅读 1464

Cookie、localStorage和sessionStorage的区别?🔥

image.png

这是我参与更文挑战的第5天,活动详情查看: 更文挑战


Cookie 介绍

由于 HTTP 是无状态的协议,不能保存每一次请求的状态,所以需要给客户端增加 Cookie 来保存客 户端的状态。 Cookie 的作用主要用于 用户识别 状态管理 。(比如网页常见的记住密码)

安全性

在 Cookie 传输和管理的时候,要确保 Cookie 的安全性,不被窃取。

  • Secure :仅在 HTTPS 安全通信时才会发送 Cookie 。
  • HttpOnly :使用 Cookie 不能被 Javascript 脚本访问(防止跨站脚本攻击 XSS 对 Cookie 信 息的窃取)。
  • SameSite防止跨站伪造 CORF 的攻击
    • Strict :浏览器完全禁止第三方请求携带 Cookie。
    • Lax :只能在 get 方法提交表单 情况或者 a 标签发送 get 请求 的情况下可以携带 Cookie。
    • None :默认,请求会自动携带上 Cookie。

webStorage基于HTML5规范

HTML5 提供了两种在客户端存储数据的新方法:localStorage和sessionStorage,挂载在window对象下。

webStorage是本地存储,数据不是由服务器请求传递的。从而它可以存储大量的数据,而不影响网站的性能。

Web Storage的目的是为了克服由cookie带来的一些限制,当数据需要被严格控制在客户端上时,无须持续地将数据发回服务器。比如客户端需要保存的一些用户行为或数据,或从接口获取的一些短期内不会更新的数据,我们就可以利用Web Storage来存储。

localStorage:

生命周期是永久性的。localStorage存储的数据,即使关闭浏览器,也不会让数据消失,除非主动的去删除数据。如果 想设置失效时间,需自行封装。

sessionStorage

生命周期是在浏览器相关

  • 关闭浏览器或者页面,sessionStorage 就会失效;
  • 页面刷新不会消除数据;
  • 只有在当前页面打开的链接,才可以访sessionStorage的数据,使用window.open打开页面和改变localtion.href方式都可以获 取到sessionStorage内部的数据;

总结:

特性CookielocalStoragesessionStorage
数据的生命期一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效除非被清除,否则永久保存仅在当前会话下有效,关闭页面或浏览器后被清除
存放数据大小4KB左右一般为5MB同localstroage
与服务器端通信每次都会携带在HTTP头中,发送给服务端。但是使用cookie保存过多数据会带来性能问题仅在客户端(即浏览器)中保存,不和服务器的通信同localstroage
文章分类
前端
文章标签