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("插入数据成功");
},error) {
console.log("插入数据失败");
}
);
//修改数据
fx.executeSql(
"update users set name=? where id=?",["wohehe",1],result) {
console.log("更新数据成功");
},error) {
console.log("更新数据失败");
}
);
//查询数据
fx.executeSql(
"select * from users",[],result) {
console.log("查询数据成功");
//遍历查询数据
var data = result.rows;
for(var ix = 0; ix < data.length; ++ix) {
console.log(data[ix]["id"] + ":" + data[ix]["name"]);
}
},error) {
console.log("查询数据失败");
}
);
//删除数据
fx.executeSql(
"delete from users where id=?",[1],result) {
console.log("删除数据成功");
},error) {
console.log("删除数据失败");
}
);
//删除表
fx.executeSql(
"drop table users",result) {
console.log("删除表成功");
},error) {
console.log("删除表失败");
}
);
});
}
</script>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。