Web Storage本地存儲
汪坚
<!DOCTYPE html />
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<!--
HTML4使用cookies在客戶端保存簡單用戶信息，但cookie存儲永久數據有以下問題：
1.大小：cookies限制在4KB
2.帶寬：cookies隨HTTP一起發送，浪費帶寬
3.複雜性：要正確操縱cookies困難
HTML5提供了Web Storage功能，就是在Web上存儲數據的功能，分為：
sessionStorage：數據保存在session中。session用來保存用戶進入網站到瀏覽器關閉期間的任何數據
localStorage：數據保存在客戶本地硬盤中，即時瀏覽器關閉，數據仍存在
sessionStorage：
保存數據：sessionStorage.setItem(key,value);
讀取數據：sessionStorage.getItem(key);
localStorage：
保存數據：localStorage.setItem(key,value);
讀取數據：localStorage.getItem(key);
本地數據庫：
HTML5中內置了一個可通過SQL語言來訪問的數據庫
HTML5採用SQLLite這種數據庫作為本地數據庫
使用步驟：
1.創建訪問數據庫對象
var db = openDatabase('mydb','1.0','Test DB', 2*1024*1024);
參數依次：數據庫名，版本號，數據庫描述，數據庫大小。返回數據庫對象，不存在，則創建
2.使用事務處理
db.transaction(function(tx){
tx.executeSql('create table xx');
});
3.執行查詢
tx.executeSql(sqlquery,[],dataHandler,errorHandler);
例：tx.executeSql("update people set age=? where name=?;",[11,'66']);
dataHandler(transaction, results){...}
為執行SQL語句成功時回調函數
errorHandler(transaction, errmsg){...}
為執行SQL語句出錯時回調函數
當執行查詢時，results對象有一個rows屬性，保存了查詢的每條數據
可用以下方式獲取數據：
for(var i = 0;i<results.rows.length;i++){
rows[i]; //俄筆者使用此種格式在Chrome瀏覽器中無法訪問
rows.item(i);
}
-->
<input type="text" id="input" />
<div id="msg"></div>
<input type="button" value="保存數據" οnclick="saveStorage('input')" />
<input type="button" value="讀取數據" οnclick="loadStorage('msg')" />
<script type="text/javascript">
//保存數據
function saveStorage(id) {
var target = document.getElementById(id);
var str = target.value;
//sessionStorage.setItem("message", str);
localStorage.setItem("messageLocal", str);
};
//讀取數據
function loadStorage(id) {
var target = document.getElementById(id);
//var msg = sessionStorage.getItem("message");
var msg = localStorage.getItem("messageLocal");
target.innerHTML = msg;
};
</script>
<h1>簡單Web留言本</h1>
<textarea id="memo" cols="60" rows="10"></textarea><br />
<input type="button" value="追加" οnclick="save('memo');" />
<input type="button" value="初始化" οnclick="clearStorage();" />
<p id="msg2"></p>
<script type="text/javascript">
//保存數據
function save(id) {
var data = document.getElementById(id).value;
var time = new Date().getTime();
localStorage.setItem(time, data);
alert("數據已保存");
load("msg2");
};
//讀取數據
function load(id) {
var result = '';
for (var i = 0; i < localStorage.length; i++) {
//獲取key
var key = localStorage.key(i);
//獲取value
var value = localStorage.getItem(key);
result += (value + key) + '<br/>';
}
var target = document.getElementById(id);
target.innerHTML = result;
};
//清空數據
function clearStorage() {
localStorage.clear();
alert("清除全部數據");
load('msg2');
};
</script>
<h1>結合JSON對象(部份瀏覽器支持)，實現簡易數據庫</h1>
<div>
<table>
<tr>
<td>姓名</td>
<td><input type="text" id="name" /></td>
</tr>
<tr>
<td>EMAIL</td>
<td><input type="text" id="email" /></td>
</tr>
<tr>
<td>電話</td>
<td><input type="text" id="tel" /></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="保存" οnclick="saveRecord();" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" id="find" />
<input type="button" value="檢索" οnclick="findRecord('msg3');" />
</td>
</tr>
</table>
</div>
<div id="msg3"></div>
<script type="text/javascript">
function saveRecord() {
//構建一對象實例
var data = new Object();
data.name = document.getElementById('name').value;
data.email = document.getElementById('email').value;
data.tel = document.getElementById('tel').value;
//將該對象轉換為JSON格式的文本數據
var str = JSON.stringify(data);
//存儲數據
localStorage.setItem(data.name, str);
alert("數據已保存");
}
function findRecord(id) {
var find = document.getElementById('find').value;
//讀取數據
var str = localStorage.getItem(find);
//將localStorage中獲取的數據轉換為JSON對象，取其值
var data = JSON.parse(str);
var result = "姓名：" + data.name + "<br/>";
result += "EMAIL：" + data.email + "<br/>";
result += "電話：" + data.tel + "<br/>";
//顯示
var target = document.getElementById(id);
target.innerHTML = result;
}
</script>
<h1>使用HTML5內置數據庫，實現Web留言本</h1>
<div>
姓名：<input type="text" id="myName" />
留言：<input type="text" id="myMsg" />
<input type="button" value="保存" οnclick="saveDB();" />
<p id="datatable"></p>
</div>
<script type="text/javascript">
var datatable = null;
//打開數據庫連接，沒有則創建
var db = openDatabase('MyData', '', 'My Database Test', 102400);
//初始化數據庫，創建表
function init() {
datatable = document.getElementById('datatable');
showAllData();
};
//顯示數據庫表中所有信息
function showAllData() {
db.transaction(function (tx) {
//表不存在則創建
tx.executeSql("create table if not exists MsgData(name text,message text,time integer)", []);
//查詢表
tx.executeSql("select * from MsgData", [], function (tx, rs) {
removeAllData();
for (var i = 0; i < rs.rows.length; i++) {
showData(rs.rows.item(i));
}
});
});
};
//清空顯示數據
function removeAllData() {
for (var i = datatable.childNodes.length - 1; i >= 0; i--) {
datatable.removeChild(datatable.childNodes[i]);
}
};
//顯示數據
function showData(row) {
var div = document.createElement('div');
div.innerHTML = row.name + "：" + row.message + " " + row.time;
datatable.appendChild(div);
};
//將數據保存至數據庫中
function saveDB() {
var name = document.getElementById("myName").value;
var msg = document.getElementById("myMsg").value;
var time = new Date().getTime();
addData(name, msg, time);
showAllData();
};
//添加一條記錄
function addData(name, msg, time) {
db.transaction(function (tx) {
tx.executeSql('insert into MsgData values(?,?,?)', [name, msg, time],
function (tx, rs) { alert("成功保存數據"); },
function (tx, error) { alert(error.source + "：" + error.message); });
});
};
//初始化
init();
</script>
</body>
</html>
类似资料：