html 5的localstorag

標籤：http   io   ar   使用   sp   for   資料   on   cti   

   隨著我們硬體技術的發展，瀏覽器本身的功能也愈發的完善，從之前的cookie到現在的本機快取機制，再到web storage，在之前html4 的時候使用cookie具有一些明顯的局限，如大小限制，cookie的大小限制早4k，還有一個就是頻寬，cookie是隨著http事物一起被發送的，於是乎就會浪費一部分發送cookie時使用的頻寬，還有一個就是複雜性，要對cookie進行操作具有很強的複雜性。綜上所述，新的技術webstorage就因運而生了，顧名思義就是在web上儲存資料，但是這裡的儲存並不是儲存在伺服器端的，而是儲存在客服端的本地的。

   細細劃分一下，我們的webstorage又分為兩種，一個是sessingstorage，即將資料儲存在session對象中，具體指的是使用者在瀏覽某個網站的時候，從進入這個網站到瀏覽器關閉的這一段時間裡，session對象便可以用來儲存著短時間內需要儲存的任何資料。還有一種就是localstorage，也就是我們主要需要瞭解的，這種方式是將資料儲存在用戶端本地的硬體中即使我們的瀏覽器關閉之後，這些我們儲存的資料依然存在，下一次開啟瀏覽器的時候我們依然可以繼續使用，這一點就非常的實用。

  下面我將進行執行個體示範：

首先我們需要創立本地web資料庫：

var db = openDatabase("student","1.0","學生表",2*1024*1024,function(){});
db.transaction(function (fx){
fx.executeSql("create table if not exists stu(id Real unique,name Text)",---------------------------做判斷，查看是否存在這個table
[],
function(fx,result){
alert("建立表成功" + result);
},
function(fx,error){
alert("建立表失敗" + error);
}
);
});

 

當我們的本機資料庫建立成功之後就可以往裡面添加資料了：

function fun(){
db.transaction(function(fx){
fx.executeSql("insert into stu(id,name) values(?,?)",
[1,‘Lanveer‘],
function(fx,result){
alert(‘add ok‘)
},
function(fs,err){
alert(‘failing‘+err.message);
}
)
})
}

然後便是和我們資料庫相同的操作，進行查看我們的資料了：

function fun2(){
db.transaction(function(fx){
fx.executeSql("select * from stu",
[],
function(fx,result){
var len=result.rows.length;
alert(len)//--列印查詢結果
alert(result.rows.item(0).name)
var tp="<table><tr><th>編號</th><th>姓名</th></tr>"
for(var i=0;i<len;i++){
tp+="<tr><td>"+result.rows.item(i).id+"</td><td>"+result.rows.item(i).name+"</td></tr>"

}
tp+="</table>"
document.getElementById("show").innerHTML=tp;
},function(fs,err){
alert(‘查詢失敗‘+err.message)
}
)
})
}

在這一步我們進行了複雜的建表操作，將查到的資料注入我們建立的表格中。

接下來就是對資料進行增加和刪除了。

增加一條資料：

dataBase.transaction(function (fx) {
fx.executeSql("update stu set name = ? where id= ?", [“name,” “id”],
function (fx, result) { },
function (fx, error) {
alert(‘更新失敗: ‘ + error.message);
});
})

 

 

刪除一條資料：

dataBase.transaction(function (fx) {
fx.executeSql("delete from stu where id= ?",
[id],
function (fx, result) {},
function (fx, error) {
alert(‘刪除失敗: ‘ + error.message);
});
});
　以上就是我們需要瞭解的localstorage的基本操作，無非就是類似於我們資料庫對我們資料的增加刪除修改和查詢的操作，只是在這裡進行的是web應用而已。

 

html 5的localstorag