浏览器存储HTTP中的URL长度限制、cookie、sessionStorage和localStorage的区别和使用

浏览器存储HTTP中的URL长度限制、cookie、sessionStorage和localStorage的区别和使用

一、背景

1.1 问题描述

最近发现陈年旧码业务中有这样一种场景，从一个页面A点击【批量审核】后，跳转到审核详情页面B，B页面直接报警了，很多接口直接413了；如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cRqUyfBa-1655371951280)(https://myimg-1302777074.cos.ap-beijing.myqcloud.com/image-20220614212549251.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JNLWdqWA-1655371951282)(https://myimg-1302777074.cos.ap-beijing.myqcloud.com/image-20220614212650152.png)]

再来看看B页面链接如下：这个data参数数据量太大了竟然还用url参数传递

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3tgCq2JE-1655371951282)(https://myimg-1302777074.cos.ap-beijing.myqcloud.com/image-20220616160647908.png)]

1.2 问题分析

一看页面链接就觉得这链接参数传递不合理：为啥不合理，这里涉及知识点如下：HTTP中的url长度是否有限制？限制是多少？到底是哪里限制了URL的长度和大小？url限制大小那还能选择别的方案么？后端不添加接口的情况下，前端自己用什么方案搞定？

HTTP中的URL长度限制

HTTP协议不对URI的长度作事先的限制，服务器必须能够处理任何他们提供资源的URI，并且应该能够处理无限长度的URIs，这种无效长度的URL可能会在客户端以基于GET方式的请求时产生。如果服务器不能处理太长的URI的时候，服务器应该返回414状态码（此状态码代表Request-URI太长）。各浏览器的url传值的长度限制解决办法

说明当时前端技术方案选型存在问题，没有考虑周全；

注:服务器在依赖大于255字节的URI时应谨慎，因为一些旧的客户或代理实现可能不支持这些长度。

虽然协议中未明确对url进行长度限制，但在真正实现中，url的长度还是受到限制的，一是服务器端的限制，二就是游览器端的限制。

一、服务器端

在服务器端，主要是apache，jboss和nginx等，我在网上找到的调节方法可以参加下文：关于http请求url长度以及请求消息体长度的研究（一）（服务器端） ：

nginx ：设置参数：large_client_header_buffers，该参数对nginx服务器接受客户端请求的头信息时所分配的最大缓冲区的大小做了限制，也就是nginx服务器一次接受一个客户端请求可就收的最大头信息大小。这个头不仅包含 request-line，还包括通用信息头、请求头域、响应头域的长度总和。这也相当程度的限制了url的长度。 nginx服务器默认的限制是4K或者8K，这是根据服务器的硬件配置有关的，一般为内存一页的大小，目前大部分为4K，即4096字节。

nodejs：nodejs的http服务，设置url长度限制和headers的大小还是相对比较灵活的，用url.length来限制

二、游览器端

游览器的种类繁多，并且对URL的长度限制是有所差异的，具体如下：

游览器	最大长度（字符数）	备注
Internet Explorer	2083	如果超过这个数字，提交按钮没有任何反应
Firefox	65,536
chrome	8182
Safari	80,000
Opera	190,000
curl（linux下指令）	8167

再看看陈年旧码，审核详情页面B要用到页面A中被选中的要审核的信息，于是发现小旧同学应该是在做这个需求时候没有做好技术方案选型，用的方法是直接通过跳转url+参数形式，直接把B页面需要的参数从A页面带过去了，所以技术选型真的很重要，解决问题前不能只是实现功能逻辑就可以的，所涉及到的知识都要了解清楚，才能选择出最佳方案。分析完问题后，我们发现用url携带这么大量的参数到下一个页面是不可取的，那针对这个场景到底应该用什么来实现我想要的效果且是合理的没有其他问题及隐患的方案呢？这里面就涉及到怎么把A页面的数据存起来，在B页面使用呢？于是要用到cookie、sessionStorage和localStorage，但是到底要选哪个？如下：

二、概念

浏览器存储：cookie，localStorage，sessionStorage

Cookie ：Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限
制为 4KB 左右。它的主要用途有保存登录信息，比如你登录某个网站市
场可以