如何将标签缩略图保存到本地存储？ [英] How can I save a tab thumbnail to local storage?

问题描述

我试图跟踪我的google chrome扩展程序的标签缩略图，并希望能够将它们保存到我的本地存储中。目前，我有以下几点：

  chrome.tabs.captureVisibleTab（tab.windowId，function（thumb）{
 //此处的其他代码... 
} 
  

如何节省大拇指到本地存储？或者我不应该将拇指保存到本地存储，而是在下次浏览器加载时重新加载这些缩略图？ 解决方案

回调 chrome.tabs.captureVisibleTab 收到一个data-URI（ data：image / png; base64，... 或 data：image / jpg ; base64，... ）。这是一个纯字符串，可以保存在 localStorage 中，如下所示：

  chrome.tabs.captureVisibleTab（tab.windowId，function（thumb）{
 //示例：按关键字URL保存
 localStorage。 setItem（tab.url，thumb）; 
}）; //<  - 不要忘记关闭在这个例子中，屏幕截图保存在与选项卡的URI相同的关键字中，使用的括号为：
  

localStorage.setItem 。

您可以按照以下方式枚举键：

  for（var i = 0; I< localStorage.length; i ++）{
 var keyname = localStorage [i]; //或者localStorage.key（0）; 
 var thumb = localStorage.getItem（keyname）; //<  - 检索值
} 
  

如果您不喜欢拇指，可以使用 localStorage.removeItem 方法将其删除：

  var keyname ='https://stackoverflow.com/'; //例如
 localStorage.removeItem（keyname）; 
  

注意： localStorage 限制为5MB。考虑使用异步 chrome.storage 用于保存数据的API。

I'm trying to keep track of tab thumbnails for my google chrome extension, and would love for the ability to save them to my local storage. Currently, I have something along the lines of:

chrome.tabs.captureVisibleTab(tab.windowId, function(thumb) {
     // other code here...
}

How can I save thumb to local storage? Or should I not be saving thumb to local storage and instead reloading those thumbnails the next time the browser loads?

解决方案

The callback of chrome.tabs.captureVisibleTab receives a data-URI (data:image/png;base64,... or data:image/jpg;base64,...). This is a plain string, which can be saved in localStorage as follows:

chrome.tabs.captureVisibleTab(tab.windowId, function(thumb) {
    // Example: Save by key URL
    localStorage.setItem(tab.url, thumb);
}); // <-- Don't forget the closing parenthesis..

In this example, the screenshot was saved in the same key as the tab's URI using localStorage.setItem.
You can enumerate through the keys as follows:

for (var i=0; i<localStorage.length; i++) {
    var keyname = localStorage[i];            // Or localStorage.key(0);
    var thumb = localStorage.getItem(keyname);// <-- Retrieve the value
}

If you don't like the thumb, it can be removed using the localStorage.removeItem method:

var keyname = 'https://stackoverflow.com/';  // For example
localStorage.removeItem(keyname);

Note: localStorage is limited to 5MB. Consider using the asynchronous chrome.storage API for persisting data.

这篇关于如何将标签缩略图保存到本地存储？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！