/*======================================================= 函數功能：保存日志到本地數據庫 =======================================================*/ function saveLog(str) { var db = window.openDatabase("web", "1.1", "log", 1024 * 1024); // 創建或打開數據庫失敗 if(!db) { return; } // 創建表 db.transaction(function(tx) { tx.executeSql("CREATE TABLE if not exists log (createtime TEXT, content TEXT)"); }); // 插入記錄 db.transaction(function(tx) { tx.executeSql("INSERT INTO log (createtime, content) values(?, ?)", [new Date().Format("yyyyMMdd hh:mm:ss"), str], null, null); }); } /*======================================================= 函數功能：查詢本地數據庫里的日志信息 =======================================================*/ function selectLog(sql) { var db = window.openDatabase("web", "1.1", "log", 1024 * 1024); // 創建或打開數據庫失敗 if(!db) { return; } // 查詢數據 db.transaction(function(tx) { if(sql == undefined || sql == "") { sql = "SELECT * FROM log"; } tx.executeSql(sql, [], function(tx, result) { for(var i = 0; i < result.rows.length; i++) { console.warn( result.rows.item(i)['content']); } }, function() { console.error("查詢失敗! 原因：1、沒有創建表; 2、表中無數據"); }); }); } /*======================================================= 函數功能：清空數據庫表數據 =======================================================*/ function clearLog() { var db = window.openDatabase("web", "1.1", "log", 1024 * 1024); // 創建或打開數據庫失敗 if(!db) { return; } db.transaction(function(tx) { tx.executeSql("DROP TABLE log"); }); }
1.需求背景:當用戶在頁面上添加一行一行的數據時，突然發現網絡斷掉了，頁面上編輯的數據沒法保存進數據庫，所以需要一個本地端的臨時保存功能，以便在網絡通暢后重新加載出來！
2.解決方案:
結合網上搜刮，考慮到了這幾種方式：1)采用cookie; 2)看能不能采用瀏覽器的頁面緩存來模擬 3)使用html5
1)cookie使用(做測試是直接用瀏覽器打開沒有效果,需要放到站點下)
所有瀏覽器都支持，所以不需要去考慮兼容性的問題;
瀏覽器對於同一domain最多支持20個左右cookie，每個cookie的長度也有限制，超長部分就會被截掉
過期的限制:在cookie的生命周期內有效，過期就會被清掉
還有就是每次對服務器的請求cookie都會附帶上去增加了網絡帶寬
鑒於以上幾點考慮,並且項目中希望以文件形式存儲，不予考慮！
cookie存儲操作示例:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
function
setCookie() {
var
value = $(
'#data'
).val();
if
(value !=
''
&& $.trim(value) !=
''
) {
var
expireDate =
new
Date();
expireDate.setTime(expireDate.getTime() + 30 * 24 * 3600 * 1000);
document.cookie =
"data="
+ escape(value) + (
"; expires="
+ expireDate.toGMTString());
}
else
{
alert(
'請輸入要存儲的數據！'
);
}
}
function
getCookie() {
if
(document.cookie.length > 0) {
var
startIndex = 5;
var
endIndex = document.cookie.indexOf(
";"
, 0);
var
data =
""
;
if
(endIndex != -1) {
data = unescape(document.cookie.substring(startIndex, endIndex));
}
else
{
data = unescape(document.cookie.substring(startIndex, document.cookie.length));
}
$(
'#data-display'
).html(data);
}
}
|
2).localStorage
html5本地存儲分為兩種，一是key-value對的形式存儲，一種是DateBase存儲;
1.key-value本地存儲有sessionStorage和localStorage兩種
sessionStorage:會話存儲，生命期從進入網站開始，從關閉網站后結束
localStorage:本地存儲,即使關閉瀏覽器，再次打開時同樣能夠讀取到存儲的數據，這也是其與sessionStorage的區別
示例:
|
1
2
|
window.localStorage.setItem(
'name'
,
'istone'
);
window.localStorage.getItem(
'name'
);
|
2.html5本地數據庫,提供了一套API來操作
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
var
db = openDatabase(
'mydb'
,
'1.0'
,
'Test DB'
, 2 * 1024 * 1024);
var
msg;
db.transaction(
function
(tx) {
tx.executeSql(
'CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'
);
tx.executeSql(
'INSERT INTO LOGS (id, log) VALUES (1, "foobar")'
);
tx.executeSql(
'INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'
);
msg =
'<p>Log message created and row inserted.</p>'
;
document.querySelector(
'#status'
).innerHTML = msg;
});
db.transaction(
function
(tx) {
tx.executeSql(
'SELECT * FROM LOGS'
, [],
function
(tx, results) {
var
len = results.rows.length, i;
msg =
"<p>Found rows: "
+ len +
"</p>"
;
document.querySelector(
'#status'
).innerHTML += msg;
for
(i = 0; i < len; i++){
msg =
"<p><b>"
+ results.rows.item(i).log +
"</b></p>"
;
document.querySelector(
'#status'
).innerHTML += msg;
}
},
null
);
});
|
瀏覽器支持情況
3)h5File API
對於頁面數據的保存，采用js庫將數據json化,如:JSON.stringify(),IE的數據保存網上搜到是調用瀏覽器'另存為'的功能來保存成 txt，而對於chrome的數據保存調用html5的API接口blob封裝數據提供給a標簽的href,文件名提供給download
對於本地文件的讀取，采用html5 fileAPI:FileReader,通過readAsText方法讀取到本地json串,JSON.parser()轉回去.
