Cookie session localStorage sessionStorage的区别

今天跟大家聊一聊本地化存储的方式,由于我最近在面试的过程中经常被问到本地化存储的区别,现在在本篇博文中做一个记录。

开始之前,首先做一个分类:

  • 客户端存储: Cookie、 localStorage、 sessionStorage
  • 服务器端存储:session

1.session

session是在服务器端进行存储的一种方式,在客户端我们没有可以直接访问session的API。session的数据一般是放在内存中的,常见的应用场景是:身份验证。

在写后端代码的时候,写登录接口login中我们会把用户的信息存放在session中,对应的代码如下:我们将成功登录的用户的信息存储session中,session支持键值对的存储方式。

session.setAttribute("user", user);
session.setMaxInactiveInterval(0);

在客户端访问网页的时候,有些页面只有在登录状态的时候进行访问,我们可以设计一个认证接口 authentication,通过判断session中是否存有用户信息,来完成身份验证的功能。

public String authentication(HttpSession session) {
    User user= (User) session.getAttribute("user");
    if(user!=null){
        return "身份验证成功";
    }else {
        return "身份验证失败";
    }

}

session通常的使用场景包含身份验证,由于session的存储并不存在限制,但是也不是什么数据都可以存放的。

2.cookie

cookie的数据是在浏览器端存储的,在浏览器的安装目录下,会有一个 cookie 文件夹来存放各个域下设置的cookie。 了解cookie首先我们要知道cookie到底是什么?

2.1 cookie是什么

cookie从下面的图片看的话,是属于name=value的组成形式,其本质上是一个字符串,多个cookie通过; 的形式分割。但是浏览器有限制:每个域名下最多存储20个cookie信息 image.png

2.2 cookie是如何产生的

我们前端提到了cookie是在浏览器存储的,那么他是怎么产生的呢?从浏览器产生出来的吗?

答案是:服务器端和客户端均可以设置cookie

2.2.1 服务器端设置

服务器端通过响应头set-cookie可以完成cookie的设置,设置的格式为: key=name; expires=Thu, 25 Feb 2022 04:19:00 GMT; domain=XXX.XXXX.com; path=/; secure; HttpOnly,- 一个set-Cookie字段只能设置一个cookie,当你要想设置多个 cookie,需要添加同样多的set-Cookie字段。格式中的一些字段,我会在下一小节中介绍。

2.2.2 客户端设置

客户端可以设置的前提是cookie没有设置HttpOnly属性,我们可以通过JS代码访问document.cookie读取到当前域名下的cookie信息。设置时让document.cookie=XXX,注意这种方式会添加当当前已有的cookie下,并不会覆盖以前的cookie信息。

2.2 cookie的属性

cookie就是一串字符串,那么cookie包括什么属性:

  • expires expires选项用来设置“cookie 什么时间内有效”。

expires是HTTP1.0的属性,在新的HTTP1.1协议中可以通过max-age来设置cookie的失效时间

  • max-age:设置的是秒
  • expires:设置的是未来的一个时间,
  • domain path domain是域名,path是路径,两者加起来就构成了 URL,domainpath一起来限制 cookie 能被哪些 URL 访问。 通俗来说,就是这两个选项决定了cookie什么时候会被浏览器自动添加到请求头部中发送。
  • secure secure选项用来设置cookie只在确保安全的请求中才会发送。当请求是HTTPS或者其他安全协议时,包含 secure 选项的 cookie 才能被发送至服务器。
  • httpOnly 默认情况下,客户端是可以通过js代码去访问(包括读取、修改、删除等)这个cookie的。当cookiehttpOnly选项时,客户端则无法通过js代码去访问(包括读取、修改、删除等)这个cookie

3.localstorage

localstorage是HTML5新增的本地化存储方式,存储在电脑的本地硬盘中,是一张HASH表。其存储的生命周期是永久的,除非用户手动清除,否则会一直存在。支持的存储大小为5MB,存储的键和值都是字符串类型,所以一般需要通过JSON.stringfy()进行序列化。

4.sessionStorage

sessionStorage和localstorage很多方面都非常相似,除了生命周期不同:其失效时间是当浏览器或者对应的Tab标签页关闭。 这里需要着重解释一下关闭Tab标签页sessionstorage失效,假设我们当前在第一个标签页下的sessionStorage中存储了一段信息,如下图所示: image.png

现在我们在搜索页面进行检索,如果跳转的方式是在当前的Tab标签页下打开,那么我们仍然可以访问到sessionStorage中的信息,如下图:

image.png

在同一个标签页下,刷新页面,sessionStorage中存储的信息不会丢失。

注意:如果在当前标签页A下,我们跳转到了一个新的Tab标签页面B,那么A中sessionStorage中存储的信息在B中是访问不到的。原因是:我们已经离开了Tab标签页A,相当于关闭了A的会话。 当刷新页面的时候不会数据不会丢失。

以上的浏览器端本地化存储方式都受到浏览器同源策略的约束。

~暂时记录这么多,后续会再进行更新的哈。

最后附上参考资料:

  1. segmentfault.com/a/119000000…
  2. juejin.cn/post/684490…