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以内