chrome扩展开发：[11]本地存储

chrome扩展开发：[11]本地存储

介绍了chrome扩展中用到的两种存储方式，HTML5 LocalStorage和chrome.storage

HTML5 LocalStorage是HTML5标准的一部分，大部分浏览器都提供了支持。

localStorage是以key--value对的形式存储的，key和value都只能是字符串类型，如果你提供的是其他类型，存储的时候也会被自动转换为字符串。

获取值(假设变量名称是aa)

var v=localStorage.aa

var v=localStorage["aa"]

var v=localStorage.getItem("aa");

设置值(假设变量名称是aa，要设置的值是"value1")

localStorage.aa="value1";

localStorage["aa"]="value1";

localStorage.setItem("aa","value1");

清除存储项

localStorage.removeItem("aa")

清除全部存储项

localStorage.clear()

检测localStorage是否可用

if(window.localStorage){alert('可用');}else{alert('不可用');}

使用localStorage存储json类型的数据：

获取数据

var v=JSON.parse(localStorage.getItem("aa"))

存储数据

localStorage.setItem("aa", JSON.stringify(v))

注意，localStorage是以域为单位进行操作的，不同域的localStorage是完全隔离的。

chrome.storage API是chrome扩展特有的api，它和HTML5 LocalStorage一个显著不同是可以存取object数据。也是以键-值的形式存取。

获取

chrome.storage.local.get(keys, function(valueArray) {

alert(valueArray)

});

设置

chrome.storage.local.set({'value': theValue}, function() {

alert('存储成功')

});

清除存储项

chrome.storage.local.remove(keys，function() {

alert('清除成功')

})

清除全部存储项

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

alert('清除全部存储项成功')

})

用localStorage做一个实例，记录前面例子中的新闻列表，这样，下次打开浏览器时，上次的新闻列表依然存在。

扩展启动时将localStorage里的数据提取到变量中：

g_newsArr=JSON.parse(localStorage['newsArr']);

变量变化时将数据存储到localStorage中：

localStorage['newsArr']=JSON.stringify(g_newsArr);

下面是代码截图

由于localStorage只能存储字符串，而我们要存取的变量时数组类型，所以使用了JSON.parse和JSON.stringigy，分别将字符串转化为数组和将数组转化为字符串

这样即使关闭浏览器后，下次启动时扔能看到上次保存的新闻列表

示例源码下载地址：http://pan.baidu.com/s/1gdgh2Av