【问题标题】:Saving Chrome Extension Data (with LocalForage)保存 Chrome 扩展数据(使用 LocalForage)
【发布时间】:2016-01-25 22:21:34
【问题描述】:

我是 web 和 chrome 扩展开发的新手,我正在尝试使用 localForage API 来存储我的 chrome 扩展的数据 - 目前我每次切换到新标签时都会丢失所有内容,但我希望数据一直保留到用户明确清除所有内容(因此即使在多个会话等)

我决定试一试 localForage api(因为它应该类似于 localStorage,但更简单),感觉我遗漏了一些重要的东西——我可以毫无问题地 setItems/getItems,但它实际上并没有保存任何数据。

如何确保我的数据在切换标签(以及多个浏览会话)时保持不变?

使用 localForage.getItem/setItem- 这似乎在使用数据方面有效,但在我切换标签时没有做任何事情来保存它

citeUrl(values, function(citation) 
    {
      count++;
      var string = citation[0];
      localforage.setItem(string, [citation[0],citation[1]], function(err, value) 
      {// Do other things once the value has been saved.
        console.log(value[0] + " " + value[1]);
      });
      /*var result = document.getElementById('cite[]');
      result.style.visibility = 'visible'; 
      result.style.display = 'block';
      result.innerHTML = citation[0];
      renderStatus(citation[1]);*/

      for(i = 0; i < count ; i++)
      {
        var newCitation = document.createElement('div');
        localforage.getItem(citation[i], function(err, value)
          {
            newCitation.innerHTML = value[1] + "<br>" + value[0];
          }
        );
        newCitation.style.backgroundColor = "white";
        newCitation.style.marginBottom = "7px";
        newCitation.style.padding = "6px";
        newCitation.style.boxShadow= "0 2px 6px rgba(0,0,0,0.4)";
        newCitation.style.borderRadius = "3px";
        document.getElementById("answered[]").appendChild(newCitation);
      }
    }

【问题讨论】:

标签: javascript google-chrome google-chrome-extension local-storage localforage


【解决方案1】:

localForage 建立在localStorage 和朋友的基础上。重要的部分是它绑定到您访问它的来源。

从内容脚本中使用它会使用网站的来源,例如在http://example.com/test 上使用您的扩展程序会将数据绑定到http://example.com/ 源,而在http://example2.com/test 上使用您的扩展程序会将数据绑定到附加到源http://example2.com/ 的一个完全独立的存储区。更重要的是,数据与页面自己的存储共享(并且可能会干扰)。

因此,使用localStorage(以及扩展名localForage)不允许在内容脚本中产生预期的结果(尽管如果您尝试操纵页面自己的存储,它可能仍然有用)。

因此,有 2 种可能性可以正确地做到这一点:

  1. 如果您必须使用它,请在后台脚本中使用localForage。在这种情况下,数据将绑定到来源chrome-extension://yourextensionidhere。但是,这不能从内容脚本中访问 - 您需要使用 Messaging 传递数据,这很烦人。

  2. 更好的、特定于扩展的方法:使用本机chrome.storage API,它在扩展的所有部分之间共享。此 API 专门用于解决需要传递数据的限制等问题。

  3. (赢得大量互联网积分方法)使用chrome.storage API 编写custom driver for localForage。这将允许人们轻松地在 Chrome 扩展程序和应用程序中使用它。显然是something already attempted

This question 可能有用。

【讨论】:

  • 谢谢!我决定使用 chrome.storage API,但由于某种原因,在记录所有其他语句之前,它不会执行 storage.sync 部分(至少在控制台上)——我做错了什么吗? 'getCurrentTabUrl(function(values) {citeUrl(values,function(citation){ v​​ar keys = ""+citation[0]; console.log(keys) chrome.storage.sync.set({keys:citation},function( ) {console.log("yay");}); var m = new Map(); m.set(1,"black"); m.forEach(function (item, key, mapObj) { console.log( item.toString());});'
  • 对不起,没有意识到它会如此奇怪地格式化它。这是一张图片:[链接](imgur.com/dtTNzM7)它会在记录'yay'之前记录'key is'语句和地图部分 - 这是我应该忽略的奇怪东西还是我的代码的实际问题?
  • chrome.storage 是异步的。其余代码在保存值并调用回调之前执行。更多解释请参见this question
猜你喜欢
  • 2023-04-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-07-20
  • 1970-01-01
  • 2015-05-20
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多