Web Storage
cookie存儲(chǔ)數(shù)據(jù)的不足
在HTML5出現(xiàn)之前铅鲤，如果開發(fā)者需要在客戶端存儲(chǔ)少量的數(shù)據(jù)，只能通過cookie來實(shí)現(xiàn)汉匙，但是cookie存在幾個(gè)不足點(diǎn)：
1惧眠、大小的限制
cookie的大小被限制在4KB。在Web的富應(yīng)用環(huán)境中财骨，不能接受文件或郵件那樣的大數(shù)據(jù)。
2藏姐、帶寬的限制
只要有涉及cookie的請(qǐng)求隆箩，cookie數(shù)據(jù)都會(huì)在服務(wù)器和瀏覽器間來回傳送。這樣無論訪問哪個(gè)頁面羔杨，cookie數(shù)據(jù)都會(huì)消耗網(wǎng)絡(luò)的帶寬捌臊。
3、安全風(fēng)險(xiǎn)
由于cookie會(huì)頻繁地在網(wǎng)絡(luò)中傳送兜材，而且數(shù)據(jù)在網(wǎng)絡(luò)中是可見的理澎，因此在不加密的情況下逞力，是有安全風(fēng)險(xiǎn)的。
4糠爬、操作復(fù)雜
在客戶端的瀏覽器中寇荧，使用JavaScript操作cookie數(shù)據(jù)是比較復(fù)雜的。但是服務(wù)器可以很方便地操作cookie數(shù)據(jù)
使用Web Storage存儲(chǔ)的優(yōu)勢(shì)
Web Storage可以在客戶端保存大量的數(shù)據(jù)执隧，而且通過其提供的接口揩抡，訪問數(shù)據(jù)也非常的方便。然而镀琉，Web Storage的誕生并不是為了替代cookie峦嗤，相反，是為了彌補(bǔ)cookie在本地存儲(chǔ)中表現(xiàn)的不足屋摔。
Web Storage本地存儲(chǔ)的優(yōu)勢(shì)主要表現(xiàn)在以下幾個(gè)方面寻仗。
1、存儲(chǔ)容量
提供更大的存儲(chǔ)容量凡壤。在Firefox、Chrome耙替、Safari和Opera中亚侠，每個(gè)網(wǎng)域?yàn)?MB；在IE8及以上為10MB俗扇。
2硝烂、零帶寬
Web Storage 因?yàn)槭潜镜卮鎯?chǔ)，不與服務(wù)器發(fā)生交互行為铜幽，所以不存在帶寬的占用滞谢。
3、編程接口
Web Storage提供了一套豐富的編程接口除抛，使得數(shù)據(jù)操作更加方便
4狮杨、獨(dú)立的存儲(chǔ)空間
每個(gè)域都有獨(dú)立的存儲(chǔ)空間，各個(gè)存儲(chǔ)空間是完全獨(dú)立的到忽，因此不會(huì)造成數(shù)據(jù)的混亂橄教。
由此可見，Web Storage并不能完全替代cookie喘漏，cookie能做的事情护蝶，Web Storage不一定能做到，如服務(wù)器可以訪問cookie數(shù)據(jù)翩迈，但是不能訪問Web Storage數(shù)據(jù)持灰。所以Web Storage和cookie是相互補(bǔ)充的，會(huì)在各自不同領(lǐng)域發(fā)揮作用负饲。
Web Storage簡(jiǎn)介
sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話中的數(shù)據(jù)堤魁，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀喂链，因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)姨涡。而localStorage用于持久化的本地存儲(chǔ)衩藤，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的涛漂。
Storage API的屬性和方法
保存數(shù)據(jù)：localStorage.setItem(key,value);
讀取數(shù)據(jù)：localStorage.getItem(key);
刪除單個(gè)數(shù)據(jù)：localStorage.removeItem(key);
刪除所有數(shù)據(jù)：localStorage.clear();
得到某個(gè)索引的key：localStorage.key(index);
在使用sessionStorage和localStorage時(shí)赏表，以上的屬性和方法都可以使用。需要注意的是匈仗，key和value都必須為字符串瓢剿，換言之，web Storage的API只能操作字符串悠轩。那么一些不是字符串的數(shù)據(jù)间狂，我們可以通過JSON等方式將其轉(zhuǎn)化成字符串格式后在操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML本地存儲(chǔ)之web storage</title>
<style type="text/css">
#content{
border: 1px solid #3D19DD;
width:600px;
text-align:center;
padding: 10px 0;
margin: 0 auto;
}
#content input{
margin-top: 10px;
}
</style>
</head>
<body>
<div id="content">
<label for="user_num">學(xué)號(hào)：</label>
<input type="text" id="user_num" name="user_num" />
<br/>
<label for="user_name">姓名：</label>
<input type="text" id="user_name" name="user_name" />
<br/>
<label for="grade">年級(jí)：</label>
<input type="text" id="grade" name="grade"/>
<br/>
<label for="sex">性別：</label>
<input type="text" id="sex" name="sex"/>
<br/>
<input type="button" onclick="save()" value="添加名單"/>
<hr/>
<label for="search_num">輸入學(xué)號(hào)：</label>
<input type="text" id="search_num" name="search_num"/>
<input type="button" onclick="find()" value="查找學(xué)生信息"/>
<p id="find_result"><br/></p>
<hr/>
<input type="button" onclick="show()" value="顯示所有">
<div id="list">
</div>
</div>
<br />
</body>
<script type="text/javascript">
function save(){
var user_num = document.getElementById("user_num").value;
var user_nameElement = document.getElementById("user_name").value;
var gradeElement = document.getElementById("grade").value;
var sexElement = document.getElementById("sex").value;
var msg = {
user_name: user_nameElement,
grade: gradeElement,
sex: sexElement,
};
localStorage.setItem(user_num,JSON.stringify(msg));
}
function find(){
var user_num = document.getElementById("search_num").value;
var str = localStorage.getItem(user_num);
var msg = JSON.parse(str);
var find_result = document.getElementById("find_result");
find_result.innerHTML = "學(xué)號(hào)為："+user_num+"的基本信息：姓名："+msg.user_name + "火架，年級(jí)：" + msg.grade+",性別："+msg.sex;
}
function show(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1' style='width:300px; margin:0 auto;'>";
result += "<tr><td>學(xué)號(hào)</td><td>姓名</td><td>年級(jí)</td><td>性別</td></tr>";
for(var i=0;i<localStorage.length;i++){
var user_num = localStorage.key(i);
var str = localStorage.getItem(user_num);
var msg = JSON.parse(str);
result += "<tr><td>"+user_num+"</td><td>"+msg.user_name+"</td><td>"+msg.grade+"</td><td>"+msg.sex+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "當(dāng)前還沒有數(shù)據(jù)";
}
}
</script>
</html>
本地?cái)?shù)據(jù)庫
Web SQL數(shù)據(jù)庫通過一套API來操縱客戶端的數(shù)據(jù)庫鉴象。Safari、Chrome何鸡、Firefox等主流瀏覽器都已經(jīng)支持Web SQL Database纺弊。下面將一一將介紹怎樣創(chuàng)建打開數(shù)據(jù)庫，創(chuàng)建表骡男，添加數(shù)據(jù)淆游，更新數(shù)據(jù)，刪除數(shù)據(jù)隔盛，刪除表 犹菱。
先介紹三個(gè)核心方法
1、openDatabase：這個(gè)方法使用現(xiàn)有數(shù)據(jù)庫或創(chuàng)建新數(shù)據(jù)庫創(chuàng)建數(shù)據(jù)庫對(duì)象吮炕。
2腊脱、transaction：這個(gè)方法允許我們根據(jù)情況控制事務(wù)提交或回滾。
3龙亲、executeSql：這個(gè)方法用于執(zhí)行真實(shí)的SQL查詢虑椎。
第一步：打開連接并創(chuàng)建數(shù)據(jù)庫
var dataBase = openDatabase("student", "1.0", "學(xué)生表", 1024 * 1024, function () { });
if (!dataBase) {
alert("數(shù)據(jù)庫創(chuàng)建失敗俱笛！");
} else {
alert("數(shù)據(jù)庫創(chuàng)建成功捆姜！");
}
解釋一下openDatabase方法打開一個(gè)已經(jīng)存在的數(shù)據(jù)庫，如果數(shù)據(jù)庫不存在迎膜，它還可以創(chuàng)建數(shù)據(jù)庫泥技。幾個(gè)參數(shù)意義分別是：
1，數(shù)據(jù)庫名稱磕仅。
2珊豹，版本號(hào) 目前為1.0,不管他簸呈，寫死就OK。
3店茶，對(duì)數(shù)據(jù)庫的描述蜕便。
4，設(shè)置數(shù)據(jù)的大小贩幻。
5轿腺，回調(diào)函數(shù)(可省略)。
初次調(diào)用時(shí)創(chuàng)建數(shù)據(jù)庫丛楚，以后就是建立連接了族壳。
創(chuàng)建的數(shù)據(jù)庫就存在本地，創(chuàng)建的是一個(gè)sqllite數(shù)據(jù)庫趣些，可以用SQLiteSpy打開文件仿荆，可以看到里面的數(shù)據(jù)。SQLiteSpy是一個(gè)綠色軟件坏平，可以百度一下下載地址或SQLiteSpy官方下載：SQLiteSpy拢操。
第二步：創(chuàng)建數(shù)據(jù)表
this.createTable=function() {
dataBase.transaction( function(tx) {
tx.executeSql(
"create table if not exists stu (id REAL UNIQUE, name TEXT)",
[],
function(tx,result){ alert('創(chuàng)建stu表成功'); },
function(tx, error){ alert('創(chuàng)建stu表失敗:' + error.message);
});
});
}
//ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
executeSql函數(shù)有四個(gè)參數(shù)，其意義分別是：
1舶替，表示查詢的字符串令境，使用的SQL語言是SQLite 3.6.19。
2坎穿，插入到查詢中問號(hào)所在處的字符串?dāng)?shù)據(jù)。
3返劲，成功時(shí)執(zhí)行的回調(diào)函數(shù)玲昧。返回兩個(gè)參數(shù)：tx和執(zhí)行的結(jié)果。
4篮绿，一個(gè)失敗時(shí)執(zhí)行的回調(diào)函數(shù)孵延。返回兩個(gè)參數(shù)：tx和失敗的錯(cuò)誤信息。
第三步：執(zhí)行增刪改查
1）添加數(shù)據(jù)：
this.insert = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"insert into stu (id, name) values(?, ?)",
[id, '徐明祥'],
function () { alert('添加數(shù)據(jù)成功'); },
function (tx, error) { alert('添加數(shù)據(jù)失敗: ' + error.message);
} );
});
2）刪除數(shù)據(jù)：
this.del = function (id) {
dataBase.transaction(function (tx) {
tx.executeSql(
"delete from stu where id= ?",
[id],
function (tx, result) {
},
function (tx, error) {
alert('刪除失敗: ' + error.message);
});
});
}
3）更新數(shù)據(jù)：
this
.update =
function (id, name)
{
dataBase.transaction(function (tx) {
tx.executeSql(
"update stu set name = ? where id= ?",
[name, id],
function (tx, result) {
},
function (tx, error) {
alert('更新失敗: ' + error.message);
});
});
}
4）查詢數(shù)據(jù)：
this.query = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"select * from stu", [],
function (tx, result) { //執(zhí)行成功的回調(diào)函數(shù)
//在這里對(duì)result 做你想要做的事情吧...........
},
function (tx, error) {
alert('查詢失敗: ' + error.message);
} );
});
}
