专注于
IT技术和业内交流

Chrome-DevTools — 管理本地存储

Application 面板检查和管理存储、 数据库和缓存

本地存储

如果你使用local storage来存储一对键-值(KVPs), 你可以从 Local Storage 面板 检查、 修改和删除这些KVP。

local storage pane

  • 双击一个键或值可以进行编辑该值。
  • 双击一个空单元格来创建一个新的KVP.
  • 在KVP上单击,然后按 delete 按钮
    (delete button{:.inline}) 来删除这个KVP.你可以通过Clear storage pane来一次性的清除本地储存的所有数据
  • 如果你是在页面交互中创建,删除或修改KVPs,你将不会看到这些变化得到实时更新。 单击 刷新 按钮
    (refresh button{:.inline}) 来检查你的更新

会话存储

Session Storage 面板工作方式与 Local Storage面板相同。检查 Local storage上述部份,
以了解如何查看和编辑 session storage.

IndexedDB

使用IndexedDB检查、 修改和删除 IndexedDB 数据面板。

当您展开IndexedDB面板,低于第一级的是数据库。如果有多个数据库是活跃的情况你会看到多个分录。在下面的截图中只有有一个数据库活动。

indexeddb tab

在这个数据库中单击数据库名称查看主机地址,名称,版本

indexeddb database

展开要查看其键-值(KVPs)的数据库。

indexeddb key-value pairs

接下来在 Start from key文本段落中使用箭头按钮在KVPS页面之间移动.

打开一个值,双击开始编辑该值
当您添加、 修改或删除的值时,这些更改不会实时的更新。单击refresh按钮来更新数据库。
editing an indexeddb kvp

输入一个key,在Start from key文本段落中所以的Key中筛选出比输入key小的一个

filtered kvps

当您添加、 修改或删除的值时,这些更改不会实时的更新。单击 refresh按钮(refresh button)
来更新数据库

单击 clear object store按钮(clear object store)来删除数据库中的数据. 你也可以通过 Clear storage pane来注销服务工作,
删除其他的储存和缓存.

Web SQL

使用 Web SQL 面板 查询和修改 Web SQL 数据库.

点击该数据库的名称打开控制台,你可以在这里执行数据库语句。

web sql console

点击一个数据库表查看该表的数据

web sql table

  • 你不能在这里更新值,但是你可以通过数据库控制台这样做(见上文)
  • 点击标题列可以按该表的列排序
  • 你对表所做的改动不会实时更新。点击refresh 按钮 (refresh button) 来查看您的更新。
  • 用空格或逗号来分隔在Visibile columns 文本字段里仅显示的那些列的列名称.

Application Cache

使用 Application Cache 面板来检查资源和通过 Application Cache API来检查以通过的规则.

application cache pane

每一行代表一种资源。

Type列将具有下列值之一:

  • Master. 在资源上的 manifest 属性表示此缓存是它的主人。
  • Explicit. 此资源在清单中明确列出.
  • Network. 该清单指定的资源必须来自网络。
  • Fallback. 在URLResource 列被回退为另一个URL(不在 DevTools中显示).

在表的底部有状态图标指示您的网络连接和应用程序缓存的状态。应用程序缓存中可以具有以下状态︰

  • IDLE. 高速缓存中有没有新的变化.
  • CHECKING. 该清单正在读取和已检查更新.
  • DOWNLOADING. 资源是被添加到缓存中.
  • UPDATEREADY.缓存在一个新版本中可以使用.
  • OBSOLETE. 正在删除缓存.

Service Worker Caches

Cache Storage 面板允许你在 Application 面板上检查,修改 和调试缓存(service worker) API 创建的缓存。查阅以下更多的帮助。

Clear service workers, storage, databases, and caches

有时候你只需要删除所有数据上的一个特定的根源. ClearStorage 面板允许你在 Application面板 中选择性地注销service workers、 存储和缓存。若要清除数据
只需要启动复选框旁边的组件,然后单击Clear sitedata.根据Clear storage标签来开始删除所有的数据列根源。

clear storage

本文由张翔翻译、@海欧校验,感谢大家的参与.如有错译、漏译请留言我们会及时更正。

未经允许,不得转载本站任何文章:代码山 » Chrome-DevTools — 管理本地存储

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们