Chrome storage存储 API使用详解_chrome.storage.local.get_赵一舟的博客

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

耍酷的人字拖 · js 如何监听浏览器关闭 - ...· 1 月前 ·

好帅的小马驹 · [GIN-debug] [ERROR] ...· 5 月前 ·

小胡子的麦片 · 模式 : WPF ...· 5 月前 ·

健壮的野马 · DataExcel 设置单元格，列，行只读 ...· 1 年前 ·

阳刚的板凳 · Outlook for Mac ...· 1 年前 ·

Chrome 为扩展应用提供了存储 API，以便将扩展中需要保存的数据写入本地磁盘。Chrome 提供的存储 API 可以说是对 localStorage 的改进，它与 localStorage 相比有以下区别：

用户数据可以通过 Chrome 浏览器的同步功能自动同步（使用 storage.sync ）
content_scripts 可以直接读取数据，而不必通过 background 页面
在隐身模式下仍然可以读出之前存储的数据
读写速度更快
用户数据可以以对象的类型保存（ localStorage API 以字符串方式存储数据）。

对于第二点要进一步说明一下。首先 localStorage 是基于域名的。而 content_scripts 是注入到用户当前浏览页面中的，如果 content_scripts 直接读取 localStorage ，所读取到的数据是用户当前浏览页面所在域中的。

所以通常的解决办法是 content_scripts 通过 runtime.sendMessage 和 background 通信，由 background 读写扩展所在域（通常是 chrome-extension://extension-id/ ）的 localStorage ，然后再传递给 content_scripts 。

使用 Chrome 存储 API 必须要在 Manifest 的 permissions 中声明 "storage" ，之后才有权限调用。

Chrome 存储 API 提供了 2 种储存区域，分别是 sync 和 local 。两种储存区域的区别在于， sync 储存的区域会根据用户当前在 Chrome 上登陆的 Google 账户自动同步数据，当无可用网络连接可用时， sync 区域对数据的读写和 local 区域对数据的读写行为一致。

对于每种储存区域，Chrome 又提供了 5 个方法，分别是 get 、 getBytesInUse 、 set 、 remove 和 clear 。

在 sync 区域存储和读取数据：

