早期web中使用cookies在客戶端保存注入用戶名等簡單的信息,但是,使用cookies存儲永久數據存在以下問題.
- cookies的大小限制在4kb,不適合大量的數據存儲
- 瀏覽器還限制站點可以在用戶計算機上存儲的cookies的數量
- cookies是隨HTTP失誤一起被發送的,因此會浪費一部分帶寬.
LocalStorage && SessionStorage
HTML5提供了本地存儲的功能,以鍵值對的存儲解決方案,支持容量為4M,不需要使用安全插件,HTML的web Storage 提供了兩種在客戶端存儲數據的方式.
- localStorage: 是一種沒有時間限制的數據存儲方式,可以永久性的將數據保存在客戶端
- sessionStorage:指的是針對一個session的數據存儲,就是將數據保存在session對象中,當關閉瀏覽器后,這些數據會被刪除.
在使用web存儲前,應該使用typeof(Storage)=='undefined'函數來判斷是否支持storage.
webStorage支持的屬性及方法:
- getItem(key)
- key(index)
- length
- removeItem(key)
- setItem(key, value)
- clear()
WebSQL
webSql 并不是HTML5的規范組成部分, 而是單獨的規范.
HTML5對WebSQL的操作包含以下3個核心的方法.
- openDatabase: 使用現有的數據庫,或者新建數據庫來創建數據庫對象
- transaction: 這個方法允許我們執行事務處理
- executeSql: 這個方法用于執行SQL語句
openDatabase的參數:
- name: 數據庫名字
- version: 數據庫版本號
- displayName: 數據庫描述
- estimatedSize; 數據庫存儲數據的大小(字節為單位)
- creationCallback: 回調函數,可不傳
transaction的參數:
- 一個匿名函數,該匿名函數的參數是transaction對象的引用,可以使其來進行增刪改查的操作
executeSql的參數:
- sql: 要執行的sql語句
- []:sql語句中的占位符'?' 對應的值
- dataHandler: 執行sql語句成功是調用的回調函數
- errorHandler: 執行sql語句出錯是調用的函數
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JOE</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-3.2.1.min.js">
</script>
<script type="text/javascript">
function getCurrentDB() {
var db = openDatabase('Demo.db', '1.0', 'demo database', 1024*1024);
return db;
}
function initDB() {
var db = getCurrentDB();
if(!db){
alert('不支持websql');
return;
}
db.transaction(function(tx){
tx.executeSql('create table if not exists Demo(username text null, title text null, content text null)',[],function(tx, result){}, function(tx, message){
alert(message);
});
});
}
window.onload = function(){
initDB();
}
function saveContent() {
var userName = document.getElementById('username').value;
var title = document.getElementById('title').value;
var content = document.getElementById('content').value;
var db = getCurrentDB();
alert(userName+' '+title+' '+content);
db.transaction(function(tx){
tx.executeSql('insert into Demo(username, title, content) values(?,?,?)',[userName,title,content], function(tx,result){},function(tx,result){
alert(message);
});
});
}
function showContent() {
var db = getCurrentDB();
db.transaction(function(tx){
tx.executeSql('select * from Demo',[],function(tx,result){
if(result){
for (var i = 0; i < result.rows.length; i++) {
// alert(result.rows);
appendDataWithResult(result.rows.item(i));
}
}
},function(tx,message){});
});
// alert('show');
}
function appendDataWithResult(item){
var strHtml = '<tr><td>用戶名:'+item.username+'</td></tr>'+'<td>標題:'+item.title+'</td></tr>'+'<td>留言:'+item.content+'</td></tr>';
$('#newTable').append(strHtml);
}
</script>
</head>
<body>
<div id="websql">
<table id="myTable">
<tr>
<td>用戶名:</td>
<td><input type="text" name="username" id="username" value="" required=""/></td>
</tr>
<tr>
<td>標題:</td>
<td><input type="text" name="title" id="title" value="" required=""/></td>
</tr>
<tr>
<td>留言:</td>
<td><input type="text" name="content" id="content" value="" required/></td>
</tr>
</table>
<hr />
<input type="button" name="show" id="show" value="顯示" onclick="showContent()"/>
<input type="button" name="" id="" value="保存" onclick="saveContent()" />
<table border="1px" cellspacing="" cellpadding="" id='newTable'>
</table>
<br />
</div>
</body>
</html>
