Blazor和Vue对比学习(进阶.状态管理-4):持久化保存之概述

前端持久化保存数据的方式,主要包括CookieSessionjwtLocalStorageSessionStorageIndexedDB/WebSQLSQLiteAPP端)。我们首先简单的理清一下它们的概念和区别:

  • Cookie、Session、jwt:这三者紧密相连,是客户端和服务端相结合的技术,主要用于对客户端身份的认证和识别,但需要注意,三者不是一个层面上的概念。每个Cookie的大小限制为4K,且同一站点,最多有20个Cookie。
  • LocalStorage、SessionStorage:客户端的键值对存储,与服务端没有关系。locallStorage理论上永久保存在浏览器中(除非主动清除),而SessionStorage只在当前会话中有效,标签页或浏览器关闭,自动清除。同一站点的Storage,大小限制为5M。
  • IndexedDB、WebSQL:客户端的数据库存储,与服务端没有关系。其中IndexedDB是非关系型数据库,以键值对的方式保存数据,理论上大小从250M起,是Web应用首推的本地数据库,相当于手机APP端的SQLite。而WebSQL虽然也是浏览器支持的本地数据库,且属于我们比较熟悉的关系型数据库,但它的兼容性较差,也缺少对现代技术的支持,如异步等,所以不推荐使用。

 

如下图所示,在浏览器中,我们可以看到CookieLocalStorageSessionStorageIndexedDB和WebSQLSessionjwt是和cookie有关联的技术,它们属于服务端,所以看不到。除此之外,还可以看到它们的下级目录是一个个站点,这是具体内容存储的作用域。浏览器的所有本地存储方式,都遵守同源原则。同源,指协议、IP地址和端口号一致,则视为同源,我们可以简单的理解为同一站点。站点之间,天然隔离,不能跨域使用。

 

F12打开浏览器的调试模式,点击Application选项卡,在Storage目录下,可以看到Cookie、LocalStorage、SessionStorage、IndexedDB、WebSQL

 

 

打开下级目录,可以看到不同的站点,遵守同源原则。各种存储方式的大小限制,也多指同一个站点,如一个站点的LocalStorage的大小限制在5M以内

 

posted @   functionMC  阅读(326)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示