<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>html5 本地化存储Web Storage</title>
<script type="text/javascript">
/**
* html5中新增web storage 本地化存储sessionStorage,localStorage,
* 可以替代以前的cookie。
* cookie 可以保存4kb的信息;
* cookie是随着http发送的，耗费一定的带宽;
* cookie除了添加，删除，设置有效期外，很难进行其他操作。
*
*
* sessionStorage: 一次会话有效,类似于servlet中的session;
* localStorage :可以存储到本地，永久保存。
*
*/
//保存数据
function saveData(){
var mail = document.getElementById("mail");
//将信息保存到session中
sessionStorage.setItem("mail",mail.value);
//将信息存储到本地
localStorage.setItem("email",mail.value);
}
//读取数据
function loadData(){
var msg = document.getElementById("msg");
//清除sessionStorage中的信息
sessionStorage.clear();
//从sessionStorage 中获取信息
var mail = sessionStorage.getItem("mail");
//从localStorage中获取信息
var email = localStorage.getItem("email");
msg.value=mail+" , "+email;
}
</script>
</head>
<body>
<input type="text" id="mail" >
<textarea rows="10" cols="7" id="msg" placeholder="数据显示区域">
</textarea>
<input type="button" onclick="saveData();" value="保存数据">
<input type="button" onclick="loadData();" value="读取数据">
<form>
<table>
<tr>
<td>用户名:</td>
<td><input type="text" id="name" ></td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="text" id="age" ></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" id="em" ></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="保存信息" onclick="saveUser();" >
<input type="button" value="查询信息" onclick="getUser();">
<input type="button" value="保存信息到数据库" onclick="saveUserToDB();" >
<input type="button" value="从数据库中查询信息" onclick="getUserFromDB();">
</td>
</tr>
</table>
</form>
<script type="text/javascript">
/**
* 模拟本地化存储
*/
function saveUser(){
var user = new Object;
//定义属性并赋值
user.username=document.getElementById("name").value;
user.age=document.getElementById("age").value;
user.mail = document.getElementById("em").value;
//将对象转化为json字符串
var data = JSON.stringify(user);
sessionStorage.setItem("user",data);
console.info("保存user对象成功..."+data);
}
function getUser(){
//获取到的JSON字符串
var user = sessionStorage.getItem("user");
var msg = document.getElementById("msg");
//将json字符串格式化为对象
//下面两种方法都可行
// var info =JSON.parse(user);
var info = eval('('+user+')');
var result = info.username+","+info.age+","+info.mail;
msg.value =result;
console
.info(user+","+info);//{"username":"23456","age":"wefr","mail":"fesdbg"},[object Object]
}
function saveUserToDB(){
var user = new Object();
user.username=document.getElementById("name").value;
user.age=document.getElementById("age").value;
user.mail = document.getElementById("em").value;
/**
* 类似嵌入式系统中的'SQLite'数据库,
* Firefox 35.0 不支持，
* chrome支持
* @type {Database}
*/
var db =window.openDatabase("html5",'1.0','WebStorage',2*1024*1024);
console.info("数据库信息:"+db);
db.transaction(function(tx){
//创建表
var sql='create table if not exists user(id int,name varchar(100),age int ,mail varchar(100) ) ';
tx.executeSql(sql);
});
db.transaction(function(tx){
//保存数据到数据库
tx.executeSql('insert into user values (1,?,?,?)',[user.username,user.age,user.mail],
//成功的回调函数
function(tx,msg){
console.info("执行sql语句成功:"+msg);
//失败的回调函数
},function(tx,msg){
console.info("执行sql语句失败:"+msg);
});
});
}
function getUserFromDB(){
//获取数据库
var db =window.openDatabase("html5",'1.0','WebStorage',2*1024*1024);
db.transaction(function(tx){
/**
* 执行查询
*/
tx.executeSql('select id,name,age,mail from user where id=?',[1],function(tr,msg){
/**
* 遍历结果集
*/
for (var i=0;i<msg.rows.length;i++){
//获取一条记录封装后的对象
//msg.rows.item(i).id ,--.name,--.mail获取指定的信息
console.info(msg.rows.item(i));
}
});
});
}
</script>
</body>
</html>
原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/10086.html