html5提供了四种在客户端存储数据的新方法:
localStorage,sessionStorage,globalStorage,WebSql Database
前面三个适用于存储少量数据，而Web Sql Database适用于存储大型的，复杂的数据。
与cookie的区别：
web存储安全性软高，在数据量上可以达到5M，而cookie最多也就4KB,或20个key/value对。
localStorage与sessionStorage有相同Api
localStorage.length 获取storage中的个数 localStorage.key(n) 获取storage中第n个键值对的键 localStorage.key = value localStorage.setItem(key, value) 添加 localStorage.getItem(key) 获取 localStorage.removeItem(key) 移除 localStorage.clear() 清除
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body></body>
<script>
//cookie关闭浏览器就会消失
document.cookie = "name=test";
console.log(document.cookie);
//关闭浏览器不会消失
localStorage.setItem("name", "test2");
console.log(localStorage.getItem("name"));
//关闭浏览器会消失
sessionStorage.setItem("name", "test3");
console.log(sessionStorage.getItem("name"));
for(var ix = 1; ix < 10; ++ix) {
localStorage.setItem(ix, ix);
}
console.log(localStorage.length);
console.log(localStorage.key(2));
</script>
</html>
WebSql Database
三个核心方法
openDatabase 这个方法使用现有数据库或创建新数据库
transaction 这个方法允许我们根据情况控制事务提交或回滚
executeSql 这个方法用于执行sql查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body></body>
<script>
if(window.openDatabase) {
//openDatabase参数：数据库名，版本号，数据库描述，数据大小，回调函数
var db = openDatabase("test", "1.0", "测试库", 1024*1024);
db.transaction(function(fx) {
fx.executeSql(
"create table users(id int, name text)",
//替换语句中问号的内容
[],
//成功时的回调函数
function(fx, result) {
console.log("创建表成功");
},
//失败时的回调函数
function(fx, error) {
console.log("创建表失败");
}
);
//插入数据
fx.executeSql(
"insert into users(id,name) values(?, ?)",
[1, "test"],
function(fx, result) {
console.log("插入数据成功");
},
function(fx, error) {
console.log("插入数据失败");
}
);
//修改数据
fx.executeSql(
"update users set name=? where id=?",
["wohehe", 1],
function(fx, result) {
console.log("更新数据成功");
},
function(fx, error) {
console.log("更新数据失败");
}
);
//查询数据
fx.executeSql(
"select * from users",
[],
function(fx, result) {
console.log("查询数据成功");
//遍历查询数据
var data = result.rows;
for(var ix = 0; ix < data.length; ++ix) {
console.log(data[ix]["id"] + ":" + data[ix]["name"]);
}
},
function(fx, error) {
console.log("查询数据失败");
}
);
//删除数据
fx.executeSql(
"delete from users where id=?",
[1],
function(fx, result) {
console.log("删除数据成功");
},
function(fx, error) {
console.log("删除数据失败");
}
);
//删除表
fx.executeSql(
"drop table users",
[],
function(fx, result) {
console.log("删除表成功");
},
function(fx, error) {
console.log("删除表失败");
}
);
});
}
</script>
</html>