h5中提供了一种将键值对的数据保存在客户端的标准。跟cookie不同的是,它不会在每次请求服务器的时候上传至服务器(除非你自己实现该功能),因为这是h5的规范得到了浏览器的很好支持,不需额外的插件之类,h5提供了更大容量的数据存储空间(h5的建议是每个网站提供5M的存储空间),比cookie的4KB大太多。
h5中提供了两种本地存储机制,一种是存储键值对数据的Web Storage,另外一种是类似数据库形式存储数据的Web SQL Database。
Web Storage
Web Storage提供了两种存储类型的API接口:sessionStorage和localStorage。sessionStorage在会话期间内有效,窗口关闭就没了。localStorage存储在本地,数据永久存储(除非用户或者程序执行删除操作)。两者在用法上完全一致。h5是域内安全的,在该域内的所有页面都可以访问数据。
检测浏览器的支持情况(以localStorage为例)。
if (window.localStorage) {//localStorage
alert("支持 localStorage")
}else{
alert("不支持 localStorage")
}
操作本地数据,需要注意的是h5只能存储字符串,任何格式存储的时候都会自动转为字符串。
//添加/修改 键值对
localStorage.itemA = "itemA";
var itmeB = "itmeB";
localStorage[itmeB] = "itmeB";
var itmeC = "itmeC";
localStorage.setItem(itmeC, "itemC")
//获取键值对
var valueA=localStorage.itemA;
var valueB=localStorage[itmeB];
var valueC=localStorage.getItem(itmeC);
//索引 小标从0开始
var key=localStorage.key(0);
//删除某个值
localStorage.removeItem(itmeB);
//清空
localStorage.clear();
也可以存储Json数据。将json转为字符串形式存储,需要的时候取出来转为原来的类型。
var jsonString=JSON.stringify(json);
var json=JSON.parse(jsonString);
遍历所有存储数据。
var showTxt="";
var local=window.localStorage;
for(var i=0;i<local.length;i++){
showTxt+=local.key(i)+ " : " + local.getItem(local.key(i));
}
alert(showTxt);
Storage事件监听。注意在google浏览器上在本页面修改数据不会触发storage事件,在其他页面修改时才会触发。
window.onload = function() {
if (window.attachEvent) {
window.attachEvent("storage", storageData);
} else if (window.addEventListener) {
window.addEventListener("storage", storageData, false);
}
}
function onClick() {
if (window.localStorage) { //localStorage
localStorage.setItem("itmeA", "PageTwo")
} else {
alert("不支持 localStorage")
}
};
function storageData(e) {
var txt = document.getElementById("test_a");
txt.text = e.toString();
};
Web SQL Database
对于复杂数据结构的数据,我们还是需要数据库来存储数据。h5允许我们直接通过js的API在浏览器创建一个本地SQLITE数据库,支持标准SQL的的CRUD操作。
操作的基本步骤:
1.创建本地数据库 。
2.开启事务,然后在事务中执行数据库操作 。
openDatabase()
dataBase = openDatabase("demo.db", "1.0", "no", 1024 * 1024, function () { });
获取或者创建一个数据库,如果数据库不存在就创建。
需要传入的参数:
1.数据库名称
2.数据库版本号
3.对数据库描述
4.分配的数据库大小(单位:KB)
5回调函数(可省略)
transaction()
transaction(function());
开启事务,对于数据库的操作我们放在它的参数中处理。
executeSql()
executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
指定sql语句。dataHandler是调用成功的回调函数,通过该函数可以获取查询的结果集。errorHandler执行失败时调用的回调函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
var dataBase;
window.onload = function() {
dataBase = openDatabase("TestDB.db", "1.0", "MyDB", 1024 * 1024, function() {});
}
function operateSqlData() {
dataBase.transaction(function(context) {
context.executeSql('CREATE TABLE IF NOT EXISTS userTable (_iD unique primary key, uName)');
context.executeSql('INSERT INTO userTable (_iD, uName) VALUES (2, "ZHAGN SAN")');
context.executeSql('SELECT * FROM userTable', [], function(context, results) {
var rowLen = results.rows.length;
console.log('rowLen: ' + rowLen);
for (var i = 0; i < rowLen; i++) {
console.log('_iD: ' + results.rows.item(i)._iD);
console.log('uName: ' + results.rows.item(i).uName);
}
});
});
}
</script>
</head>
<body>
<a οnclick="operateSqlData()">点击</a>
</body>
</html>