这次懂了不? Cookie、sessionStorage和localStorage

430 阅读2分钟

「这是我参与11月更文挑战的第10天,活动详情查看:2021最后一次更文挑战

我是Cookie呀!

  • Cookie 是储存在用户本地终端上的数据(通常经过加密),用来记录某些当页面关闭或者刷新后仍然需要记录的信息。在控制台用 「document.cookie」查看你当前正在浏览的网站的cookie。

  • Cookie 可以使用 js 在浏览器直接设置(用于记录不敏感信息,如用户名), 也可以在服务端通使用 HTTP 协议规定的 set-cookie 来让浏览器种下cookie。(比较常见的案例,比如清除全部cookie,然后刷新页面,可是尝试在network的Response headers试试找一找set-cookie)

  • Cookie的最大存储量为4k,所以大量数据不要存到cookie。

  • 每次网络请求 Request headers 中都会带上cookie。所以如果 cookie 太多太大对传输效率会有影响。

  • cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

  • 作用域:在所有同源窗口中都是共享的

  • 应用场景:一般用于判断用户是否登录过网站,以便实现下次自动登录或记住密码;保存事件信息

你知道浏览器本地存储吗?

在较高版本的浏览器中,js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。

所以说在html 中的Web Storage包括了两种存储方式:sessionStorage和localStorage。

我是 localstorage

  • localStorage用于持久化的本地存储,生命周期是永久性的,即使关闭浏览器,数据也不会消失,除非主动删除。

  • 存储量:存储的数据一条大小不超过5M,且数量没有限制。

  • 作用域:localStorage 在所有同源窗口中共享。

  • 通信方面:仅在客户端(浏览器)中保存,不参与服务器的通信。

  • 应用场景: 用于长期登录,适于长期保存在本地的数据

我是 sessionstorage

  • sessionstroage为会话存储,生命周期与浏览器相关,关闭浏览器页面或页面,数据消失。它存储的数据一条大小不超过5M,且数量没有限制。

  • 作用域: 在同一个浏览器窗口是共享的(不同浏览器,即使是统一页面也不共享)。

  • 通信方面:仅在客户端(浏览器)中保存,不参与服务器的通信。

  • 应用场景: 敏感账号一次性登录,单页面用的较多