【Chrome控制台】application的使用

首先打开调试面板「windows:F12；mac：command+option+i」，找到Application选项卡。

如下两区域与pwa相关，也就是渐进式web应用程序。

使用前端数据库如websql或IndexDB，可以在如下选项中查看。

数据库详情要到Storage中查看：

Storage中最常用的是Session storage和Local storage：

Session storage和Local storage的区别

数据生命周期：

• LocalStorage： 存储在LocalStorage中的数据没有过期时间，除非被显式删除或者浏览器缓存被清除，否则数据将一直存在。
• SessionStorage： 存储在SessionStorage中的数据在当前会话（即当前标签页或者窗口）关闭后会被自动删除，它的生命周期仅限于当前会话。

数据作用域：

• LocalStorage： 存储在LocalStorage中的数据在同源（相同协议、主机和端口）的所有页面中都是共享的。也就是说，无论是从同一个页面还是不同页面，只要是同源的页面都可以访问到相同的LocalStorage数据。
• SessionStorage： 存储在SessionStorage中的数据仅在同一个窗口或标签页中共享，如果是在不同的窗口或标签页打开同一个网站，它们之间的SessionStorage数据是相互隔离的。

总结

如果希望存储的数据具有持久性，并且在不同窗口之间共享，使用LocalStorage；
如果希望存储的数据仅在当前会话中有效，并且不需要在不同窗口之间共享，可以使用SessionStorage。