随着我们硬件技术的发展,浏览器本身的功能也愈发的完善,从之前的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的更多相关文章

  1. localStorag的一点见解

    dot方法对localStorag方法进行键值操作 设值 localStorage.hello = 'world'; localStorage.zhangsan = 'lisi'; 取值: var v ...

  2. window.localStorag使用

    H5本地缓存: 删除: window.localStorage.removeItem("parentNode") 写入: window.localStorage.setItem(& ...

  3. HTML最新标准HTML5小结

    写在前面 HTML5出来已经很久了,然而由于本人不是专业搞前端的,只知道有这个东西,具体概念有点模糊(其实就是一系列标准规范啦):因此去年(2015.11.09),专门对HTML5做了个简单的小结,今 ...

  4. php实现input输入框失去焦点自动保存输入框的数据

    最近做一个输入框失去焦点时自动保存数据的功能,当然就是jQuery选择器选择input,blur时,ajax提交数据给php文件,php文件保存一下数据咯.主要是要注意一下中文的问题,所以中间需要转一 ...

  5. Web设计思想——渐进增强

    最近在拜读一本Web体验相关的书<渐进增强--跨平台用户体验设计 >,阅读后做些总结,消化一下书中的精髓. 在阅读本文前,可以先思考下面几个问题. 1. 浏览网页的目的是什么? 2. 浏览 ...

  6. JQuery中的表单验证及相关的内容

      前  言 JRedu Android应用开发中,经常要用到表单.既然用到了表单,那就不可避免的要用到表单的验证.但是,在提交表单时,但是,并不是,每次提交的表单内容都是正确的,如果 每次都将表单的 ...

  7. localStorage小结

    使用HTML5可以在本地存储用户的浏览数据.. 什么是 HTML5 Web 存储? 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie ...

  8. angular项目一

    1.Angularjs第三方模块angular-route和angular-ui-router的区别.差异.不同, ui-router路由器是一个第三方模块,功能非常强大.它支持一切正常ngroute ...

  9. sessionStorage和localStorage存储的转换不了json

    先说说localStorage与sessionStorage的差别 sessionStorage是存储浏览器的暂时性的数据,当关闭浏览器下次再打开的时候就不能拿到之前存储的缓存了 localStora ...

随机推荐

  1. 使用 ext3grep 恢复数据试验成功 笔记

    使用 ext3grep 恢复数据试验成功 笔记   来源:  Linux论坛 日期: 2009.07.07 10:03 (共有条评论)  我要评论   [Copy to clipboard] [ - ...

  2. 开源网络备份软件 bacula 的安装、配置和运行

    安装bacula 1 bacula的几种网络备份拓扑 前面文章介绍了bacula有5个组成部分,在实际的应用中,没有必要将5个部分分别放在不同的服务器上,它们之间的某些部分是可以合并的,常见的bacu ...

  3. bzoj3166

    首先不难想到穷举次大数然后我们只要找到满足这个数是次大数的最大区间即可显然答案只可能是这两种[LL[i]+1,R[i]-1]和[L[i]+1,RR[i]-1]L[i]表示这个数ai左侧第一个比它大的数 ...

  4. codeforces #268 div2 D

    对于这道题第一感觉是图论相关然后我们先分析,假设a[i]在A集合需要的元素是a[x],在B集合是a[y]那么假设a[i]在A集合,那必然a[x]也必须在A集合,由于a[y]如果在B集合就没有对应元素, ...

  5. luoguP2266 爱的距离

    题目:http://www.luogu.org/problem/show?pid=2266 题解:感觉题意不清,就去瞅题解了T_T 然后发现好水... 类似于MST,我们把边从小到大加进去就可以了. ...

  6. LoadRunner监控Windows和Linux常见问题

    LoadRunner 加载监听服务器的步骤如下: 1.在 LoadRunner Controller 下,将工作面板切换到 Run状态,Available Graphs 栏 ,System Resou ...

  7. apache 服务发布多个项目,只需要更改配置文件(需要设定虚拟主机)

    http://www.php186.com/content/article/apache/24609.html http://blog.sina.com.cn/s/blog_6b689d5901013 ...

  8. HDOJ/HDU 2549 壮志难酬(取小数点后几位~)

    Problem Description 话说MCA山上各路豪杰均出山抗敌,去年曾在江湖威名显赫的,江湖人称<万军中取上将首级舍我其谁>的甘露也不甘示弱,"天将降大任于斯人也,必先 ...

  9. BZOJ1057 [ZJOI2007]棋盘制作(极大化思想)

    1057: [ZJOI2007]棋盘制作 Time Limit: 20 Sec  Memory Limit: 162 MB Submit: 1848  Solved: 936 [Submit][Sta ...

  10. STL之set、multiset、functor&pair使用方法

    set是一个集合容器,其中包含的元素是唯一的,集合中的元素是按照一定的顺序排列的.元素插入过程是按照排序规则插入,所以不能使用指定位置插入. set采用红黑树变体的数据结构实现,红黑树属于平衡二叉树. ...