手把手教你開發Chrome擴展三：關於本地存儲數據

1. 手把手教你開發chrome擴展一：開發Chrome Extenstion其實很簡單
2. 手把手教你開發Chrome擴展二：爲html添加行爲
3. 手把手教你開發Chrome擴展三：關於本地存儲數據

HTML5中的localStorage

localStorage與cookie相似，它是存儲在客戶端瀏覽器中的數據，它與cookie不一樣的一點是它沒有時間限制。localStorage屬於html5中的新特性，在瀏覽器支持localStorage統計中，Chrome4+、Firefox3.5+、IE8+、IE7兼容模式、Safari4+、Opera10.5+都是支持localStorage的。如下代碼能夠用於檢測你的瀏覽器是否支持localStorage：

?

if(window.localStorage){     alert('你的瀏覽器支持localStorage!'); }else{     alert('瀏覽器不支持localStorage!'); }

localStorage是以key/value方式來進行存儲的，而且value只能是字符串形式，若是你要使用其餘數據類型，須要進行相應的轉換。設置和獲取localStorage方法是使用localStorage.key，或localStorage[key]的形式，如：

?

localStorage.myName='walkingp'; localStorage['mySite']=' http://www.cnblogs.com/walkingp'; alert('name:' + localStorage.myName +'\rsite:' + localStorage['mySite']);

修改其值就是從新設置相應的localStorage項取值。移除其值能夠將其值設爲null。

?

localStorage['mySite']=null;

也可使用localStorage自帶方法getItem()、setItem()和removeItem()來進行相應的獲取、設置和移除localStorage項。

?

localStorage.setItem('age','24'); var age=localStorage.getItem('age'); alert('age:' + age);//age:24 localStorage.removeItem('age'); age=localStorage.getItem('age'); alert('age? ' + age);//age? null

可使用clear()方法來清空全部localStorage。

對於不一樣域的localStorage，如本地和a.com，二者不影響對方。

關於localStorage本地存儲大小，有人測試結果是其餘瀏覽器爲5M，Firefox沒有做限制。而cookie通常只有幾K，可見localStorage很是適合作稍大一些的數據存儲，固然對於Chrome等擴展開發是很是合適的。

瀏覽器中的localStorage管理工具

Chrome和Safari均有本身的本地localStorage查看和管理工具，Firefox擁有第三方插件能夠管理localStorage，Chrome中位於開發人員工具中的Resources左側的Databases（可能稍早一點的版本位於單獨出來的工具欄）。咱們上面的localStorage在Chrome查看以下，利用這個工具能夠修改或者刪除相應項。

Safari中須要先在「偏好設置」、「高級」中將「在菜單中顯示開發選項」勾選。

開始存儲咱們的localStorage

以上是咱們須要瞭解的關於localStorage的知識，接下來就是把這個知識應用到咱們Chrome擴展中。咱們的數據存儲分爲兩個部分，一是每項task須要存儲的內容，它是以JSON的形式來存儲的，形式以下：

?

task1:{"id":1,"task_item":"新任務","add_time":"2011-04-04T03:20:34.879Z","is_finished":false}

task1表示key項，後臺的JSON表示value項。意義很簡單明瞭，其中is_finished表示當前任務是否已完成。當更新任務狀態時就是將此項取值進行相應的更改。

還要放一個指向當前任務的數據，讓它充當指針的做用，這樣在添加新項時就不須要查詢已有task項的id了。

?

'Tasks:index':1

下面是咱們代碼的具體實現，首先開始初始化數據：

?

var Tasks = {     //指針     index:window.localStorage.getItem('Tasks:index'),     //初始化     init:function(){         if(!Tasks.index){             window.localStorage.setItem('Tasks:index',Tasks.index=0);         }         //初始化數據         if(window.localStorage.length-1){             var task_list=[];             var key;             for(var i=0,len=window.localStorage.length;i<len;i++){                 key=window.localStorage.key(i);                 if(/task:\d+/.test(key)){                     task_list.push(JSON.parse(window.localStorage.getItem(key)));                 }             }             for(var i=0,len=task_list.length;i<len;i++){                 Tasks.AppendHtml(task_list[i]);             }         }     }, //*** }

而後是分別是增長項Add()、修改項Edit()和刪除項Del()的方法：

?

//增長 Add:function(task){     //更新指針     window.localStorage.setItem('Tasks:index', ++Tasks.index);     task.id=Tasks.index;     window.localStorage.setItem("task:"+ Tasks.index, JSON.stringify(task)); }, //修改 Edit:function(task){     window.localStorage.setItem("task:"+ task.id, JSON.stringify(task)); }, //刪除 Del:function(task){     window.localStorage.removeItem("task:"+ task.id); }, //***

其中的JSON.stringify是JSON將Javascript數據結構轉換爲JSON文本的方法，它與eval()爲互操做。詳情可見http://json.org/js.html 。

這樣咱們就將一個簡單的Chrome擴展完成了，演示效果圖以下：

固然它如今的功能還不夠強大，咱們還能夠對它進行繼續擴展，好比任務排序、任務分組、網絡存儲、定時提醒等。

系列文章至此暫時結束，所有代碼包括生成後.crx文件已經打包，下載請點擊此處。可能已有代碼有一些處理不完善的地方，歡迎你們一一指出，共同進步！