跳到主要内容

cookies、sessionStorage和localStorage 的区别

生命周期：​

  • localStorage（本地存储）生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。仅在客户端(即浏览器)中保存，不参与和服务器的通信

  • sessionStorage（会话存储）生命周期为页面会话期间可用，关闭页面或浏览器之后，那么所有通过sessionStorage存储的数据也就被清空了。

    作用域不同：不同浏览器无法共享localStorage或sessionStorage中的信息。

sessionStorage 和 localStorage 还有一个更大的不同点，在不同 tab 下 sessionStorage 是不共享的，而 localStorage 是共享的

存储大小：​

  • cookie：4KB左右
  • localStorage和sessionStorage：可以保存5MB的信息。

存储位置：​

  • cookie、localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
  • session才是存储在服务器

获取问题​

  • localStorage和sessionStorage是浏览器的本地缓存，只能在客户端浏览器中获取，无法在服务端获取
  • cookie保存在客户端，但是在服务端可以获取
    • 在请求的时候，cookie是跟随请求的发送给服务端的
    • 浏览器在发请求时，会自动把 Cookie 放在请求头里发送给服务器。

http请求：​

cookie：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题

localStorage和sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信

存储内容类型：

  • localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理；

获取方式：localStorage：window.localStorage；sessionStorage：window.sessionStorage；

应用场景：​

  • localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据；
  • sessionStorage：敏感账号一次性登录。
  • sessionStorage记录历史浏览记录次数

cookie

  • 多个子域名可以通过cookie共享数据, 单点登录
    • cookie的 domain属性设置为父级域名，父级的域名cookie会被子域所共享，拿到父级域名的登录状态，利用这个cookie的特点，可以实现单点登录

cookie的 domain属性设置为父级域名，并且父域的 cookie会被子域所共享。path属性默认为 web应用的上下文路径

利用 Cookie 的这个特点，没错，我们只需要将 Cookie的 domain属性设置为父域的域名（主域名），同时将 Cookie 的 path属性设置为根路径，将 Session ID（或 Token）保存到父域中。这样所有的子域应用就都可以访问到这个 Cookie

不过这要求应用系统的域名需建立在一个共同的主域名之下，如 tieba.baidu.com 和 map.baidu.com，它们都建立在 baidu.com 这个主域名之下，那么它们就可以通过这种方式来实现单点登录

  • 存放不敏感数据，如果存放敏感数据，可能会被非法js攻击获取到 （XSS攻击）
  • 保存用户的登录状态，登录是否过期，可以配置过期时间，控制cookie的生命周期

缺点：

  • 每次请求cookie都在请求头中，如果数据太多，会造成性能问题
  • 大小是4kb

cookie理解​

设置过期时间​

  • 设置 max-age 的时候可以不设置 `expires，两者只需要设置一个即可
  • Expires 和 Max-Age 都用于控制 Cookie 的过期时间，但：
    • Max-Age 优先级更高
    • 现代浏览器都支持 Max-Age
    • 只设置 Max-Age 就足够了
  • expires设置传Date日期类型
    • expires=Wed, 21 Oct 2025 07:28:00 GMT
  • max-age设置秒数即可
    • max-age=3600（1 小时后过期）

优先使用 max-age，设置简单，也无时区问题

SameSite作用​

SameSite 是浏览器的 Cookie 跨站发送策略，用来减少 CSRF 等跨站攻击风险

  • SameSite=Lax（默认推荐）
    • 大部分“安全的跨站请求”会带上 Cookie，但阻止危险请求
  • SameSite=Strict（最严格）
    • 任何跨站请求都不会带 Cookie。

获取cookie问题​

cookie保存在客户端，但是在服务端可以获取

  • 在请求的时候，cookie是跟随请求的发送给服务端的

  • 浏览器在发请求时，会自动把 Cookie 放在请求头里发送给服务器。

    • Cookie 是通过 HTTP 请求头自动携带的