entityMap|blocks|key|fpkfp|text|更新2016：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|ei53s|Google+Chrome发布了存储API：|ecqjl|https://developer.chrome.com/docs/extensions/reference/storage/|3ovaf|它和其他Chrome+API一样易于使用，你可以在Chrome中的任何页面上下文中使用它。|p7ft|//+Save+it+using+the+Chrome+extension+storage+API.
++++chrome.storage.sync.set({'foo':+'hello',+'bar':+'hi'},+function()+{
++++++console.log('Settings+saved');
++++});

++++//+Read+it+using+the+storage+API
++++chrome.storage.sync.get(['foo',+'bar'],+function(items)+{
++++++message('Settings+retrieved',+items);
++++});|code-block|syntax|javascript|e3ne8|要使用它，请确保在清单中定义它：|5odjf|"permissions":+[
++++++"storage"
++++],|ct2oe|有"remove“、"clear”、"getBytesInUse“的方法，还有一个监听存储"onChanged”更改的事件侦听器。|d63ae|使用原生localStorage+(|ecvq8|2011年的旧回复|cbmg6|)|b0v3l|内容脚本在网页的上下文中运行，而不是在扩展页面的上下文中运行。因此，如果你从你的内容脚本访问localStorage，它将是来自该网页的存储，而不是扩展页面存储。|1365c|现在，要让您的内容脚本读取您的扩展存储(在选项页面中对其进行设置)，您需要使用扩展|4mrc8|消息传递|3tsme|..。|cf5ul|您要做的第一件事是告诉您的内容脚本向您的扩展发送一个请求来获取一些数据，这些数据可以是您的扩展localStorage：|bf6a|contentscript.js|7iuq|chrome.runtime.sendMessage({method:+"getStatus"},+function(response)+{
++console.log(response.status);
});|vuef|background.js|chf8|chrome.runtime.onMessage.addListener(function(request,+sender,+sendResponse)+{
++++if+(request.method+==+"getStatus")
++++++sendResponse({status:+localStorage['status']});
++++else
++++++sendResponse({});+//+snub+them.
});|2kts|您可以绕过这个问题来将通用localStorage数据获取到您的内容脚本中，或者获取整个localStorage数组。|3s41d|我希望这能帮助你解决问题。|1glj|为了花哨和普通..。|ff2dj|133eb|chrome.runtime.sendMessage({method:+"getLocalStorage",+key:+"status"},+function(response)+{
++console.log(response.data);
});|bb6nh|arc3g|chrome.runtime.onMessage.addListener(function(request,+sender,+sendResponse)+{
++++if+(request.method+==+"getLocalStorage")
++++++sendResponse({data:+localStorage[request.key]});
++++else
++++++sendResponse({});+//+snub+them.
});^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|1T|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|1U|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|1V|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|1W|9|@]|A|@]|B|$]]|$2|I|4|J|6|K|8|1X|9|@]|A|@]|B|$L|M]]|$2|N|4|O|6|7|8|1Y|9|@]|A|@]|B|$]]|$2|P|4|Q|6|K|8|1Z|9|@]|A|@]|B|$L|M]]|$2|R|4|S|6|7|8|20|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|21|9|@]|A|@]|B|$]]|$2|V|4|W|6|7|8|22|9|@]|A|@]|B|$]]|$2|X|4|Y|6|7|8|23|9|@]|A|@]|B|$]]|$2|Z|4|10|6|7|8|24|9|@]|A|@]|B|$]]|$2|11|4|12|6|7|8|25|9|@]|A|@]|B|$]]|$2|13|4|14|6|7|8|26|9|@]|A|@]|B|$]]|$2|15|4|16|6|7|8|27|9|@]|A|@]|B|$]]|$2|17|4|18|6|7|8|28|9|@]|A|@]|B|$]]|$2|19|4|1A|6|7|8|29|9|@]|A|@]|B|$]]|$2|1B|4|1C|6|K|8|2A|9|@]|A|@]|B|$L|M]]|$2|1D|4|1E|6|7|8|2B|9|@]|A|@]|B|$]]|$2|1F|4|1G|6|K|8|2C|9|@]|A|@]|B|$L|M]]|$2|1H|4|1I|6|7|8|2D|9|@]|A|@]|B|$]]|$2|1J|4|1K|6|7|8|2E|9|@]|A|@]|B|$]]|$2|1L|4|1M|6|7|8|2F|9|@]|A|@]|B|$]]|$2|1N|4|1A|6|7|8|2G|9|@]|A|@]|B|$]]|$2|1O|4|1P|6|K|8|2H|9|@]|A|@]|B|$L|M]]|$2|1Q|4|1E|6|7|8|2I|9|@]|A|@]|B|$]]|$2|1R|4|1S|6|K|8|2J|9|@]|A|@]|B|$L|M]]]]

