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

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

工具/原料

chrome浏览器

文本编辑器

1、HTML5 LocalStorage

1、HTML5 LocalStorage是HTML5标沼敫裣秤准的一部分，大部分浏览器都提供了支持。localStorag髫潋啜缅e是以key--value对的形式存储的，key和value都只能是字符串类型，如果你提供的是其他类型，存储的时候也会被自动转换为字符串。

2、获取值(假设变量名称是aa)var v=localStorage.aavar 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()

3、检测localStorage是否可用if(window.localStorage){alert('可用');}else{alert('不可用');}

4、使用localStorage存储json类型的数据：获取数据var v=JSON.parse(localStorage.getItem("aa"))存储数据localStorage.setItem("aa", JSON.stringify(v))

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

2、chrome.storage API

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

2、获取chrome.storage.local.get(keys, function(valueArray) { alert(valueArray) });

3、设置chrome.storage.local.set({'value': theValue}, function() { alert('存储成功') });

4、清除存储项chrome.storage.local.remove(keys，function() { alert('清除成功') })

5、清除全部存储项chrome.storage.local.clear(function() { alert('清除全部存储项成功') })

html5 localStorage实例

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

2、扩展启动时将localStorage里的数据提取到变量中：g_newsArr=JSO鲍伊酷雪N.parse(localStorage['newsArr'稆糨孝汶;]);变量变化时将数据存储到localStorage中：localStorage['newsArr']=JSON.stringify(g_newsArr);下面是代码截图

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

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