从 localStorage 获取 chrome 选项卡和窗口
我正在尝试访问 Google Chrome 扩展程序中的选项卡和窗口数据。我显然已经设法获取此信息并通过 localStorage 加载它，但我不知道如何使用这些信息，因为我似乎无法通过 JSON 解析将数据解析回对象数组。
这是代码：
<html>
<head>
<script>
tabs = {};
tabIds = [];
focusedWindowId = undefined;
currentWindowId = undefined;
localStorage.windowsTabsArray = undefined;
function loadItUp() {
return arrays = chrome.windows.getAll({ populate: true }, function(windowList) {
tabs = {};
tabIds = [];
var groupsarr = new Array();
var tabsarr = new Array();
var groupstabs = new Array();
for (var i = 0; i < windowList.length; i++) {
windowList[i].current = (windowList[i].id == currentWindowId);
windowList[i].focused = (windowList[i].id == focusedWindowId);
groupsarr[windowList[i].id] = "Untitled"+i;
for (var j = 0; j < windowList[i].tabs.length; j++) {
tabsarr[windowList[i].tabs[j].id] = windowList[i].tabs[j];
groupstabs[windowList[i].id] = windowList[i].tabs;
}
}
localStorage.groupsArray = JSON.stringify(groupsarr);
localStorage.tabsArray = JSON.stringify(tabsarr);
localStorage.groupsTabsArray = JSON.stringify(groupstabs);
});
}
function addGroup() {
var name = prompt("NEW_GROUP_NAME");
var groupsarr = JSON.parse(localStorage.groupsArray);
groupsarr.push(name);
localStorage.groupsArray = JSON.stringify(groupsarr);
}
</script>
</head>
<body onload="loadItUp()">
WINDOW_QTY:
<script type="text/javascript">
var wArray = JSON.parse(localStorage.groupsArray);
document.write(wArray);
</script>
<br/>
TABS_QTY:
<script type="text/javascript">
var tArray = JSON.parse(localStorage.tabsArray)
document.write(tArray);
</script>
<br/>
WINDOWS_TABS_QTY:
<script type="text/javascript">
document.write(JSON.parse(localStorage.groupsTabsArray));
</script>
<br/>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
1）
这是预期的，当您调用
document.write(tArray);; 时，对象会隐式转换为字符串。没有自定义toString实现的自定义对象将转换为“[object Object]”。这并不意味着它们没有被“解析”。要检查对象，您可以使用开发人员工具。您可以从“扩展”页面打开背景页面的检查器，并且您可以在选项卡中打开页面（例如，如果您使用 chrome_url_overrides）您可以像检查常规网页一样检查它。
如果您将 document.write 调用替换为
console.log()，您将能够在开发人员工具的控制台中检查对象。2）
脚本在解析器插入 DOM 时执行（除非它们是
deferred 或async） - 请参阅 关于因此，现在您的
document.write调用会打印上次加载页面时保存到localStorage的值，这可能不是您想要的。您应该使用 document.write() >element.innerHTML 或 element.textContent 更新页面文本。有很多方法可以获取所需元素的引用，document.getElementById() 是一。
3)
最后，请注意，并非每个对象都可以保存到
localStorage并从中加载。例如，方法不会在往返过程中保留下来，并且不会保留对象的标识，这意味着您从 Chrome API 获取的对象在将其存储在localStorage并将其加载回来。您还没有解释为什么您认为需要
localStorage- 当您想在页面关闭并重新加载后保留一些数据时使用它 - 所以也许您并不真正需要它？1)
That's expected, objects are implicitly converted to string when you call
document.write(tArray);; custom object without a customtoStringimplementation are converted to "[object Object]". It doesn't mean they're not "parsed".To inspect the object you can use the Developer Tools. You can open the inspector for a background page from the Extensions page and if you get your page to open in a tab (e.g. if you use chrome_url_overrides) you can inspect it as you would inspect a regular web page.
If you replace the document.write calls with
console.log(), you'll be able to inspect the objects in the Developer Tools' console.2)
Scripts are executed at the moment they are inserted in the DOM by the parser (unless they are
deferred orasync) - see MDC documentation on <script>, - while various load events, in particular<body onload=...>, are executed after the page is finished parsing.So right now your
document.writecalls print the values that were saved tolocalStoragethe previous time the page was loaded, it's probably not what you wanted.Instead of using
document.write()from inline scripts, you should use element.innerHTML or element.textContent to update the page's text. There are many ways to get a reference to the element you need, document.getElementById() is one.3)
Last, note that not every object can be saved to and then loaded from
localStorage. For example, methods will not survive the round-trip, and the identity of the object is not preserved, meaning that the object you got from a Chrome API will not be the same object after you store it inlocalStorageand load it back.You have not explained why you think you need
localStorage- it's used when you want to preserve some data after the page is closed and reloaded - so maybe you don't really need it?