<h1>Update 2016:</h1>
Google Chrome released the storage API: <a href="https://developer.chrome.com/docs/extensions/reference/storage/" rel="noreferrer">https://developer.chrome.com/docs/extensions/reference/storage/</a>
It is pretty easy to use like the other Chrome APIs and you can use it from any page context within Chrome.
<pre><code> // Save it using the Chrome extension storage API.
 chrome.storage.sync.set({'foo': 'hello', 'bar': 'hi'}, function() {
 console.log('Settings saved');
 });

 // Read it using the storage API
 chrome.storage.sync.get(['foo', 'bar'], function(items) {
 message('Settings retrieved', items);
 });
</code></pre>
To use it, make sure you define it in the manifest:
<pre><code> &quot;permissions&quot;: [
 &quot;storage&quot;
 ],
</code></pre>
There are methods to &quot;remove&quot;, &quot;clear&quot;, &quot;getBytesInUse&quot;, and an event listener to listen for changed storage &quot;onChanged&quot;
<h1>Using native localStorage (old reply from 2011)</h1>
Content scripts run in the context of webpages, not extension pages. Therefore, if you're accessing localStorage from your contentscript, it will be the storage from that webpage, not the extension page storage.
Now, to let your content script to read your extension storage (where you set them from your options page), you need to use extension <a href="http://developer.chrome.com/extensions/messaging.html" rel="noreferrer">message passing</a>.
The first thing you do is tell your content script to send a request to your extension to fetch some data, and that data can be your extension localStorage:
contentscript.js
<pre><code>chrome.runtime.sendMessage({method: &quot;getStatus&quot;}, function(response) {
 console.log(response.status);
});
</code></pre>
background.js
<pre><code>chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
 if (request.method == &quot;getStatus&quot;)
 sendResponse({status: localStorage['status']});
 else
 sendResponse({}); // snub them.
});
</code></pre>
You can do an API around that to get generic localStorage data to your content script, or perhaps, get the whole localStorage array.
I hope that helped solve your problem.
To be fancy and generic ...
contentscript.js
<pre><code>chrome.runtime.sendMessage({method: &quot;getLocalStorage&quot;, key: &quot;status&quot;}, function(response) {
 console.log(response.data);
});
</code></pre>
background.js
<pre><code>chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
 if (request.method == &quot;getLocalStorage&quot;)
 sendResponse({data: localStorage[request.key]});
 else
 sendResponse({}); // snub them.
});
</code></pre>

entityMap|blocks|key|dl7cm|text|另一种选择是使用chromestorage+API。这允许通过可选的跨会话同步来存储用户数据。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5qf6c|一个缺点是它是异步的。|51mj5|https://developer.chrome.com/extensions/storage.html^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

Another option would be to use the chromestorage API. This allows storage of user data with optional syncing across sessions.

One downside is that it is asynchronous.

<a href="https://developer.chrome.com/extensions/storage.html" rel="nofollow">https://developer.chrome.com/extensions/storage.html</a>

