面经汇总（三）——浏览器和HTTP协议

最新推荐文章于 2022-06-20 21:48:38 发布

彭yanyan

最新推荐文章于 2022-06-20 21:48:38 发布

阅读量940

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42729843/article/details/105504469

版权

浏览器cookie，sessionStorage和localStorage相同点：cookie，sessionStorage和localStorage都是存储在浏览器端的。不同点：cookie数据始终在浏览器请求中被携带，在浏览器端和服务器端来回传递的；sessStorage和localStorage同属于webStorage，仅在本地保存，不会传递到服务器端存活时间：cookie...

摘要由CSDN通过智能技术生成

浏览器

多个标签页之间进行通信

1.通过localStorage

2.通过cookie+setInterval

浏览器

相同点：cookie，sessionStorage和localStorage都是存储在浏览器端的。
不同点：cookie数据始终在浏览器请求中被携带，在浏览器端和服务器端来回传递的；sessStorage和localStorage同属于webStorage，仅在本地保存，不会传递到服务器端
存活时间：cookie在设置的存活时间之前一直有效，sessionStorage在浏览器窗口关闭之前一直有效，localStorage始终有效
存储大小：cookie只有4KB，sessStorage和localStorage存储空间大一些
作用域：sessionStorage不在不同的浏览器窗口中共享，即使同一个页面，而cookie和localStorage在同源窗口（协议、域名、端口相同）中均共享

cookie数据存储在客户端，session数据存储在服务器。相比session，cookie不是很安全，别人可以分析存储在本地的cookie并进行cookie诈骗；而session，当访问增多时，会比较占用服务器性能。

总结：

Cookie受到浏览器同源策略的限制，A页面的Cookie无法被B页面的Cookie访问和操作。
Cookie最大存储容量一般为4KB，由服务器生成，在HTTP报文首部设置 Set-Cookie可以指定生成Cookie的内容和生命周期，保存在硬盘中；如果没有设置过期时间就是会话cookie，保存在内存中，关闭浏览器窗口就会失效。
Cookie存储在浏览器端，由于每次发送HTTP请求默认会把Cookie附到HTTP首部上去，所以Cookie主要用来身份认证，而不用来存储其他信息，防止HTTP报文过大。
Session存储在服务器，主要与Cookie配合使用完成身份认证和状态保持的功能。只有Cookie或只有Session都无法完成身份认证和状态保持的功能。

对Cookie和Session实现的身份认证和状态保持功能做一个举例。

假设现在有一个学生信息管理系统，此时数据库已经有学生的相关信息（账号、密码、个人信息等等）。

然后当学生登录这个系统，通过POST请求把用户的账户密码发送到后台服务器。当后台服务器接收到这些参数的时候，会跟数据库保存的记录进行匹配。

一旦匹配成功，也就是用户的账号密码都正确的情况下，这个时候后台服务器会生成Session（一个为客户端开辟存储空间，用来保存会话的状态信息），并生成一个相应的SessionID，可以是用户名或者其他能够唯一标识用户的字段。然后后台服务器会返回响应告知客户端登录成功，可以进行后续的操作。此时，后台服务器会在HTTP响应报文中添加一个字段 Set-Cookie，它的值是当前Session的SessionID，（这个SessionID是指向我们当前的那个Session的，在Node的Express中express-session会封装好这个过程）当然还会设置Cookie的其他属性，比如说过期时间 Expires等等。

当浏览器接收到这个HTTP响应报文的时候，就会在本地设置一个Cookie，它的过期时间由响应报文中 Set-Cookie中的 Expires字段的值决定，如果为空，则关闭浏览器（即会话结束时）后失效。

之后，每次向后台服务器发送请求的时候，浏览器默认会把这个Cookie加在HTTP请求报文的Cookie中。这样，每次后台服务器接收到请求的时候，会根据Cookie中的SessionID去找到我们的Session。

假如这个SessionID映射得到Session，那么这个时候说明浏览器是已经登录过了。于是，就可以进行后续的一些相关的操作。

另外，值得一提的是，Session机制决定了当前客户只会获取到自己的Session，而不会获取到别人的Session。各客户的Session也彼此独立，互不可见。也就是说，当多个客户端执行程序时，服务器会保存多个客户端的Session。获取Session的时候也不需要声明获取谁的Session。

这就是Cookie和Session做状态保持和身份验证的一个具体的例子

多个标签页之间进行通信

1.通过localStorage

在一个标签页中设置localStorage，在另一个标签页中监听Storage事件。

关于触发Storage事件：

storage事件，针对都是非当前页面对localStorage进行修改时才会触发，当前页面修改localStorage不会触发监听函数。
在对原有的数据的值进行修改时才会触发，比如原本已经有一个key会a值为b的localStorage，你再执行localStorage.setItem('a', 'b')代码，是不会触发storag事件的。

标签页1

<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
	$(function(){  
		$("#btn").click(function(){  
			var name=$("#name").val();  
			localStorage.setItem("name", name); 
		});  
	});  
</script>

标签页2

<script type="text/javascript">
	$(function(){ 
		window.addEventListener("storage", function(event){  
			console.log(event.key + "=" + event.newValue);  
		});   
	});
</script>

2.通过cookie+setInterval

在一个标签页中将要传递的信息存储到cookie中，在另一个标签页中定时读取cookie

标签页1

<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
	$(function(){  
		$("#btn").click(function(){  
			var name=$("#name").val();  
			document.cookie="name="+name;  
		});  
	});  
</script>

标签页2

<script type="text/javascript">
	$(function(){ 
		function getCookie(key) {  
			return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];

最低0.47元/天解锁文章

彭yanyan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面经汇总（三）——浏览器和HTTP协议

浏览器cookie，sessionStorage和localStorage相同点：cookie，sessionStorage和localStorage都是存储在浏览器端的。不同点：cookie数据始终在浏览器请求中被携带，在浏览器端和服务器端来回传递的；sessStorage和localStorage同属于webStorage，仅在本地保存，不会传递到服务器端存活时间：cookie...
复制链接

扫一扫