讲师中心 微信公众号

工具推荐

视频效率加速
Seko
Seko

AI短剧一键生成成片

立刻MV
立刻MV

低成本歌曲 MV、视频生成

updream

一键生成高质量推广成片

剧云
剧云

中文短剧剧本制作平台

谷歌浏览器怎么查看本地Storage的存储数据_谷歌浏览器前端缓存审查

风伟吖_7694

风伟吖_7694

发布时间:2026-05-20 08:49:21

|

544人浏览过

|

来源于php中文网

原创

可通过Application面板或Console命令查看编辑localStorage:打开开发者工具→切至Application→展开Local Storage选域名查看键值对;或在Console中用getItem/setItem/clear等API操作,支持实时调试与批量管理。

谷歌浏览器怎么查看本地storage的存储数据_谷歌浏览器前端缓存审查

如果您正在调试网页应用,需要确认当前页面是否正确写入或读取了本地存储数据,则可能是由于 localStorage 或 sessionStorage 未按预期生效。以下是查看 Chrome 浏览器中本地 Storage 数据的具体操作方法:

一、通过 Application 面板查看和编辑 Storage 数据

Chrome 开发者工具的 Application 面板是查看 localStorage 和 sessionStorage 最直观的方式,它以结构化表格形式展示所有键值对,并支持实时编辑与删除。

1、在目标网页上右键单击,选择“检查”,或直接按下快捷键 F12(Windows/Linux)或 Cmd+Opt+I(macOS)打开开发者工具。

2、点击顶部标签栏中的“Application”选项卡。

立即学习“前端免费学习笔记(深入)”;

3、在左侧边栏中展开“Storage”节点,依次展开“Local Storage”或“Session Storage”子项。

4、点击当前网页对应的域名(如 https://example.com),右侧将列出全部键值对。

5、双击任意Key 或 Value 字段可直接修改;右键某一行可选择“Delete”移除条目;右键空白区域可选择“Add item”新增键值对。

谷歌浏览器怎么查看本地Storage的存储数据_谷歌浏览器前端缓存审查

二、通过 Console 控制台执行 JavaScript 命令操作

控制台提供编程式访问能力,适用于快速验证、批量读写或调试复杂逻辑,所有操作均作用于当前页面源(origin)的 Storage 对象。

1、打开开发者工具后,切换至“Console”标签页。

2、输入 localStorage.getItem('keyName') 获取指定键的字符串值。

3、输入 sessionStorage.getItem('keyName') 查看会话级存储内容。

4、使用 localStorage.setItem('key', 'value') 写入新数据,注意 value 必须为字符串;若需存对象,请先用 JSON.stringify() 序列化。

HISUI 前端框架开发指南(IRIS版)
HISUI 前端框架开发指南(IRIS版)

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库,专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考,支持声明式与编程式两种初始化方式,提供 $cm/$m 数据访问方法。

下载

5、执行 localStorage.clear() 可清空当前源的所有 localStorage 数据;同理,sessionStorage.clear() 清空当前标签页的 session 数据。

谷歌浏览器怎么查看本地Storage的存储数据_谷歌浏览器前端缓存审查

三、通过 Chrome 设置查看全站存储占用与批量清理

该方式不显示具体键值内容,但能识别哪些网站占用了大量本地存储空间,适用于排查性能异常或隐私清理场景。

1、点击 Chrome 右上角三个圆点图标,进入“设置”。

2、在左侧菜单中选择“隐私和安全”,再点击“Cookie 及其他网站数据”。

3、滚动到底部,点击“查看所有网站数据和权限”。

4、页面将列出所有已存储数据的网站及其占用空间,可按大小排序,快速定位高占用站点。

5、在目标网站条目右侧点击垃圾桶图标,确认后即可一次性清除该网站全部本地数据(含 Cookie、Cache、IndexedDB、LocalStorage、SessionStorage 等)。

谷歌浏览器怎么查看本地Storage的存储数据_谷歌浏览器前端缓存审查

四、直接访问本地文件系统查看 SQLite 存储文件

Chrome 实际将 localStorage 数据以 SQLite 数据库格式保存在用户目录中,适用于高级分析或离线取证,但需外部工具解析。

1、关闭 Chrome 浏览器,确保无运行实例。

2、打开文件资源管理器,导航至以下路径:
Windows:C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\Default\Local Storage\
macOS:~/Library/Application Support/Google/Chrome/Default/Local Storage/

3、查找以网站域名命名、扩展名为 .localstorage 的文件(例如 https_example_com_0.localstorage)。

4、下载并安装 DB Browser for SQLite 工具,用其打开该文件。

5、在数据库中选择 "ItemTable" 表,即可看到原始的键(key)与值(value)字段内容。

相关文章

谷歌浏览器
谷歌浏览器

谷歌浏览器Google Chrome是一款可让您更快速、轻松且安全地使用网络的浏览器。Google Chrome的设计超级简洁,使用起来得心应手。这里提供了谷歌浏览器纯净安装包,有需要的小伙伴快来保存下载体验吧!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

超级麦吉

一款通过数字员工协作完成调研、数据分析与文档制作的AI办公平台。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2963

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

6483

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

7350

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

7238

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

1023

2024.05.22

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

80

2026.11.06

Postman请求头Headers怎么设置
Postman请求头Headers怎么设置

围绕Postman HTTP请求头配置展开,讲解Headers选项的具体使用方式,包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法,帮助用户解决接口调试过程中遇到的请求头配置问题。

40

2026.11.06

Postman接口请求发送教程
Postman接口请求发送教程

详细介绍Postman接口请求的创建与发送方法,涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看,帮助用户掌握Postman接口请求的完整操作流程。

80

2026.11.06

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

60

2026.11.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn