今天跟大家聊一聊本地化存储的方式,由于我最近在面试的过程中经常被问到本地化存储的区别,现在在本篇博文中做一个记录。
开始之前,首先做一个分类:
- 客户端存储: 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信息
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,domain
和path
一起来限制 cookie 能被哪些 URL 访问。 通俗来说,就是这两个选项决定了cookie什么时候会被浏览器自动添加到请求头部中发送。 - secure
secure
选项用来设置cookie
只在确保安全的请求中才会发送。当请求是HTTPS
或者其他安全协议时,包含secure
选项的cookie
才能被发送至服务器。 - httpOnly
默认情况下,客户端是可以通过
js
代码去访问(包括读取、修改、删除等)这个cookie
的。当cookie
带httpOnly
选项时,客户端则无法通过js
代码去访问(包括读取、修改、删除等)这个cookie
。
3.localstorage
localstorage是HTML5新增的本地化存储方式,存储在电脑的本地硬盘中,是一张HASH表。其存储的生命周期是永久的,除非用户手动清除,否则会一直存在。支持的存储大小为5MB,存储的键和值都是字符串类型,所以一般需要通过JSON.stringfy()进行序列化。
4.sessionStorage
sessionStorage和localstorage很多方面都非常相似,除了生命周期不同:其失效时间是当浏览器或者对应的Tab标签页关闭。 这里需要着重解释一下关闭Tab标签页sessionstorage失效,假设我们当前在第一个标签页下的sessionStorage中存储了一段信息,如下图所示:
现在我们在搜索页面进行检索,如果跳转的方式是在当前的Tab标签页下打开,那么我们仍然可以访问到sessionStorage中的信息,如下图:
在同一个标签页下,刷新页面,sessionStorage中存储的信息不会丢失。
注意:如果在当前标签页A下,我们跳转到了一个新的Tab标签页面B,那么A中sessionStorage中存储的信息在B中是访问不到的。原因是:我们已经离开了Tab标签页A,相当于关闭了A的会话。 当刷新页面的时候不会数据不会丢失。
以上的浏览器端本地化存储方式都受到浏览器同源策略的约束。
~暂时记录这么多,后续会再进行更新的哈。
最后附上参考资料: