如何查看或编辑 localStorage答案

【问题标题】：How to view or edit localStorage如何查看或编辑 localStorage
【发布时间】：2012-03-13 08:55:54
【问题描述】：

我创建了一个 Chrome 扩展程序并使用 localStorage 来存储数据。

我正在通过“background_page”访问localStorage。

它工作正常，但我如何手动查看它的值？在 Firefox 中，您可以使用 Firebug。

大家有什么建议吗？

【问题讨论】：

我也有。即使我可以用javascript记录它们，也完全是空的。也许是因为扩展解包或其他原因，但这里还没有有用的答案。 2021-01-10。人们似乎不明白这个问题。

【解决方案1】：

这很简单。只需按 F12 进入开发者工具，然后进入 Application 选项卡。在存储部分展开本地存储。之后，您将在那里看到所有浏览器的本地存储。

【讨论】：

【解决方案2】：

按F12打开开发者工具。

点击Application标签，你会看到localStorage的内容。从那里您可以手动添加/编辑/删除条目。

在 OS X 上，键是：⌥ + ⌘ + i

另一种组合：Ctrl + Shift + i

在 Chrome 中看起来像这样：

【讨论】：

【解决方案3】：

您可以转到 chrome://chrome/extensions，然后会有一个指向您的后台页面的链接，一旦您启动，您就可以使用开发工具查看 localStorage 内容。

【讨论】：

感谢@Ryan S 的回答，但localStorage 是空的，我这样设置localStorage['xy'] = JSON.stringify(xy);
在 chrome 控制台中，您可以执行 localStorage.setItem('xy', JSON.stringify(xy)) 并在 localStorage 中设置项目
执行 chrome://chrome-urls/，然后执行本地存储

【解决方案4】：

我目前使用的是 chrome 版本 52.0.2743.82 m。在目前最新版本的 chrome 中，您可以通过启动“开发者工具”然后查看“应用程序”选项卡来查看本地存储值。

【讨论】：

【解决方案5】：

要么我不明白这里的人们想要做什么，而这不是我正在做的事情，和/或 Chrome 开发者工具已经改变，并且在这方面被破坏了。

我的扩展程序的内容脚本存储数据如下：

chrome.storage.local.set(packet);

当我查看扩展程序后台页面的“应用程序”选项卡并展开“存储”>“本地存储”时，我看到列出了我的扩展程序，但单击它时没有显示任何数据。

我找到的唯一解决方案是在后台页面的控制台中运行它：

chrome.storage.local.get(null, function(data) {console.log(data);})

这类似于扩展程序读取它的方式（除了传递 null 来获取所有键而不是键名来获取我想要的键）并且它工作正常，只是每次都输入它很尴尬。也很奇怪，这里有所有这些对我不起作用的答案。

我在 Windows 10 上使用 Chrome 73.0.3683.103（官方版本）（64 位）。扩展程序仍在解压中，如果相关的话，但这是您最可能想要执行此操作的时间，即正在开发中。

【讨论】：

谢谢！这就是我想知道的。我知道搜索这个，人们通常会假设浏览器是本地存储的。但是，localStorage ≠ chrome.storage.local
我目前正在使用 Chrome 86，这似乎是唯一的方法。我查看了各种开发工具中所有可用的 UI，并且我通过我的扩展程序设置的所有数据都无法在这些 UI 中访问。这一定是 Chrome 较新版本的限制。
相同 -- 无法从 chrome 开发工具/扩展 UI 的扩展本地存储中看到它，我不得不在 background.js 中手动打印出来