HTML5本地存储之如果没有数据库究竟会怎样

本章主要内容是WebStorage与本地数据库，其中WebStorage是对cookie的优化，本地数据库是HTML5添加的一个功能，使用它可以在客户端建立一个数据库

大大减轻服务器端的负担，加快访问数据速度。

学习本章需要掌握Web存储基本概念，了解会话存储与本地存储的使用与差异

掌握本地数据库的使用什么是WebStorage？

前面说过，webstorage是对cookie的优化而来，HTML4中使用cookie在客户端存储用户数据，长期使用发现存在以下问题：

大小限制在4kbcookie每随HTTP事务一起发送，浪费过多正确操作cookie很复杂（这个有待考虑）

由于以上问题，HTML5提出了WebStorage作为新的客户端本地保存技术。

复制代码

代码如下：

WebStorage技术在网络上存储数据即针对客户端本地；具体而言分为两种：sessionStrage：session即会话的意思，在这里的session是指用户浏览某个网站时，从进入网站到关闭网站这个</p><p>localStorage：将数据保存在客户端硬件设备上，不管它是什么，意思是下次打开计算机当时数据还在。</p>><p>每个区别就是一个作为临时保存，一个拥有长期保存。

使用示例

复制代码

代码如下：

简单应用<！DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><htmlxmlns=“http://www.w3.org/1999/xhtml”><head><title></title></head><body><h1>WebStorage实验</h1><divid=“msg”style=“margin：10px0;border：1px纯黑色；padding：10px；width：300px；height：100px;”></div><inputtype=“text”id=“text”/><selectid=“type”><optionvalue=“session”>sessionStorage</option><选项value=“local”>localStorage</option></select><buttononclick=“save（）;”>保存数据</button>

<buttononclick=“load（）;”>读取数据</button><scripttype=“text/javascript”>varmsg=document.getElementById（'msg'），text=document.getElementById（'text'），类型=document.getElementById（'type'）;功能save（）{varstr=text.value;vart=type.value;如果（t=='session'）{sessionStorage.setItem（'msg'，str）;}其他{localStorage.setItem（'msg'，str）;}}函数load（）{vart=type.value;

msg.innerHTML=sessionStorage.getItem（'msg'）;}其他{msg.innerHTML=localStorage.getItem（'msg'）;}}</script></body></html>

在chrome浏览器下看会有感觉的。

简单web留言板

复制代码

代码如下：

简单留言板<！DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><htmlxmlns=“http://www.w3.org/1999/xhtml”><head><title></title></head><body><h1>Web存储实验</h1><divid=“msg“style=”margin：10px0;border：1px纯黑色；padding：10px；width：300px；min-height：100px;“></div><inputtype=”text“id=”text“/><buttononclick=“save（）;”>消息</button><buttononclick=“_clear（）;”>清空</button><scripttype=“text/javascript”>varmsg=document.getElementById（'msg'），

文字=document.getElementById（'文字'）;功能save（）{varstr=text.value;vark=newDate（）。getTime（）;localStorage.setItem（k，str）;在里面（）;}函数init（）{msg.innerHTML='';vardom='';对于（vari=0，len=localStorage.length;i<len;i++）{dom+='<div>'+localStorage.key（i）+'：'+localStorage.getItem（localStorage.key（i））+'</div>'}msg.innerHTML=dom;}函数_clear（）{信息。

localStorage.clear（）;}</script></body></html>

更复杂的运用中，可以将值值转化为JSON字符串，从而达到使用数据表的目的；

本地数据库

在HTML5中内置了一个可以通过sql访问的数据库（新浏览器果真强大啊！），所以在HTML4中数据只能存在服务器端，HTML5则改变了这一原则。

这种不需要存储在服务器的专有名词为“SQLLite”（我终于知道他是干什么的了）

复制代码

代码如下：

使用SQLLite数据库，需要两个必要步骤：创建数据库访问对象使用事务处理</span></p><divclass=“cnblogs_code”><pre><spanstyle=“COLOR：＃000000”>创建对象：openDatabase（dbName，版本，dbDesc，大小）</span></pre><pre><spanstyle=“COLOR：＃000000”>实际访问：db.transaction（function（）{　　tx.excuteSql（'createtable......'）;}）;</span></pre><pre><spanstyle=“COLOR：＃000000”>数据查询：excuteSql（sql，[]，dataHandler，errorHandler）//后面两个为某些函数；[]估计是做sql注入处理

光说不练假把式，我们来实际操作一番，使用数据库实现web通讯录（左思右想还是用上了jQuery）：

做的时候居然发现我的FF不支持本地数据库！！！以下是用chrome完成的简单的通讯录：

复制代码

代码如下：

）;//开始程序vardb=openDatabase（'phoneBook'，''，'my'，102400）;

在里面（）;add.click（function（）{save（name.val（），phone.val（））;}）;btSearch.click（function（）{init（search.val（））}）;$（'＃phoneBookspan'）。click（function（）{deleteByName（$（this）.attr（'name'））;s='';}）;//初始化界面函数init（name）{db.transaction（function（tx）{tx.executeSql（'如果不存在则创建表phoneBook（nametext，phonetext）'，[]）;varsql='select*from电话簿，其中1=1';

varparam=[];如果（name）{sql+='和name=？';param.push（name）;}tx.executeSql（sql，param，function（tx，rs）{phoneBook.html（''）;for（vari=0，len=rs.rows.length;i<len;i++）{vardata=rs.rows.item（i）;showData（data）;}}））；}）;}函数showData（data）{

varstr='<div>姓名：'+data.name+'；电话：'+data.phone+'<spanonclick=“del（/''+data.name+'/'）”>删除</span></div>';phoneBook.append（$（str））;}//删除数据功能deleteByName（name）{db.transaction（function（tx）{tx.executeSql（'从phoneBook中删除，其中name=？'，[name]，function（tx，rs）{init（）;}）}）;}window.del=deleteByName;//增加功能save（name，phone）{db。

tx.executeSql（'插入电话簿值（？，？）'，[名称，电话]，函数（tx，rs）{vard={};d.name=名称;d.phone=电话;showData（d）;}）}）;}}）;</script></head><body><h1>本地数据库实现网络通讯录</h1><inputtype=“text”id=“search”placeholder=“联系人姓名”/><buttonid=“btSearch“>搜索</button><divid=”phoneBook“><

手机：<inputtype=“text”id=“phone”/><buttonid=“add”>添加到通讯录</button></body></html>

结语

对于搞过一级的同学，这章东西其实也是非常简单的，我再一次涌起了这种想法：

其实HTML5就是HTML4+api接口，目的就是让我们可以用js做更多事情罢了。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60767.shtml