Blazor和Vue对比学习(进阶.状态管理-4):持久化保存之概述
前端持久化保存数据的方式,主要包括Cookie,Session,jwt,LocalStorage,SessionStorage,IndexedDB/WebSQL,SQLite(APP端)。我们首先简单的理清一下它们的概念和区别:
- Cookie、Session、jwt:这三者紧密相连,是客户端和服务端相结合的技术,主要用于对客户端身份的认证和识别,但需要注意,三者不是一个层面上的概念。每个Cookie的大小限制为4K,且同一站点,最多有20个Cookie。
- LocalStorage、SessionStorage:客户端的键值对存储,与服务端没有关系。locallStorage理论上永久保存在浏览器中(除非主动清除),而SessionStorage只在当前会话中有效,标签页或浏览器关闭,自动清除。同一站点的Storage,大小限制为5M。
- IndexedDB、WebSQL:客户端的数据库存储,与服务端没有关系。其中IndexedDB是非关系型数据库,以键值对的方式保存数据,理论上大小从250M起,是Web应用首推的本地数据库,相当于手机APP端的SQLite。而WebSQL虽然也是浏览器支持的本地数据库,且属于我们比较熟悉的关系型数据库,但它的兼容性较差,也缺少对现代技术的支持,如异步等,所以不推荐使用。
如下图所示,在浏览器中,我们可以看到Cookie、LocalStorage、SessionStorage、IndexedDB和WebSQL。Session和jwt是和cookie有关联的技术,它们属于服务端,所以看不到。除此之外,还可以看到它们的下级目录是一个个站点,这是具体内容存储的作用域。浏览器的所有本地存储方式,都遵守同源原则。同源,指协议、IP地址和端口号一致,则视为同源,我们可以简单的理解为同一站点。站点之间,天然隔离,不能跨域使用。
F12打开浏览器的调试模式,点击Application选项卡,在Storage目录下,可以看到Cookie、LocalStorage、SessionStorage、IndexedDB、WebSQL
打开下级目录,可以看到不同的站点,遵守同源原则。各种存储方式的大小限制,也多指同一个站点,如一个站点的LocalStorage的大小限制在5M以内
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!