早期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>