chrome.storage.sync.set({key: value}, function() {
    console.log('Value is set to ' + value);
chrome.storage.sync.get(['key'], function(result) {
    console.log('Value currently is ' + result.key);
local 区域： 
chrome.storage.local.set({key: value}, function() {
    console.log('Value is set to ' + value);
chrome.storage.local.get(['key'], function(result) {
    console.log('Value currently is ' + result.key);
// 从存储中读取数据
chrome.storage.sync.get('user1', function(result) {
    document.write('name: ' + result['user1'].name + '<br>' + 'age: ' + result['user1'].age );
现在我们能在页面上看到刚存储的数据： 
在 get() 方法中 keys 可以是字符串、包含多个字符串的数组或对象。 
如果 keys是字符串，则和 localStorage 的用法类似（见上例）；如果是数组，则相当于一次读取了多个数据。 
var user1 = {'name': 'diego', 'age': 18}
var user2 = {'name': 'tony', 'age': 19}
// 往存储中写入数据
chrome.storage.sync.set({'user2': user2}, function() {
    console.log('保存成功');
chrome.storage.sync.set({'user1': user1}, function() {
    console.log('保存成功');
// 从存储中读取数据
chrome.storage.sync.get(['user1', 'user2'], function(result) {
    document.write(
        'name: ' + result['user1'].name + '<br>' + 'age: ' + result['user1'].age 
        + '<hr>' 
        + 'name: ' + result['user2'].name + '<br>' + 'age: ' + result['user2'].age
如果 keys 是对象，则会先读取以这个对象属性名为键值的数据，如果这个数据不存在则返回 keys 对象的属性值（比如 keys 为 {'name':'Billy'}，如果 name 这个值存在，就返回 name 原有的值，如果不存在就返回 'Billy'）。 
var user1 = {'name': 'diego', 'age': 18}
var default_user = {'name': 'default_user', 'age': 18}
// 往存储中写入数据
chrome.storage.sync.set({'user1': user1}, function() {
    console.log('保存成功');
// 从存储中读取数据
chrome.storage.sync.get({'user2': default_user}, function(result) {
    document.write('name: ' + result['user2'].name + '<br>' + 'age: ' + result['user2'].age );
因为 'user2' 这个值是不存在的，所以返回的是 default_user 这个对象；如果换成 'user1' 这个存在的值，则会返回 user1 这个对象。 
如果 keys 为一个空数组（[]）或空对象（{}），则返回一个空列表，如果 keys 为 null，则返回所有存储的数据。 
getBytesInUse() 方法为获取一个数据或多个数据所占用的总空间，返回结果的单位是字节，完整方法为： 
// sync 区域
chrome.storage.sync.getBytesInUse(keys, function(bytes){
    console.log(bytes);
// local 区域
chrome.storage.local.getBytesInUse(keys, function(bytes){
    console.log(bytes);
此处的 keys 只能为 null、字符串或包含多个字符串的数组。 
set() 方法为写入数据，完整方法为： 
// sync 区域
chrome.storage.sync.set(items, function(){
    //do something
// local 区域
chrome.storage.local.set(items, function(){
    //do something
items 为对象类型，形式为键/值对。items 的属性值如果是字符型、数字型和数组型，则储存的格式不会改变，但如果是对象型和函数型的，会被储存为 "{}"，如果是日期型和正则型的，会被储存为它们的字符串形式。 
remove() 方法为删除数据，完整方法为： 
// sync 区域
chrome.storage.sync.remove(keys, function(){
    //do something
// local 区域
chrome.storage.local.remove(keys, function(){
    //do something
其中 keys 可以是字符串，也可以是包含多个字符串的数组。 
clear() 方法为删除所有数据，完整方法为： 
// sync 区域
chrome.storage.sync.clear(function(){
    //do something
// local 区域
chrome.storage.local.clear(function(){
    //do something
chrome.storage.onChanged.addListener(function(changes, areaName){
    console.log('Value in '+areaName+' has been changed:');
    console.log(changes);
callback() 会接收到两个参数，第一个为 changes，第二个是 StorageArea。changes 是词典对象，键为更改的属性名称，值包含两个属性，分别为 oldValue 和 newValue；StorageArea 为 local 或 sync。 


 作者：SingleDiego
 链接：https://www.jianshu.com/p/f6ac6e3ee7a3
 来源：简书
 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
                    Chrome 为扩展应用提供了存储 API，以便将扩展中需要保存的数据写入本地磁盘。Chrome 提供的存储 API 可以说是对 localStorage 的改进，它与 localStorage 相比有以下区别：	用户数据可以通过 Chrome 浏览器的同步功能自动同步（使用 storage.sync）			content_scripts 可以直接读取数据，而不必通过 backgrou...
为了减少浏览器运行内存,background页面现在已更改为service_worker按需运行,即不使用的情况下service_worker会自动关闭,如果使用的话将再次开启,一段时间后又会自己关闭,并且每次调用开启的时候都会进行初始化,这将导致不能再像之前v2版本一样将变量存在全局,所以storage存储将变得更加重要
基础本地存储使用方法
 //执行存储
 chrome.storage.local.set({ 'value': theValue })
 //获取存储
 chrome...
npm i jest-chrome -D
 在安装过程中将chrome设置在全局范围内，以便在导入的模块中对其进行模拟。 将设置文件添加到jest.config.js ：
 // jest.config.js
module . exports = {
  // Add this line to your Jest config
  setupFilesAfterEnv : [ './jest.setup.js' ] ,
 使用安装文件将模拟的chrome对象分配给global对象：
 // jest.setup.js
Object . assign ( global , require ( 'jest-chrome' ) )
 从jest-chrome导入chrome以进行Intellisense和linting。 在全局范围内，这与chrome是同一对象。
 import { chrome } from 'jes
				本地存储
本地存储建议用chrome.storage而不是普通的localStorage，区别有好几点，个人认为最重要的2点区别是：
chrome.storage是针对插件全局的，即使你在background中保存的数据，在content-script也能获取到；
chrome.storage.sync可以跟随当前登录用户自动同步，这台电脑修改的设置会自动同步到其它电脑，很方便，如果没有登录或者未联网则先保存到本地，等登录了再同步至网络；
需要声明storage权限，有chrome.storage.sync
npm install --save chrome-storage-promise
bower install --save chrome-storage-promise
// set
chrome . storage . promise . local . set ( { 'foo' : 'bar' } ) . then ( function ( ) {
  // resolved
  console . log ( 'set' ) ;
} , function ( error ) {
  // rejected
  console . log ( error ) ;
} ) ;
// get
chrome . storage . promise . local . get ( 'foo' ) . then ( function ( it
将此存储库克隆到本地计算机
git https://github.com/bensonruan/Chrome-Web-Speech-API.git
 将您的本地主机指向克隆的根目录
使用Chrome浏览器浏览到 。
开始用声音打字
通过单击麦克风图标打开麦克风
允许浏览器访问您的麦克风
支持的浏览器
目前，它仅支持台式机和Android移动设备上的Google Chrome版本25或更高版本
-jQuery的
				Chrome为扩展应用提供了存储API，以便将扩展中需要保存的数据写入本地磁盘。Chrome提供的存储API可以说是对localStorage的改进，它与localStorage相比有以下区别：
·        如果储存区域指定为sync，数据可以自动同步；
·        content_scripts可以直接读取数据，而不必通过background页面；
·        在隐身模式
				使用 chrome.storage.local API 存储 options_page 页的配置信息，须在 manifes 文件里配置 options_page 和 permissions，页面已禁止内嵌的 js 和 css（style标签），须引入文件方可。
"options_page": "options.html",
"permissions": [
	"storage"
				undetected-chromedriver 是一个 Python 库，用于在使用 Selenium 自动化测试时绕过 Chrome 浏览器的自动化检测机制。以下是使用 undetected-chromedriver 的详细步骤：
1. 安装undetected-chromedriver：可以通过pip命令进行安装，如下所示：
pip install undetected-chromedriver
2. 导入必要的库：需要导入 `undetected_chromedriver`、`selenium` 和 `webdriver_manager` 等库，可以使用以下代码进行导入：
from undetected_chromedriver import Chrome
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from webdriver_manager.chrome import ChromeDriverManager
3. 创建 Chrome 实例：可以使用以下代码创建一个新的 Chrome 实例：
options = ChromeOptions()
driver = Chrome(options=options, enable_console_log=True)
4. 设置 Chrome 选项：可以使用以下代码设置 Chrome 的选项，例如禁用图片、启用无头模式等：
options = ChromeOptions()
options.add_argument("--disable-extensions")
options.add_argument("--disable-gpu")
options.add_argument("--disable-infobars")
options.add_argument("--disable-notifications")
options.add_argument("--disable-popup-blocking")
options.add_argument("--disable-web-security")
options.add_argument("--incognito")
options.add_argument("--no-sandbox")
options.add_argument("--start-maximized")
options.add_argument("--headless")
5. 使用 Chrome 进行自动化测试：可以使用以下代码来访问网站并执行自动化测试：
url = "https://www.example.com"
driver.get(url)
element = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.XPATH, "//input[@name='q']")))
element.send_keys("undetected-chromedriver")
element.submit()
print(driver.page_source)
通过上述步骤，您可以成功地使用 undetected-chromedriver 来进行 Chrome 自动化测试，并绕过 Chrome 的自动化检测机制。
                    CSDN-Ada助手: 
                    非常感谢博主为我们带来了这篇如此精简且实用的gitee教程，相信对很多人来说都是非常有帮助的。您的文章真正做到了精简而不失内容，不仅让人受益匪浅，而且阅读起来也非常流畅。希望博主能够继续分享更多的知识和经验，让更多人受益。再次感谢您对技术分享做出的贡献！
为了方便博主创作，提高生产力，CSDN上线了AI写作助手功能，就在创作编辑器右侧哦～（https://mp.csdn.net/edit?utm_source=blog_comment_recall ）诚邀您来加入测评，到此（https://activity.csdn.net/creatActivity?id=10450&utm_source=blog_comment_recall）发布测评文章即可获得「话题勋章」，同时还有机会拿定制奖牌。
                win10下Elasticsearch安装配置完整教程
                    我真是佩服你们这些人，教程全都一模一样，你们真的安装过吗？我不相信你们现在全部用的jdk8以上的版本，但是你们的教程全都忽略了这个问题，找遍网上就没有一个教程说过jdk版本问题。那麻烦你们介绍下支持jdk8的版本行吧？
                温湿度采集bc20模块stm32底板阿里云物联网上传实例
                    � ult: 
                    请问cjson.h文件里应该包含什么内容
                阿里云接入BC260YCN物联网开发入门教程
                    C 初级: 
                    有没有推送数据的下文
                requireJS的基本用法
                    Shfivey: 
                    就一个require用法 两行代码的事，你看你bb的啥都