谷歌浏览器调试：添加localStorage

已于 2023-03-06 11:26:28 修改
阅读量5.2k 收藏 5
点赞数 2
分类专栏： 软件工具分享 文章标签： chrome 前端
于 2021-11-16 16:04:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gzl0524/article/details/121358231
版权
本文介绍了如何在浏览器中查看和设置LocalStorage，通过`window.localStorage`可以查看和操作LocalStorage。例如，设置键`default_system`的值为`Aone`，并提供了查看效果的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

F12查看浏览器本地：Local Storage

 需要添加一个key: default_system

设置如下：

查看浏览器localStorage： 

     window.localStorage

设置localStorage：

   localStorage.setItem("default_system","Aone")

查看效果：

浏览器百科：网页存储篇-如何在Chrome打开localStorage窗格(五)
守城小轩的技术窝棚
09-04 1803
通过上述步骤，开发者可以轻松地在 Chrome 浏览器中管理 localStorage 数据。掌握这些操作不仅能帮助开发者更有效地调试和优化网页应用，还能提升开发效率和用户体验。在下一篇文章中，我们将介绍 localStorage 的应用实例，通过实际案例进一步说明如何在项目中灵活运用 localStorage。敬请期待《浏览器百科：网页存储篇-localStorage应用实例（六）》。
谷歌浏览器调试（前端）：Chrome F12
渡安H的博客
01-05 2657
Chrome开发者工具（DevTools）为前端调试工作提供了诸多的工具可供使用，相对于“alert”、“console.log”大大提高了前端调试的效率。 这些工具可以实现例如：DOM结构分析、CSS动态变更、断点调试、watch变量、检测网络请求和响应、移动端调试等。 点击Ctrl+Shift+I或F12打开DevTools，讲解基本使用界面： 右上角可选择Dock side； ...
如何查看Chrome浏览器的LocalStorage缓存信息
热门推荐
一枝夏雨荷的博客
04-30 2万+
我们需要查看LocalStorage里面，当前网页的缓存信息(登录信息)：如图即可：
浏览器查询所有的存储信息，以及清除的语法
最新发布
情绪不稳定的98年程序员
02-05 956
要在浏览器的控制台中查看所有的存储（例如和 cookies），你可以使用浏览器开发者工具的 "Application" 标签页。
chrome20-查看localstorage和sessionstorage
qq_41632427的博客
06-18 805
html
浏览器内存 localStorage的用法
xu_duo_i的博客
11-24 402
window.localStorage.setItem('key',value)
手把手教你开发Chrome扩展三：关于本地存储数据
weixin_30687811的博客
04-04 981
手把手教你开发chrome扩展一：开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二：为html添加行为 手把手教你开发Chrome扩展三：关于本地存储数据 HTML5中的localStorage localStorage与cookie类似，它是存储在客户端浏览器中的数据，它与cookie不同的一点是它没有时间限制。localStorage属于htm...
谷歌浏览器console调试
05-24
谷歌浏览器console调试是前端开发中一个重要的工具和技能，它能显著提升开发效率，帮助开发者快速定位和修复问题。Chrome浏览器作为目前流行的浏览器之一，其提供的调试工具非常强大，使得开发者能够方便地查看页面...
谷歌浏览器编写填写html脚本,用VueJS写一个Chrome浏览器插件的实现方法
weixin_35996612的博客
06-28 862
浏览器基本已经天下大统了，放眼望去都是Chromium的天下。那么，能写一个浏览器插件也算是一种回报率不错的技能。基本知识浏览器插件官方的说法叫扩展程序，允许你为浏览器增加各种功能，但不需要深入研究浏览器本身的代码。你可以用HTML，CSS和JavaScript创建新的扩展程序，如果你曾经写过网页，那么写一个插件是非常轻松的事情。常见的插件一般就是地址栏后面的一个图标，点击后给你当前网页提供各种功...
oschina 组织的用户没有备注的谷歌浏览器插件
10-05
"oschina 组织的用户没有备注的谷歌浏览器插件" 这个标题表明我们讨论的是一个专为oschina（开源中国）社区设计的Chrome浏览器扩展程序。这个插件的主要功能可能是解决用户在浏览oschina网站时遇到的问题，特别是...
【前端学习指南】Chrome Dev Tools 浏览器调试技巧
范同学的学习历程
11-19 1147
浏览器调试模式下的各个调试工具是常用的工具集，能够帮助开发者理解、调试和优化网页。浏览器工具打开方式：打开命令菜单快捷键：相关命令：dark theme -->DevTool切换成黑色主题light theme -->切换成白色主题Capture area screenshot -->选择范围截图Capture full size screenshot -->选择整个页面截图Capture node screenshot -->捕捉一个node节点截图通过Dock命令可以改变窗口位置Undock命令可
chrome浏览器本地信息的获取与设置
hly15555307663的博客
02-22 1045
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
Chrome 拓展开发系列：数据存储之 chrome.storage 和 localStorage
Lorin 洛林的后端技术小站
11-28 3461
chrome.storage 和 localStorage 都是在浏览器中用于存储数据的机制，下面我们一起聊聊它们是什么，区别以及使用示例。
JS实现LocalStorage的浏览器插件级缓存与载入
qq_40177740的博客
07-18 725
作为一个产品狗，每次都要切换不同的前端同学环境，一遍又一遍的配置user、token，快速的去查看前端同学的实现效果，真的很麻烦。因此，打算写一个可以快速保存本地存储的小插件，实现不同环境页面的token复用。
浏览器百科：网页存储篇-Local storage介绍(四)
守城小轩的技术窝棚
09-04 1316
localStorage 是一种 HTML5 Web 存储技术，用于在客户端（浏览器）中以键值对的形式存储数据。与 sessionStorage 不同的是，localStorage 中存储的数据没有过期时间，即使浏览器关闭后数据仍然保留，直到被显式删除。通过对 localStorage 的基本概念、特性及常用方法的详细介绍，我们可以看到 localStorage 作为一种重要的 Web 存储技术，具有持久性高、存储容量大和使用方便等优点。
浏览器存储之localStorage
weixin_53641562的博客
03-20 257
浏览器存储之localStorage
深入浅出 localStorage 存储：浏览器本地存储的利器
weixin_63490470的博客
08-15 3705
localStorage 是 HTML5 中引入的一种新的本地存储机制，它允许网页在用户浏览器中存储键值对数据，并且这些数据在浏览器关闭后仍然可以保留。localStorage 存储为开发者提供了在客户端存储数据的便捷方式，可以用于缓存数据、保存用户偏好、实现离线功能等，极大地提升了 Web 应用的性能和用户体验。
开发浏览器插件时，向指定页面传递localStorage
weixin_72432287的博客
12-10 391
思路，第一步先配置指定网页和chrome方法，第二步在后台脚本中设置方法，第三步在注入脚本中把方法实现（这里就是把后台得到的数据存到指定网页），第四步就是使用方法，获取数据传递，cookie有直接的方法，但是localStoreage并没有直接发送网络请求存入指定页面的缓存，但是可以使用后台脚本和注入脚本实现。在开发浏览器插件时，有一个需求，在点击浏览器插件的popup小弹窗页面时，点击登录后，把数据存到另一个网页的缓存当中去，并且这个网页并没有在浏览器当中打开。在配置完成之后，在后台脚本中设置方法，
浏览器本地存储
weixin_46376652的博客
07-14 1916
localStorage.setItem方法用于添加一个本地缓存数据，接收两个参数，为key-value类型；①、当value数据类型为数字类型时，会自动转换为字符串类型进行存储；②、当value中的数据类型为对象类型时，需要使用JSON.stringify()函数将其转换为字符串类型进行存储； localStorage.getItem()方法接收一个参数key，用于读取数据；JSON.parse()方法用于将对象字符串转换为对象类型； localStorage.removeItem()方法接收一个
如何开发一个谷歌浏览器扩展可以监听网页的url并记录响应内容
12-04
创建一个Chrome浏览器扩展程序来监听页面URL并记录响应内容涉及几个关键步骤： 1. **项目设置**: - 创建一个新的Chrome扩展项目：使用Google Chrome的开发者工具（`chrome://extensions`），启用“开发者模式”，然后点击“加载已解压扩展程序”导入项目。 2. **manifest.json**: 编辑manifest文件，添加必要的权限，如"activeTab" 权限用于获取当前活动标签页的信息： ```json { "name": "URL Logger", "version": "1.0", "permissions": ["activeTab", "https://*/*", "http://*/*"], "content_scripts": [ { "matches": ["<all_urls>"], // 匹配所有URL "js": ["content.js"] // 主要脚本文件 } ], "browser_action": { // 添加一个图标以便用户点击 "default_popup": "popup.html" } } ``` 3. **content.js**: 这个文件将编写JavaScript来检测URL变化并记录响应内容。你可以使用`chrome.tabs` API来监听tab的变化，并使用`fetch`或`XMLHttpRequest`请求网页内容： ```javascript chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { if (changeInfo.status === 'complete') { fetch(tab.url) .then(response => response.text()) .then(data => saveData(tab.url, data)); } }); function saveData(url, content) { // 实现数据保存逻辑，比如写入本地存储或服务器API } ``` 4. **popup.html** 和 **popup.js**: 创建一个弹出窗口，展示记录的内容。popup.html用于HTML布局，popup.js处理与用户的交互以及从本地存储读取数据显示到界面上。 5. **数据持久化**: 要长期保存数据，可以使用Chrome的localStorage、IndexedDB或其他更适合长期存储的数据结构。 6. **调试**: 使用Chrome开发者工具检查扩展是否正常工作，可以在控制台查看日志和错误信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海是倒过来的天~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值