html5本地存储
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 onclick="operateSqlData()">点击</a>
</body>
</html>- 上一篇： TP5.0Composer安装phpQuery
- 下一篇： thinkphp 一个字段更新方法
