轉載：http://www.cnblogs.com/walkingp/archive/2011/04/04/2003875.html
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'
;
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文件已經打包，下載請點擊此處。可能已有代碼有一些處理不完善的地方，歡迎大家一一指出，共同進步！