早期web中使用cookies在客戶端保存注入用戶名等簡單的信息,但是,使用cookies存儲(chǔ)永久數(shù)據(jù)存在以下問題.
- cookies的大小限制在4kb,不適合大量的數(shù)據(jù)存儲(chǔ)
- 瀏覽器還限制站點(diǎn)可以在用戶計(jì)算機(jī)上存儲(chǔ)的cookies的數(shù)量
- cookies是隨HTTP失誤一起被發(fā)送的,因此會(huì)浪費(fèi)一部分帶寬.
LocalStorage && SessionStorage
HTML5提供了本地存儲(chǔ)的功能,以鍵值對的存儲(chǔ)解決方案,支持容量為4M,不需要使用安全插件,HTML的web Storage 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的方式.
- localStorage: 是一種沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)方式,可以永久性的將數(shù)據(jù)保存在客戶端
- sessionStorage:指的是針對一個(gè)session的數(shù)據(jù)存儲(chǔ),就是將數(shù)據(jù)保存在session對象中,當(dāng)關(guān)閉瀏覽器后,這些數(shù)據(jù)會(huì)被刪除.
在使用web存儲(chǔ)前,應(yīng)該使用typeof(Storage)=='undefined'函數(shù)來判斷是否支持storage.
webStorage支持的屬性及方法:
- getItem(key)
- key(index)
- length
- removeItem(key)
- setItem(key, value)
- clear()
WebSQL
webSql 并不是HTML5的規(guī)范組成部分, 而是單獨(dú)的規(guī)范.
HTML5對WebSQL的操作包含以下3個(gè)核心的方法.
- openDatabase: 使用現(xiàn)有的數(shù)據(jù)庫,或者新建數(shù)據(jù)庫來創(chuàng)建數(shù)據(jù)庫對象
- transaction: 這個(gè)方法允許我們執(zhí)行事務(wù)處理
- executeSql: 這個(gè)方法用于執(zhí)行SQL語句
openDatabase的參數(shù):
- name: 數(shù)據(jù)庫名字
- version: 數(shù)據(jù)庫版本號
- displayName: 數(shù)據(jù)庫描述
- estimatedSize; 數(shù)據(jù)庫存儲(chǔ)數(shù)據(jù)的大小(字節(jié)為單位)
- creationCallback: 回調(diào)函數(shù),可不傳
transaction的參數(shù):
- 一個(gè)匿名函數(shù),該匿名函數(shù)的參數(shù)是transaction對象的引用,可以使其來進(jìn)行增刪改查的操作
executeSql的參數(shù):
- sql: 要執(zhí)行的sql語句
- []:sql語句中的占位符'?' 對應(yīng)的值
- dataHandler: 執(zhí)行sql語句成功是調(diào)用的回調(diào)函數(shù)
- errorHandler: 執(zhí)行sql語句出錯(cuò)是調(diào)用的函數(shù)
<!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>標(biāo)題:'+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>標(biāo)題:</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>
