Service Worker缓存查看与调试 - 列出缓存条目
枚举当前作用域下的所有Cache Storage,查看资源条目和所占空间,支持手动清理。
UD5工具箱
| # | 键名 | 值(预览) | 大小 | 类型 | 操作 |
|---|---|---|---|---|---|
|
localStorage 为空 |
|||||
| # | 键名 | 值(预览) | 大小 | 类型 | 操作 |
|---|---|---|---|---|---|
|
sessionStorage 为空 |
|||||
| # | 缓存名称 | 条目数 | 预估大小 | 状态 | 操作 |
|---|---|---|---|---|---|
|
Cache API 不可用或为空 (需要 HTTPS 或 localhost 环境) |
|||||
| # | 名称 | 值(截断) | 大小 | Domain |
|---|---|---|---|---|
|
无可读取的 Cookie |
||||
localStorage:数据持久化存储,即使关闭浏览器或重启电脑后数据依然存在,没有过期时间,除非手动清除。同一域名下的所有页面共享数据。
sessionStorage:数据仅在当前会话期间有效,关闭标签页或浏览器窗口后数据即被清除。不同标签页之间的sessionStorage是隔离的,即使访问同一域名。
提示:二者存储上限通常为 5-10MB(因浏览器而异),且都只能存储字符串类型数据。
不同浏览器对localStorage的大小限制不同:
当存储空间不足时,浏览器会抛出 QuotaExceededError 异常。建议单个域名下localStorage使用量控制在5MB以内以确保兼容性。
Cache API 是 Service Worker 的一部分,允许开发者以编程方式缓存网络请求及其响应。它提供了精细的缓存控制能力,常用于PWA(渐进式Web应用)实现离线访问。
浏览器缓存(HTTP缓存) 是由浏览器自动管理的,基于HTTP头(如Cache-Control、ETag等)来决定是否缓存资源,开发者无法通过JavaScript直接操作。
Cache API需要HTTPS环境,存储配额通常比localStorage大得多,可达数百MB甚至更多,具体取决于磁盘空间。
清理浏览器存储的几种方式:
localStorage.clear() 或 sessionStorage.clear()。注意:清空操作不可逆!建议在清空前使用导出功能备份重要数据。
| 特性 | Cookie | localStorage |
|---|---|---|
| 存储容量 | 约4KB | 约5-10MB |
| 数据发送 | 每次HTTP请求自动发送 | 不自动发送 |
| 过期时间 | 可设置过期时间 | 永久有效(手动清除) |
| API易用性 | 字符串解析较繁琐 | 简洁的键值对API |
| HttpOnly | 支持(JS无法读取) | 不适用 |
localStorage适合存储较大的客户端数据;Cookie适合需要随请求发送的小数据(如认证令牌)。
现代浏览器使用Storage Quota Management API来管理站点存储空间:
navigator.storage.estimate() 可查询当前站点的已用空间(usage)和配额(quota)。navigator.storage.persist()申请,获得更高的保留优先级。配额因浏览器和磁盘空间而异,通常在数百MB到数GB之间。
localStorage数据丢失的常见原因:
建议定期使用导出功能备份重要数据。
localStorage和sessionStorage都不适合存储敏感数据,因为它们以明文形式存储,容易受到XSS攻击。
更安全的选择:
安全建议:永远不要在localStorage中存储密码、信用卡号等敏感信息。
枚举当前作用域下的所有Cache Storage,查看资源条目和所占空间,支持手动清理。
显示当前注册的 Service Worker 所管理的 Cache Storage,查看缓存文件列表及大小。
显示当前页面关联的Service Worker状态,并允许手动更新或注销。
上传 PNG 文件,列出所有数据块(IHDR、IDAT、tEXt 等),提取隐藏的文本或时间信息。
粘贴带有 source map 的错误堆栈,解析出原始源代码位置,便于定位问题。
解析照片并将全部EXIF/IPTC/XMP摄影信息以结构化的JSON树展示。
设定总列数、间距和容器宽度,自动计算每列宽度百分比,方便手动搭建栅格系统。
上传JPEG照片,读取快门、光圈、ISO、拍摄日期及GPS位置等EXIF元数据,保护隐私本地解析。
输入国际号码,自动提取国家代码、地区码和本地号码,并可尝试格式化为E.164等标准。
输入公开网站URL,抓取并展示其使用的CSS自定义属性(颜色)调色板,设计灵感源泉。
上传图片,提取所有出现过的颜色并按频次排序生成HTML色块表。
选择文件,设定切片大小,将文件切成多个Blob下载;也可选择多个切片合并还原。
根据天体质量和半径,计算环绕、逃逸和脱离星系所需的速度。
扫描指定CSS中的所有媒体查询,生成带断点标记的视口标尺和交互式覆盖图。
获取用户浏览器的实时地理位置(经纬度、海拔、精度),在地图上标记点并显示地址。
输入两个二进制数,按补码加法计算并显示进位、零标志、溢出标志等状态。
输入药片上的字母数字、颜色及形状,从常用药品库中匹配可能品种,辅助用药安全。
按国家或货币名称查询对应的ISO 4217货币代码和符号(如¥、€)。
输入电容器上的三位数字代码,换算为pF、nF、uF等容值。
上传PDF文件,使用pdf.js提取所有页面的纯文本内容,方便复制。
选择常见的食品添加剂编码,查看其名称、作用和安全性评级。
将长文本按指定字符数强制插入换行符,保留单词完整性选项,用于纯文本排版。
将CSV或TSV格式的数据转换为HTML表格,支持自定义分隔符、表头,并预览表格效果。
输入自定义文案,生成带有当前时间和华丽背景的卡片图片,适合社交媒体分享。
对时间进行加、减运算(如2h30m + 1h45m),直接显示总秒数和格式化的时间结果。
输入自己已覆盖和行业常见话题,工具自动找出尚未涉及的潜在内容机会。
计算两个日期之间的间隔天数,或给定日期前后第N天的日期,支持包含/排除周末的设定。
输入图书ISBN或论文DOI,通过开放API获取并显示标题、作者等元数据。
搜索或浏览全球国家/地区的电话区号,支持按国家名或数字代码查找。
演示UTF-32编码与字符串的互转,展示每个字符对应的4字节十六进制值。