最近比较闲,于是抽空了解了一下html5本地存储,很好玩很强大。
目前支持浏览器:Chrome,opera, safari
内容:web storage 和 SQL Lite本地数据库
效果:
web storage:
点击保存数据就将input数据保存,读取数据便会将数据列出在input上面
SQL Lite本地数据库:
填写完name和message之后点击query便会插入数据,同时更新数据到页面上。
首先我们看下web storage代码:
<!DOCTYPE html>
<head>
<title>web storage test</title>
</head>
<script type="text/javascript">
function saveStorage(id){
var target = document.getElementById(id),
str = target.value;
localStorage.setItem("msg",str);//插入数据
//sessionStorage.setItem("msg",str);
//sessionStorage 和 localStorage 的差别和session与cookie差别一样,生命周期不同。
}
function loadStorage(id){
var target = document.getElementById(id),
str = localStorage.getItem("msg");//取出数据
//str = sessionStorage.getItem("msg");
target.innerHTML = str;
}
</script>
<body>
<h1>web storage 示例</h1>
<p id="msg"></p>
<input type="text" id="input" />
<input type="button" value="保存数据" οnclick="saveStorage('input');" />
<input type="button" value="读取数据" οnclick="loadStorage('msg');" />
</body>
</html>
代码很简单一看就清楚了,下面我们来看看 SQL Lite本地数据库的例子,我写的是一个简单的留言板功能:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>message board</title>
<style type="text/css">
.leave_message{width:284px;}
.leave_message dd,.leave_message dt{float:left;}
.leave_message dt{width:50px;}
.cb{clear:both;}
.query{ edui-filter-align-center }
</style>
<script type="text/javascript">
function getLocTime(nS) {//时间戳转换成标准时间
var t = new Date();
t.setTime(nS);
return t;
}
var datatable = null,db = openDatabase('Mydata','','My Database', 102400);//创建数据库, 参数1:数据库名, 参数2:数据库描述,参数3:数据库大小
function init(){
datatable = document.getElementById("datatable");
showAllData();
}
function showData(row){
var tbody = document.createElement('tr');
tbody.innerHTML = '<td>'+row.name+'</td><td>'+row.message+'</td><td>'+getLocTime(row.time)+'</td>'
datatable.appendChild(tbody);
}
function removeAllData(){
datatable.innerHTML = '';
var tr = document.createElement('tr');
tr.innerHTML = '<th>name</th><th>message</th><th>date</th>';
datatable.appendChild(tr);
}
function showAllData(){
db.transaction(function(tx){
tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT, message TEXT, time INTGER)',[]);//创建表
tx.executeSql('SELECT * FROM MsgData',[],function(tx,rs) {//回调函数
removeAllData();
for(var i=0; i<rs.rows.length;i++){
showData(rs.rows.item(i));
}
});
});
}
function addData(name,memo,time){
db.transaction(function(tx){
tx.executeSql('INSERT INTO MsgData VALUES(?, ?, ?)',[name,memo,time],function(tx, rs){//参数1,sql语句 “?”表示用后面的数组填充,参数3表示回调函数,参数4,错误处理函数
},
function(tx,error){
alert(error.source+'::'+error.message);
});
});
}
function saveData(){
var name = document.getElementById("name").value,
memo = document.getElementById("message").value,
time = new Date().getTime();
addData(name,memo,time);
showAllData();
}
</script>
</head>
<body οnlοad="init()">
<dl class="leave_message">
<dt>name:</dt>
<dd><input type="text" id="name" value="" /></dd>
<dt>message:</dt>
<dd><textarea id="message"></textarea></dd>
<div class="cb"></div>
<div class="query"><input type="button" value="Query" οnclick="saveData()" /></div>
</dl>
<table id="datatable" border="1"></table>
</body>
</html>
代码虽然看似很多,其实看方法名就清楚流程了。