360浏覽器、chrome開發擴充插件教程（3）關于本地存儲資料

轉載：http://www.cnblogs.com/walkingp/archive/2011/04/04/2003875.html

<code>if</code><code>(window.localStorage){</code>

<code>    </code><code>alert(</code><code>'你的浏覽器支援localStorage!'</code><code>);</code>

<code>}</code><code>else</code><code>{</code>

<code>    </code><code>alert(</code><code>'浏覽器不支援localStorage!'</code><code>);</code>

<code>}</code>

localStorage是以key/value方式來進行存儲的，并且value隻能是字元串形式，如果你要使用其他資料類型，需要進行相應的轉換。設定和擷取localStorage方法是使用localStorage.key，或localStorage[key]的形式，如：

<code>localStorage.myName=</code><code>'walkingp'</code><code>;</code>

<code>alert(</code><code>'name:'</code> <code>+ localStorage.myName +</code><code>'\rsite:'</code> <code>+ localStorage[</code><code>'mySite'</code><code>]);</code>

修改其值就是重新設定相應的localStorage項取值。移除其值可以将其值設為null。

<code>localStorage[</code><code>'mySite'</code><code>]=</code><code>null</code><code>;</code>

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

<code>localStorage.setItem(</code><code>'age'</code><code>,</code><code>'24'</code><code>);</code>

<code>var</code> <code>age=localStorage.getItem(</code><code>'age'</code><code>);</code>

<code>alert(</code><code>'age:'</code> <code>+ age);</code><code>//age:24</code>

<code>localStorage.removeItem(</code><code>'age'</code><code>);</code>

<code>age=localStorage.getItem(</code><code>'age'</code><code>);</code>

<code>alert(</code><code>'age? '</code> <code>+ age);</code><code>//age? null</code>

可以使用clear()方法來清空所有localStorage。

對于不同域的localStorage，如本地和a.com，兩者不影響對方。

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

Safari中需要先在“偏好設定”、“進階”中将“在菜單中顯示開發選項”勾選。

以上是我們需要了解的關于localStorage的知識，接下來就是把這個知識應用到我們Chrome擴充中。我們的資料存儲分為兩個部分，一是每項task需要存儲的内容，它是以JSON的形式來存儲的，形式如下：

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

task1表示key項，背景的JSON表示value項。意義很簡單明了，其中is_finished表示目前任務是否已完成。當更新任務狀态時就是将此項取值進行相應的更改。

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

<code>'Tasks:index'</code><code>:1</code>

下面是我們代碼的具體實作，首先開始初始化資料：

<code>var</code> <code>Tasks = {</code>

<code>    </code><code>//指針</code>

<code>    </code><code>index:window.localStorage.getItem(</code><code>'Tasks:index'</code><code>),</code>

<code>    </code><code>//初始化</code>

<code>    </code><code>init:</code><code>function</code><code>(){</code>

<code>        </code><code>if</code><code>(!Tasks.index){</code>

<code>            </code><code>window.localStorage.setItem(</code><code>'Tasks:index'</code><code>,Tasks.index=0);</code>

<code>        </code><code>}</code>

<code>        </code><code>//初始化資料</code>

<code>        </code><code>if</code><code>(window.localStorage.length-1){</code>

<code>            </code><code>var</code> <code>task_list=[];</code>

<code>            </code><code>var</code> <code>key;</code>

<code>            </code><code>for</code><code>(</code><code>var</code> <code>i=0,len=window.localStorage.length;i&lt;len;i++){</code>

<code>                </code><code>key=window.localStorage.key(i);</code>

<code>                </code><code>if</code><code>(/task:\d+/.test(key)){</code>

<code>                    </code><code>task_list.push(JSON.parse(window.localStorage.getItem(key)));</code>

<code>                </code><code>}</code>

<code>            </code><code>}</code>

<code>            </code><code>for</code><code>(</code><code>var</code> <code>i=0,len=task_list.length;i&lt;len;i++){</code>

<code>                </code><code>Tasks.AppendHtml(task_list[i]);</code>

<code>    </code><code>},</code>

<code>//***</code>

然後是分别是增加項Add()、修改項Edit()和删除項Del()的方法：

<code>//增加</code>

<code>Add:</code><code>function</code><code>(task){</code>

<code>    </code><code>//更新指針</code>

<code>    </code><code>window.localStorage.setItem(</code><code>'Tasks:index'</code><code>, ++Tasks.index);</code>

<code>    </code><code>task.id=Tasks.index;</code>

<code>    </code><code>window.localStorage.setItem(</code><code>"task:"</code><code>+ Tasks.index, JSON.stringify(task));</code>

<code>},</code>

<code>//修改</code>

<code>Edit:</code><code>function</code><code>(task){</code>

<code>    </code><code>window.localStorage.setItem(</code><code>"task:"</code><code>+ task.id, JSON.stringify(task));</code>

<code>//删除</code>

<code>Del:</code><code>function</code><code>(task){</code>

<code>    </code><code>window.localStorage.removeItem(</code><code>"task:"</code><code>+ task.id);</code>

這樣我們就将一個簡單的Chrome擴充完成了，示範效果圖如下：

當然它現在的功能還不夠強大，我們還可以對它進行繼續擴充，比如任務排序、任務分組、網絡存儲、定時提醒等。

本文轉自黃聰部落格園部落格，原文連結：http://www.cnblogs.com/huangcong/p/3531728.html，如需轉載請自行聯系原作者