entityMap|blocks|key|4fkr4|text|有时使用它可能会更好|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6epmu|chrome.storage|bqpfe|API。它比localStorage更好，因为你可以：|84qqm|存储内容脚本中的信息|6nd8e|不需要消息传递|bop0i|在内容脚本和扩展之间；|8q31g|将数据存储为JavaScript对象|7b9i|而不将它们序列化为JSON+(|a2hpj|localStorage仅存储字符串|c0eg2|)。|1ldn2|下面是一个简单的代码，演示了chrome.storage的用法。Content+script获取访问页面的url和时间戳并存储，popup.js从存储区获取。|88crt|内容|baier|_|e33ff|script.js|ujsn|(function+()+{
++++var+visited+=+window.location.href;
++++var+time+=+%2Bnew+Date();
++++chrome.storage.sync.set({'visitedPages':{pageUrl:visited,time:time}},+function+()+{
++++++++console.log("Just+visited",visited)
++++});
})();|code-block|syntax|javascript|bgraj|popup.js|35ckt|(function+()+{
++++chrome.storage.onChanged.addListener(function+(changes,areaName)+{
++++++++console.log("New+item+in+storage",changes.visitedPages.newValue);
++++})
})();|bfm1a|"Changes“在这里是一个对象，它包含给定key的旧值和新值。"AreaName“参数是指存储区域的名称，可以是”local“、”sync“或”managed“。|74c2k|记得在manifest.json中声明存储权限。|61p4q|manifest.json|brrle|...
"permissions":+[
++++"storage"
+],
...^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|1J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|1K|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|1L|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|1M|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|1N|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|1O|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|1P|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|1Q|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|1R|9|@]|A|@]|B|$]]|$2|S|4|T|6|7|8|1S|9|@]|A|@]|B|$]]|$2|U|4|V|6|7|8|1T|9|@]|A|@]|B|$]]|$2|W|4|X|6|7|8|1U|9|@]|A|@]|B|$]]|$2|Y|4|Z|6|7|8|1V|9|@]|A|@]|B|$]]|$2|10|4|11|6|7|8|1W|9|@]|A|@]|B|$]]|$2|12|4|13|6|14|8|1X|9|@]|A|@]|B|$15|16]]|$2|17|4|18|6|7|8|1Y|9|@]|A|@]|B|$]]|$2|19|4|1A|6|14|8|1Z|9|@]|A|@]|B|$15|16]]|$2|1B|4|1C|6|7|8|20|9|@]|A|@]|B|$]]|$2|1D|4|1E|6|7|8|21|9|@]|A|@]|B|$]]|$2|1F|4|1G|6|7|8|22|9|@]|A|@]|B|$]]|$2|1H|4|1I|6|14|8|23|9|@]|A|@]|B|$15|16]]]]

Sometimes it may be better to use <a href="http://developer.chrome.com/extensions/storage.html" rel="noreferrer">chrome.storage</a> API. It's better then localStorage because you can:

<ul>
<li>store information from your content script without the need for
message passing between content script and extension; </li>
<li>store your data as JavaScript objects without serializing them to JSON (<a href="https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage">localStorage only stores strings</a>).</li>
</ul>

Here's a simple code demonstrating the use of chrome.storage. Content script gets the url of visited page and timestamp and stores it, popup.js gets it from storage area. 

content_script.js

<pre><code>(function () {
 var visited = window.location.href;
 var time = +new Date();
 chrome.storage.sync.set({'visitedPages':{pageUrl:visited,time:time}}, function () {
 console.log("Just visited",visited)
 });
})();
</code></pre>

popup.js

<pre><code>(function () {
 chrome.storage.onChanged.addListener(function (changes,areaName) {
 console.log("New item in storage",changes.visitedPages.newValue);
 })
})();
</code></pre>

"Changes" here is an object that contains old and new value for a given key. "AreaName" argument refers to name of storage area, either 'local', 'sync' or 'managed'.

Remember to declare storage permission in manifest.json. 

manifest.json

<pre><code>...
"permissions": [
 "storage"
 ],
...
</code></pre>

I have an options page where the user can define certain options and it saves it in localStorage: <code>options.html</code>

Now, I also have a content script that needs to get the options that were defined in the <code>options.html</code> page, but when I try to access localStorage from the content script, it doesn't return the value from the options page.

How do I make my content script get values from localStorage, from the options page or even the background page?

Chrome extension: accessing localStorage in content script

数据存储

JSON

 我有一个选项页面，用户可以在其中定义某些选项，并将其保存在localStorage中： 现在，我还有一个内容脚本，它需要获取在 页面，但是当我尝试从内容脚本访问localStorage时，它没有从options页面返回值。 我如何让我的内容脚本从localStorage，从选项页面，甚至从背景页面获取值？

问Chrome扩展:在内容脚本中访问localStorage
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chrome扩展:在内容脚本中访问localStorageEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chrome扩展:在内容脚本中访问localStorage
EN