如何查看或编辑localStorage

259

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

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

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

有人有什么建议吗？

google-chrome local-storage

— 乔·多伊
source

270

这很简单。只需通过按进入开发人员工具F12，然后进入“ 应用程序”选项卡。在“ 存储”部分中，展开“ 本地存储”。之后，您将在此处看到所有浏览器的本地存储。

— 乔治·格兹里什维利（Giorgi Gzirishvili）
source

33

在Chrome版本60，你不能修改或增加新的项目，你必须通过控制台来做到这一点，localStorage.setItem('key', 'value')

— 吉姆·阿霍

9

在Chrome 65版中，您可以手动修改和添加新项目。在“应用程序”>“本地存储”的键值列表中，在最后一个键值对下方双击，以添加新值。

— Rose Perrone

169

只需按打开开发人员工具F12。

单击“ 应用程序”（以前称为“资源”）选项卡，您将看到localStorage的内容。您可以从那里手动添加/编辑/删除键/值条目。

localStorage资源选项卡

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

另一种组合：Ctrl+ Shift+i

编辑：在Chrome 56中，它看起来像这样：

在此处输入图片说明

— 西蒙妮
source

4

是的已经尝试过，但是localStorage为空。也许是因为我加载了解压缩的扩展程序？

— Joe Doe '02

这可以帮助你：stackoverflow.com/questions/3598669/...

— 西蒙尼

3

西蒙，我知道如何设置，并与JS读取本地存储，但我需要手动编辑/删除

— 乔母鹿

无需使用JS，可以从UI添加/编辑/删除条目

— Simone

17

我目前正在使用Chrome版本52.0.2743.82 m。在目前最新版本的chrome中，您可以通过启动“开发人员工具”，然后查看“应用程序”标签来查看本地存储值。

— 卢克·P·伊萨克
source

15

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

— 瑞安·S
source

感谢您的回答@Ryan S但localStorage为空我将其设置为这样localStorage['xy'] = JSON.stringify(xy);

— Joe Doe

2

在chrome控制台中，您可以执行此操作localStorage.setItem('xy', JSON.stringify(xy))，这将在localStorage中设置该项目

— Ryan S

2

执行chrome：// chrome-urls /，然后进行本地存储

— khaled_webdev 2014年

2

我要么不明白这里的人们正在试图做什么，不是我正在做什么，和/或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位）。如果相关，则扩展包仍未打包，但这是您最有可能在开发中进行的时间。

— 迷恋
source