如何在Chrome扩展程序中本地保存信息?


78

我希望我的chrome扩展程序可以保存一些信息,但是我不确定如何启动代码...我需要它来保存字符串。例如-用户输入一个字符串(在弹出窗口上方的文本区域中),并且此字符串显示在弹出窗口中。当用户退出并返回时,我希望字符串保持不变。(我相信它必须保存它)我不想将其保存在服务器或类似的东西上,我希望将其保存在用户缓存或其他内容上。


用户退出时是指关闭该弹出窗口还是关闭浏览器?
塞格2011年

真的有关系吗?当他关闭浏览器时,它应该可以工作。
阿里埃勒(Ariel)

好的,那么localStorege是答案(否则,您可以只将值存储在后台页面中)
serg 2011年

如果您要保存的内容来自表单(例如options),则建议使用webext-options-sync。它基于chrome.storage.sync但也负责自动保存和自动恢复表单。
fregante

Answers:


128

现在,您也可以利用Google Chrome浏览器的storageAPI来执行此操作。不同于localStorage,这也可以从内容脚本访问。

//  Somewhere in your manifest...

{
    "permissions": [
        "storage"
    ]
}

//  Usage:

//  PERSISTENT Storage - Globally
//  Save data to storage across their browsers...

chrome.storage.sync.set({ "yourBody": "myBody" }, function(){
    //  A data saved callback omg so fancy
});

chrome.storage.sync.get(/* String or Array */["yourBody"], function(items){
    //  items = [ { "yourBody": "myBody" } ]
});

//  LOCAL Storage

// Save data to storage locally, in just this browser...

chrome.storage.local.set({ "phasersTo": "awesome" }, function(){
    //  Data's been saved boys and girls, go on home
});

chrome.storage.local.get(/* String or Array */["phasersTo"], function(items){
    //  items = [ { "phasersTo": "awesome" } ]
});

有关这些恶作剧如何工作的更多信息,请参见:https//developer.chrome.com/extensions/storage#type-StorageArea

前答案:

使用localStorage。Google Chrome浏览器实现了HTML5的某些功能,并且是其中之一。

//Pull text from user inputbox
var data = document.getElementById("this_input").value;
//Save it to the localStorage variable which will always remember what you store in it
localStorage["inputText"] = data; 

您应该注意,您只能从后台页面访问存储(无内容脚本),因此您必须为此使用消息传递。


4
谢谢!还有一件事-它保存在哪里?(我基本上可以在哪里找到此本地存储文件)
Ariel

没问题。:)嗯...我不确定。这是您必须询问的内容(如果存在)。顺便说一句,如果我有帮助,请检查我的答案。
mattsven 2011年

1
@BeauCielBleu您说得对,谢谢。更新。检查?
mattsven 2014年

@mattsven是的。并感谢您对同步/本地差异的解释;)
BeauCielBleu 2014年

1
@mattsven也许这是一个愚蠢的问题,但是如何从get回调中获取项目呢?我试图从那里返回一个变量或设置一个全局变量,但它不起作用。
真相

1

现在有一个特定的API,请在此处检查:https : //developer.chrome.com/extensions/storage

请注意,它仅在您的背景页面上可用,并且在孤立的世界中起作用(您无法访问网站的HTML5 localStorage中包含的值)。


7
这是一个非常令人困惑的表述。主要优点之一是,它确实可以在内容脚本中工作,而无需像消息传递这样的额外工作。
2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.