Chrome扩展基础---储存数据

通常Chrome扩展使用以下三种方法中的一种来储存数据:

第一种是使用HTML5的localStorage;

可以看成是特殊的JavaScript变量,对于一般的扩展,“设置”这种简单的数据可以优先选择第一种,这种方法使用简单;

第二种是使用Chrome提供的存储API;

对于结构稍微复杂一些的数据可以优先选择第二种,该方法可以保存任意类型的数据,但需要异步调用Chrome的API,结果需要使用回调函数接收,不如第一种操作简单

第三种是使用Web SQL Database。

目前使用的不算太多,因为需要使用SQL语句对数据库进行读写操作,较前两者更加复杂,但是对于数据量庞大的应用来说是个不错的选择。

开发者应根据实际的情况选择上述三种方法中的一种或几种来存储扩展中的数据。

使用Chrome提供的存储API

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

1、如果储存区域指定为sync,数据可以自动同步;

2、content_scripts可以直接读取数据,而不必通过background页面;

3、在隐身模式下仍然可以读出之前存储的数据;

4、读写速度更快;

5、用户数据可以以对象的类型保存。

对于第二点要进一步说明一下。首先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。

get方法即为读取数据,完整的方法为:

chrome.storage.StorageArea.get(keys, function(result){

console.log(result);

});

keys可以是字符串、包含多个字符串的数组或对象。如果keys是字符串,则和localStorage的用法类似;如果是数组,则相当于一次读取了多个数据;如果keys是对象,则会先读取以这个对象属性名为键值的数据,如果这个数据不存在则返回keys对象的属性值(比如keys为{'name':'Billy'},如果name这个值存在,就返回name原有的值,如果不存在就返回Billy)。如果keys为一个空数组([])或空对象({}),则返回一个空列表,如果keys为null,则返回所有存储的数据。

getBytesInUse方法为获取一个数据或多个数据所占用的总空间,返回结果的单位是字节,完整方法为:

chrome.storage.StorageArea.getBytesInUse(keys, function(bytes){

console.log(bytes);

});

此处的keys只能为null、字符串或包含多个字符串的数组。

set方法为写入数据,完整方法为:

chrome.storage.StorageArea.set(items, function(){

//do something

});

items为对象类型,形式为键/值对。items的属性值如果是字符型、数字型和数组型,则储存的格式不会改变,但如果是对象型和函数型的,会被储存为“{}”,如果是日期型和正则型的,会被储存为它们的字符串形式。

remove方法为删除数据,完整方法为:

chrome.storage.StorageArea.remove(keys, function(){

//do something

});

其中keys可以是字符串,也可以是包含多个字符串的数组。

clear方法为删除所有数据,完整方法为:

chrome.storage.StorageArea.clear(function(){

//do something

});

请注意,上述五种完整方法中,StorageArea必须指定为local或sync中的一个。

Chrome同时还为存储API提供了一个onChanged事件,当存储区的数据发生改变时,这个事件会被激发。

onChanged的完整方法为:

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。

使用Web SQL Database存储

Web SQL Database的三个核心方法为openDatabase、transaction和executeSql。openDatabase方法的作用是与数据库建立连接,transaction方法的作用是执行查询,executeSql方法的作用是执行SQL语句。

下面举一个简单的例子:

db = openDatabase("db_name", "0.1", "This is a test db.", 1024*1024);

if(!db){

alert('数据库连接失败。');

}

else {

db.transaction( function(tx) {

tx.executeSql(

"SELECT COUNT(*) FROM db_name",

[],

function(tx, result){

console.log(result);

},

function(tx, error){

alert('查询失败:'+error.message);

}

);

}

}

以上几种数据的存储方式都不会对数据加密,如果储存的是敏感的数据,应该先进行加密处理。比如不要将用户密码的明码直接储存,而应先进行MD5加密。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335

推荐阅读更多精彩内容