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应用而已。
html 5的localstorag的更多相关文章
- localStorag的一点见解
dot方法对localStorag方法进行键值操作 设值 localStorage.hello = 'world'; localStorage.zhangsan = 'lisi'; 取值: var v ...
- window.localStorag使用
H5本地缓存: 删除: window.localStorage.removeItem("parentNode") 写入: window.localStorage.setItem(& ...
- HTML最新标准HTML5小结
写在前面 HTML5出来已经很久了,然而由于本人不是专业搞前端的,只知道有这个东西,具体概念有点模糊(其实就是一系列标准规范啦):因此去年(2015.11.09),专门对HTML5做了个简单的小结,今 ...
- php实现input输入框失去焦点自动保存输入框的数据
最近做一个输入框失去焦点时自动保存数据的功能,当然就是jQuery选择器选择input,blur时,ajax提交数据给php文件,php文件保存一下数据咯.主要是要注意一下中文的问题,所以中间需要转一 ...
- Web设计思想——渐进增强
最近在拜读一本Web体验相关的书<渐进增强--跨平台用户体验设计 >,阅读后做些总结,消化一下书中的精髓. 在阅读本文前,可以先思考下面几个问题. 1. 浏览网页的目的是什么? 2. 浏览 ...
- JQuery中的表单验证及相关的内容
前 言 JRedu Android应用开发中,经常要用到表单.既然用到了表单,那就不可避免的要用到表单的验证.但是,在提交表单时,但是,并不是,每次提交的表单内容都是正确的,如果 每次都将表单的 ...
- localStorage小结
使用HTML5可以在本地存储用户的浏览数据.. 什么是 HTML5 Web 存储? 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie ...
- angular项目一
1.Angularjs第三方模块angular-route和angular-ui-router的区别.差异.不同, ui-router路由器是一个第三方模块,功能非常强大.它支持一切正常ngroute ...
- sessionStorage和localStorage存储的转换不了json
先说说localStorage与sessionStorage的差别 sessionStorage是存储浏览器的暂时性的数据,当关闭浏览器下次再打开的时候就不能拿到之前存储的缓存了 localStora ...
随机推荐
- VM Depot 镜像新增系列II – 学习管理系统,内容管理系统以及平台管理工具
发布于 2014-06-23 作者 刘 天栋 继上周企业管理软件和电子商务镜像的加盟之后,我们看到又有一批内容管理解决方案(CMS),学习管理解决方案(LMS)以及平台管理工具 (如 Open ...
- 微软开放技术发布开源的微软云服务器底盘管理器 (Chasis Manager) 软件
发布于 2014-07-14 作者 陈 忠岳 今天,微软公司加入开放计算项目(OCP),贡献出硬件和软件规范,管理 API 和协议,机械 CAD 模型,以及电路板文件和 Gerbers(描述印刷 ...
- HDFS Block Replica Placement实现原理
1. 背景 Block Replica Placement——数据块复本存储策略,HDFS Namenode以此为依据选取数据块复本应存储至哪些HDFS Datanodes,策略的设计需要权衡以下 ...
- 在Xcode中使用Clang Format
Xcode中的Re-Indent,顾名思义,只是一个调整缩进的功能,完全依赖它来进行代码格式化显然不够用.我们使用了一个叫做ClangFormat-Xcode的插件,配合Re-Indent一起来做代码 ...
- 公有云开启全面竞争时代——青云QingCloud
网界网本期[封面报道]公有云开启全面竞争时代 [CNW.com.cn 专稿] 险滩急流之后,公有云[注]服务市场的开拓者们终于看到了一片丰饶之海. 2013年,中国云计算[注]产业起步的第五年,公有云 ...
- php环境下ckeditor和ckfinder的配置详解
摘要:老牌编辑器FCK的升级版CKEditor(http://ckeditor.com/) 经过重写,提供了丰富而强大的集成和互动的API.新版编辑器是完全基于插件,它可以扩展所有部件以符合需求.FC ...
- BufferedInputStream,FileInputStream,FileChannel实现文件拷贝
从上篇文章中知道BufferedInputStream是自带缓冲区的输入流,可以大大减少IO次数,提供效率.下面的例子中实现了用BufferedInputStream与FileInputStream实 ...
- Winform Windows Media Player 简易播放器 分类: WinForm 2014-07-31 20:12 589人阅读 评论(0) 收藏
新手上路,高手勿进! 窗体设计: 实现效果: 实现代码: using System; using System.Collections.Generic; using System.ComponentM ...
- Android开发ImageView控件缩放图片
首先还是最基础的ImageView控件如何显示图片: <ImageView Android:id="@+id/imgView" ...
- linux下切割catalina.out文件,按天生成文件
1.下载工具cronolog压缩包(http://download.csdn.net/detail/sunling_sz/8144469) 2.将文件拖放到server,不论什么文件夹都能够. 3.进 ...