html 5的localstorag

随着我们硬件技术的发展，浏览器本身的功能也愈发的完善，从之前的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应用而已。