html5 本地化存儲Web Storage
<!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',210241024);
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></pre>
本文由用戶 dmw4 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！