你真的了解这些浏览器存储以及session吗

最新推荐文章于 2025-06-26 13:59:05 发布

weixin_34216107

最新推荐文章于 2025-06-26 13:59:05 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： json 数据库前端 ViewUI

原文链接：https://juejin.im/post/5a2fa4675188254dd9365ec0

本文详细介绍了前端常用的存储技术，包括cookie、session、localStorage和sessionStorage的特点、用途及优缺点。对比了它们之间的区别，帮助开发者选择合适的前端存储方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cookie

cookie是什么：

cookie是指存储在用户本地终端上的数据，同时它是与具体的web页面或者站点相关的。cookie数据会自动在web浏览器和web服务器之间传输，也就是说HTTP请求发送时，会把保存在该请求域名下的所有cookie值发送给web服务器，因此服务器端脚本是可以读、写存储在客户端的cookie的操作。

cookie的有效期：

cookie默认情况下的有效期是很短暂的，一旦用户关闭浏览器，cookie保存的数据就会丢失。如果想要延长cookie的有效期，可以通过设置HTTP头信息中的cache-control属性的max-age值，或者修改HTTP头信息中的expires属性的值来延长有效期。Cookie可以配置成永久的，也可是临时的。永久的直接以文本方式放在客户机。临时的cookie仅存在于服务器交互的HTTp头部。一旦用户退出站点，包含在绘画Cookie里的所有数据都会销毁

cookie的数目和大小的限制：

每个web服务器(域名)保存的cookie数不能超过50个，每个cookie保存的数据不能超过4KB，如果超过了4KB（IE6大约只能存储2K），服务器会处理不了。

cookie的优点：

能用于和服务器端通信；当cookie快要过期时，可以重新设置而不是删除。

cookie的缺点：

它会随着http头信息一起发送，增加了网络流量（文档传输的负载）；它只能储存少量的数据；它只能储存字符串；有潜在的安全问题。

用于存储什么数据：

Cookie用于保存客户浏览器请求服务器页面的请求信息,程序员也可以用它存放非敏感性的用户信息，数据信息是以明文文本的形式保存在客户端的计算机中，将登陆信息等重要信息存放为SESSION，其他信息如果需要保留，可以放在COOKIE中。设想你某次登陆过一个网站，下次登录的时候不想再次输入账号了，怎么办？这个信息可以写到Cookie里面，访问网站的时候，网站页面的脚本可以读取这个信息，就自动帮你把用户名给填了，能够方便一下用户

session

session是什么：

Session代表服务器与浏览器的一次会话过程，这个过程是连续的，也可以时断时续的，session会在一定时间内保存在服务器上。
session的有效期

session一般默认30分钟，对于网站一般可以设的短点，要是对于企业内部的开发就设的大点也可以，因为访问量小，内存不会占用太多，而网站就不用了，可以根据相应的访问量多少自己去设置。在web.xml中设置session-config
session的数目和大小的限制；

没有大小限制
优点：

如果要在诸多Web页间传递一个变量，那么用Session变量要比通过QueryString传递变量可使问题简化。

缺点：

当一个用户访问某页面时，每个Session变量的运行环境便自动生成，这些Session变量可在用户离开该页面后仍保留20分钟！（事实上，这些变量一直可保留至“timeout”。“timeout”的时间长短由Web服务器管理员设定。一些站点上的变量仅维持了3分钟，一些则为10分钟，还有一些则保留至默认值20分钟。）所以，如果在Session中置入了较大的对象（如ADO 　　recordsets，connections，等等），那就有麻烦了！随着站点访问量的增大，服务器将会因此而无法正常运行！

LocalStorage

localStorage是什么：

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
localStorage的优点：

1）localStorage拓展了cookie的4K限制；

2）localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的；

3）localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
localStorage的缺点：

1）浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性；

2）目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换；

3）localStorage在浏览器的隐私模式下面是不可读取的；

4）localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡；

5）localStorage不能被爬虫抓取到。