标签：WebSQL IndexedDB Vue 浏览器 进阶 站点 LocalStorage Cookie 2.2

前端持久化保存数据的方式，主要包括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以内

标签：WebSQL,IndexedDB,Vue,浏览器,进阶,站点,LocalStorage,Cookie,2.2
来源： https://www.cnblogs.com/functionMC/p/16553750.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。