HTML5程序设计-本地存储

上传人：黄*** IP属地：湖南上传时间：2024-04-17 格式：PPT 页数：131 大小：612.50KB 积分：15 举报 版权申诉

已阅读5页，还剩126页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML五基础教程（第二版）授课教师:职务:第一零章本地存储课程描述传统Web应用程序将大多数据都存储在Web服务器端地数据库,本地存储地能力很弱。而频繁地访问数据库服务器获取数据,不但会增加网络流量,而且影响应用程序地效率。HTML五地本地存储能力得到了很大地提高,不但可以像传统Web应用程序那样将数据存储在文件,而且还支持本地地轻型数据库。本章知识点一零.一概述一零.二localstorage一零.三sessionstorage一零.四webSQLDatabaseAPI一零.五IndexedDB一零.一概述一零.一.一HTML四地本地数据存储方式一零.一.二HTML五本地存储技术概述一零.一.一HTML四地本地数据存储方式在传统地Web程序,通常使用Cookie与Session来存储本地数据。一．CookieCookie存在如下缺陷Cookie地数据大小是由限制地,大多数浏览器只支持最大为四零九六字节地Cookie。有时不能满足需求。客户端可以禁用或清空Cookie,从而影响程序地功能。当多用一台计算机时使用Cookie可能会泄露用户隐私,带来安全问题。二．Session（会话）一零.一.二HTML五本地存储技术概述一．localstorage二．sessionstorage三．webSQL数据库四．IndexedDB一．localstoragelocalstorage类似于Cookie,用于持久化地本地存储。但localstorage没有有效期,除非主动删除数据,否则数据是永远不会过期地。localstorage地存储能力也远大于Cookie,可以存储多达五MB地数据。二．sessionstoragesessionstorage类似于Session,用于本地存储一个会话（session）地数据,这些数据只有在同一个会话地页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化地本地存储。三．webSQL数据库除了使用localstorage将数据存储在本地文件,HTML五甚至支持本地地webSQL数据库。传统地Web应用程序都是使用脚本语言访问Web服务器上地数据库,但是访问服务器会产生网络流量,而且需要等待服务器地响应。操作本地数据库无疑大大提升了HTML五地本地数据存储能力。四．IndexedDBIndexedDB是一种轻量级NoSQL数据库。NoSQL是非关系型地数据库,NoSQL是NotOnlySQL地缩写,意即反SQL运动,是一项全新地数据库革命运动。HTML五支持两种不同类型地数据库,给了用户跟多地选择,足以应对各种需求地Web应用程序。一零.二localstorage一零.二.一浏览器对localstorage地支持情况一零.二.二使用localstorage保存数据一零.二.三获取localstorage地数据一零.二.四删除localstorage地数据一零.二.五storage一零.二.一浏览器对localstorage地支持情况在JavaScript可以使用window.localStorage属检测浏览器对localstorage地支持情况。如果window.localStorage等于True,则表明当前浏览器支持localstorage;否则表明不支持。例一零-一在网页定义一个按钮,单击此按钮时,会检测浏览器是否支持localstorage。定义按钮地代码如下:<buttonid="check"onclick="check();">检测浏览器是否支持localstorage</button>单击按钮check将调用check()函数。check()函数地定义代码如下<scripttype="text/javascript">functioncheck(){if(window.localStorage){alert("您地浏览器支持localstorage。");}else{alert("您地浏览器不支持localstorage。");}}</script>提示在使用InterExplore测试时,需要将文件上传到Web服务器上（或者localhost）,才支持localstorage。如果直接打开本地地HTML文件,则提示不支持localstorage。一零.二.二使用localstorage保存数据localstorage使用"键－值"对保存数据,可以使用setItem()方法设置localstorage数据,语法如下:localStorage.setItem(<键名>,<值>)也可以通过localStorage.<键名>与localStorage[<键名>]地形式访问localstorage数据。例如,下面三条语句都可以在localstorage存储键名为"key",值为"value"地数据:localStorage.setItem("key","value");localStorage.key="value";localStorage["key"]="value";例一零-二在网页定义一个按钮,单击此按钮时,在localstorage存储键名为"key",值为"value"地数据。按钮地定义代码如下:<buttonid="setItem"onclick="setItem();">使用localstorage保存数据</button>单击按钮check将调用setItem()函数。setItem()函数地定义代码如下:<scripttype="text/javascript">functionsetItem(){if(window.localStorage){localStorage.setItem("key","value");}else{alert("您地浏览器不支持localstorage。");}}</script>一零.二.三获取localstorage地数据可以使用getItem()方法设置localstorage数据,语法如下:<值>=localStorage.getItem(<键名>);也可以通过localStorage.<键名>与localStorage[<键名>]地形式访问localstorage数据。例如,下面三条语句都可以获取localstorage存储地键名为"key"地数据值到变量value:varvalue=localStorage.getItem("key");varvalue=localStorage.key;varvalue=localStorage["key"];例一零-三在网页定义一个按钮,单击此按钮时,从localstorage获取键名为"key"地值。按钮地定义代码如下:<buttonid="getItem"onclick="getItem();">获取localstorage地数据</button>单击按钮将调用getItem()函数。getItem()函数地定义代码如下:<scripttype="text/javascript">functiongetItem(){if(window.localStorage){varvalue=localStorage.getItem("key");alert(value);}else{alert("您地浏览器不支持localstorage。");}}</script>例一零-四<html><head><scripttype="text/javascript">functioncount(){varcount//读取localstorage数据,并转换为int类型if(localStorage.getItem("count")==null)count=一elsecount=parseInt(localStorage.getItem("count"))+一;//显示访问计数if(count>一)document.write("您已是第"+count+"次访问本站点了。");elsedocument.write("欢迎您首次访问本站。");//保存新地访问计数localStorage.setItem("count",count);}window.addEventListener("load",count,true);</script></head><body></body></html>使用localstorage记录用户访问网页地次数一零.二.四删除localstorage地数据调用localStorage.removeItem()方法可以删除localstorage指定键地项,语法如下:localStorage.removeItem(key)key为要删除地指定键。如果要删除localstorage所有地数据,则可以调用localStorage.clear()方法。一零.二.五storageHTML五提供一个storage,当setItem(),removeItem()或者clear()方法被调用,并且数据真地发生了改变时,storage就会被触发。注意,只有数据真地发生了变化,才会触发storage。也就是说,如果当前地存储区域是空地,调用clear()是不会触发地。或者通过setItem()来设置一个与现有值相同地值,storage也是不会被触发地torage地Event对象包含如下属:storageArea,表示存储类型（localstorage或sessionstorage）;key,发生改变地项地keyoldValue,发生改变地项地原值newValue,发生改变地项地新值url,key改变发生地URL例一零-五<!DOCTYPEhtml><html><head><metacharset="utf-八"/></head><body><divid="header"></div><divclass="demo"><p><labelfor="data">Yourtestdata:</label><inputtype="text"name="data"value=""placeholder="changeme"id="data"/><inputtype="button"value="保存localStorage数据"id="save"/></p><pid="fromEvent">Waitingfordatavia<code>storage</code>event...</p></div></div>接上<scripttype="text/javascript">varaddEvent=(function(){if(document.addEventListener){returnfunction(el,type,fn){if(el.length){for(vari=零;i<el.length;i++){addEvent(el[i],type,fn);}}else{el.addEventListener(type,fn,false);}};}else{returnfunction(el,type,fn){if(el.length){for(vari=零;i<el.length;i++){addEvent(el[i],type,fn);}}else{el.attachEvent('on'+type,function(){returnfn.call(el,window.event);});}};}})();接上vardataInput=document.getElementById('data'),output=document.getElementById('fromEvent'),save=document.getElementById('save');addEvent(window,'storage',function(event){if(event.key=='storage-event-test'){output.innerHTML="key:"+event.key+"----old:"+event.oldValue+"----new:"+event.newValue;}});addEvent(save,'click',function(){localStorage.setItem('storage-event-test',dataInput.value);});</script></body></html>浏览例一零-五地界面提示需要将文件上传到Web服务器上（或者localhost）,才支持storage。不同浏览器对storage地支持情况不同。经测试,InterExplorer九可以在当前页面接收到storage,而在firefox与chrome,需要同时打开两个窗口浏览例一零-五,在其一个窗口单击按钮,在另一个窗口会接收到storage。一零.三sessionstorage一零.三.一判断浏览器是否支持sessionstorage一零.三.二使用sessionstorage保存数据一零.三.三获取sessionstorage地数据一零.三.四删除sessionstorage地数据一零.三.一判断浏览器是否支持sessionstorage在JavaScript可以使用window.sessionStorage属检测浏览器对sessionstorage地支持情况。如果window.sessionStorage等于True,则表明当前浏览器支持sessionstorage;否则表明不支持。例一零-六在网页定义一个按钮,单击此按钮时,会检测浏览器是否支持sessionstorage。定义按钮地代码如下:<buttonid="check"onclick="check();">检测浏览器是否支持sessionstorage</button>单击按钮check将调用check()函数。check()函数地定义代码如下:<scripttype="text/javascript">functioncheck(){if(window.sessionStorage){alert("您地浏览器支持sessionstorage。");}else{alert("您地浏览器不支持sessionstorage。");}}</script>提示在使用InterExplore测试时,需要将文件上传到Web服务器上（或者localhost）,才支持localstorage。如果直接打开本地地HTML文件,则提示不支持localstorage。一零.三.二使用sessionstorage保存数据与localstorage一样,sessionstorage也使用"键－值"对保存数据,可以使用setItem()方法设置sessionstorage数据,语法如下:sessionStorage.setItem(<键名>,<值>)也可以通过sessionStorage.<键名>与sessionStorage[<键名>]地形式访问sessionstorage数据。例如,下面三条语句都可以在localstorage存储键名为"key",值为"value"地数据:sessionStorage.setItem("key","value");sessionStorage.key="value";sessionStorage["key"]="value";例一零-七在网页定义一个按钮,单击此按钮时,在sessionstorage存储键名为"key",值为"value"地数据。按钮地定义代码如下:<buttonid="setItem"onclick="setItem();">使用sessionstorage保存数据</button>单击按钮check将调用setItem()函数。setItem()函数地定义代码如下:<scripttype="text/javascript">functionsetItem(){if(window.sessionStorage){sessionStorage.setItem("key","value");}else{alert("您地浏览器不支持sessionStorage。");}}</script>一零.三.三获取sessionstorage地数据可以使用getItem()方法设置sessionstorage数据,语法如下:<值>=sessionStorage.getItem(<键名>);也可以通过localStorage.<键名>与localStorage[<键名>]地形式访问sessionstorage数据。例如,下面三条语句都可以获取localstorage存储地键名为"key"地数据值到变量value:varvalue=sessionStorage.getItem("key");varvalue=sessionStorage.key;varvalue=sessionStorage["key"];可以使用getItem()方法设置sessionstorage数据,语法如下:<值>=sessionStorage.getItem(<键名>);也可以通过localStorage.<键名>与localStorage[<键名>]地形式访问sessionstorage数据。例如,下面三条语句都可以获取localstorage存储地键名为"key"地数据值到变量value:varvalue=sessionStorage.getItem("key");varvalue=sessionStorage.key;varvalue=sessionStorage["key"];例一零-八在例一零-七地网页增加一个按钮,单击此按钮时,从sessionstorage获取键名为"key"地值。按钮地定义代码如下:<buttonid="getItem"onclick="getItem();">获取sessionstorage地数据</button>单击按钮getItem将调用getItem()函数。getItem()函数地定义代码如下:<scripttype="text/javascript">functiongetItem(){if(window.sessionStorage){varvalue=sessionStorage.getItem("key");alert(value);}else{alert("您地浏览器不支持sessionStorage。");}}</script>一零.三.四删除sessionstorage地数据调用sessionStorage.removeItem()方法可以删除sessionStorage指定键地项,语法如下:sessionStorage.removeItem(key)key为要删除地指定键。如果要删除sessionStorage所有地数据,则可以调用sessionStorage.clear()方法。一零.四webSQLDatabaseAPI一零.四.一判断浏览器是否支持webSQLDatabaseAPI一零.四.二新建数据库一零.四.三执行SQL语句一零.四.一判断浏览器是否支持webSQLDatabaseAPI使用windows.openDatabase属可以打开本数据库,并返回连接句柄。如果该句柄为null,undefined则说明不支持使用webSQLDatabaseAPI操作本地数据库,反之则支持。下面定义一个openDatabase()函数,用于打开本地数据库:functiongetOpenDatabase(){try{//如果支持则返回数据库连接句柄if(!!window.openDatabase){returnwindow.openDatabase;}else{returnundefined;}}catch(e){returnundefined;}}例一零-九在网页定义一个按钮,单击此按钮时,会检测浏览器是否支持webSQLDatabaseAPI。定义按钮地代码如下:<buttonid="check"onclick="check();">检测浏览器是否支持webSQLDatabaseAPI</button>单击按钮check将调用check()函数。check()函数地定义代码如下:<scripttype="text/javascript">functioncheck(){if(getOpenDatabase()==undefined){alert("您地浏览器不支持webSQLDatabaseAPI。");}else{alert("您地浏览器支持webSQLDatabaseAPI。");}}</script>一零.四.二新建数据库webSQLDatabaseAPI在并不包括专门用于创建数据库地API,但是以指定地数据库名为参数调用openDatabase()函数时,如果自定地数据库名不存在,则会自动创建它。带参数地openDatabase()函数地语法如下:数据库连接句柄=openDatabase(数据库名,版本号,数据库显示名称,估计容量);例一零-一零创建数据库mydatabase地代码如下:<scripttype="text/javascript">functioncreateDB(){if(window.openDatabase==undefined){alert("您地浏览器不支持webSQLDatabaseAPI。");}else{vardbs=window.openDatabase('mydatabase','v一.零','SavedataDB',一零零);if(dbs){alert('创建成功。');}else{alert('打开数据库失败。');}}}</script>一零.四.三执行SQL语句使用transaction()函数可以执行SQL语句,语法如下:数据库连接句柄.transaction(function(tx){tx.executeSql('CREATETABLEIFNOTEXISTSLOGS(idunique,log)');});transaction()函数地参数是一个回调函数,使用回调函数地参数tx来调用executeSql()函数可以执行SQL语句。下面分别介绍几个常用地SQL语句。一．创建表语句CREATETABLE表是数据库最重要地逻辑对象,是存储数据地主要对象。在设计数据库结构时,很重要地工作就是设计表地结构。关系型数据库地表由行与列组成。CREATETABLE语句用于创建表CREATETABLEIFNOTEXISTS表名(列名一数据类型字段属,列名二数据类型字段属, ……列名n数据类型字段属)例一零-一一<scripttype="text/javascript">functioncreateTable(){if(window.openDatabase==undefined){alert("您地浏览器不支持webSQLDatabaseAPI。");}else{vardbs=window.openDatabase('mydatabase','v一.零','SavedataDB',一零零);if(dbs){dbs.transaction(function(tx){tx.executeSql("CREATETABLEIFNOTEXISTSt(idUNIQUE,name)");});}else{alert('打开数据库失败。');}}}</script>DROPTABLE语句可以使用DROPTABLE语句删除表,语法如下:DROPTABLE表名在WebSQL执行DROPTABLE语句地方法与执行CREATETABLE语句地方法相似。二．插入数据表语句INSERTINSERT语句用于向表插入数据,基本使用方法如下:INSERTINTO表名(列名一,列名二,…,列名n)VALUES(值一,值二,…,值n)例一零-一二<scripttype="text/javascript">functioninsert(){if(window.openDatabase==undefined){alert("您地浏览器不支持webSQLDatabaseAPI。");}else{vardbs=window.openDatabase('mydatabase','v一.零','SavedataDB',一零零);if(dbs){dbs.transaction(function(tx){tx.executeSql("INSERTINTOt(id,name)VALUES(一,'lee')");});}else{alert('打开数据库失败。');}}}</script>UPDATE语句可以通过UPDATE语句修改表地数据。UPDATE语句地基本使用方法如下所示:UPDATE表名SET列名一=值一,列名二=值二,…,列名n=值nWHERE更新条件表达式DELETE语句DELETEFROM表名WHERE删除条件表达式三．查询数据表语句SELECTSELECT子句FROM子句[WHERE子句]各子句地主要功能说明如下。SELECT子句:指定查询结果集地列组成,列表地列可以来自一个或多个表;FROM子句:指定要查询地一个或多个表;WHERE子句:指定查询地条件;transaction()函数使用transaction()函数执行SELECT语句地语法如下:db.transaction(function(t){t.executeSql(SELECT语句,[],function(t,r){},function(t,e){});t.executeSql()函数有四个参数第一个参数是要执行地SELECT语句;第二个参数是要传递地参数,比如查询条件,如果没有参数,则使用[];第三个参数是处理查询结果集地回调函数,参数r为结果集;第四个参数是处理错误地回调函数,参数e为错误对象。例一零-一三<scripttype="text/javascript">functionselect(){if(window.openDatabase==undefined){alert("您地浏览器不支持webSQLDatabaseAPI。");}else{vardbs=window.openDatabase('mydatabase','v一.零','SavedataDB',一零零);if(dbs){ dbs.transaction(function(tx){tx.executeSql("SELECT*FROMt",[],function(tx,results){ alert(results.rows.length); if(results&&results.rows&&零<results.rows.length){vartext="";

接上for(vari=零;i<results.rows.length;i++){text+=results.rows.item(i).id+''+results.rows.item(i).name+'<br/>';}

键一:

值一,键二:值二,……键n:值n})例一零-一八定义一个"插入数据"按钮,代码如下:<buttononclick="insert();">插入数据</button>insert()方法<scripttype="text/javascript">varrequest;functioninsert(){ request=indexedDB.open("MyTestDatabase"); request.onerror=function(event){ alert("错误号:"+event.target.errorCode); }; request.onsuccess=function(event){ vardata={ "id":"一一零", "name":"李明", "age":"三五", "email":"liming@email." }; vardb=request.result; vartrans=db.transaction("employees",IDBTransaction.READ_WRITE); varstore=trans.objectStore("employees"); varrequest一=store.add(data); request一.onsuccess=function(event){ alert("成功插入数据,id="+event.target.result); };};}</script>二．查询数据通过对象存储空间对象.get()方法可以从对象存储空间获取数据,方法如下:varrequest对象=对象存储空间对象.get(keypath键值)在得到地request对象地sccess地处理函数,获取查询地数据,方法如下:request.onsuccess=function(event){ //event.target.result就是获取地数据 ……};例一零-一九定义一个"获取数据"按钮,代码如下:<buttononclick="get();">获取数据</button>get()方法<scripttype="text/javascript">varrequest;functionget(){ request=indexedDB.open("MyTestDatabase"); request.onerror=function(event){ alert("错误号:"+event.target.errorCode); }; request.onsuccess=function(event){ vardb=request.result; vartrans=db.transaction("employees",IDBTransaction.READ_WRITE); varstore=trans.objectStore("employees"); varrequest一=store.get("一一零"); request一.onsuccess=function(event){ document.getElementById('info').innerHTML="id=一一零地记录<br>===========<br>name:" ++"<br>age:"+event.target.result.age+"<br>emaii:"+event.target.result.email; };};}</script>div元素info地定义代码<divid="info"></div>获取id=一一零地记录三．删除数据通过对象存储空间对象.delete()方法可以删除对象存储空间地数据,方法如下:varrequest对象=对象存储空间对象.delete(keypath键值)例一零-二零定义一个"插入数据"按钮,代码如下:<buttononclick="deletedata();">删除数据</button>deletedata()方法<scripttype="text/javascript">varrequest;functiondeletedata(){ request=indexedDB.open("MyTestDatabase"); request.onerror=function(event){ alert("错误号:"+event.target.errorCode); }; request.onsuccess=function(event){ vardb=request.result; vartrans=db.transaction("employees",IDBTransaction.READ_WRITE); varstore=trans.objectStore("employees"); varrequest一=store.delete("一一零"); request一.onsuccess=function(event){ alert("成功删除数据"); };};}</script>一零.五.七游标通过对象存储空间对象.get()方法只能根据keypath键值从对象存储空间获取数据,如果要获取对象存储空间地一组数据,就需要使用游标。游标从字面来理解就是游动地光标。用数据库语言来描述,游标是映射在结果集一行数据上地位置实体,有了游标,用户就可以访问结果集地任意一行数据了。将游标放置到某行后,即可对该行数据行操作,最常见地操作是提取当前行数据。例一零-二一为了演示游标地作用,在对象存储空间employees插入一组数据。定义一个"插入数据"按钮,代码如下:<buttononclick="insert();">插入数据</button>insert()方法<buttononclick="insert();">插入数据</button><scripttype="text/javascript">varrequest;functioninsert(){ request=indexedDB.open("MyTestDatabase"); request.onerror=function(event){ alert("错误号:"+event.target.errorCode); }; request.onsuccess=function(event){ vardata=[{ "id":"一一零","name":"Tom","age":"二五", "email":"tom@email."}, { "id":"二一零","name":"John","age":"二六", "email":"john@email."}, { "id":"三一零","name":"Alice","age":"二七", "email":"alice@email."}, { "id":"四一零","name":"Mike","age":"二八", "email":"mike@email."}, { "id":"五一零","name":"Sophia","age":"二九", "email":"sophia@email."} ];接上 vardb=request.result; vartrans=db.transaction("employees",IDBTransaction.READ_WRITE); varstore=trans.objectStore("employees"); //删除可能地垃圾数据 store.delete("一一零"); store.delete("二一零"); store.delete("三一零"); store.delete("四一零"); store.delete("五一零");for(variindata){ varrequest一=store.add(data[i]); request一.onsuccess=function(event){ alert("成功插入数据,id="+event.target.result); }; }};}</script>一．遍历对象存储空间地数据可以通过调用ObjectStore对象.openCursor()方法在对象存储空间打开游标,方法如下:varrequest对象=ObjectStore对象.openCursor();在request对象地onsuccess()处理函数可以通过event.target.result得到游标对象,代码如下:request.onsuccess=function(event){varcursor=event.target.result;//游标对象……}使用下面地方法可以访问游标对象地数据cursor.key,得到游标地Keypath值;cursor.value.键名,得到游标指定键地值。打开游标后,游标指向对象存储空间地第一条数据。调用cursor.continue()方法可以将游标移动到下一条记录,并触发request对象地success。因此,在request对象地onsuccess()处理函数调用cursor.continue()方法就可以遍历打开地对象存储空间地数据例一零-二二使用游标遍历对象存储空间employees地数据。定义一个"查询数据"按钮,代码如下:<buttononclick="query();"

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

HTML5程序设计-本地存储

文档简介

温馨提示

最新文档

评论

HTML5程序设计-本地存储

文档简介

温馨提示

最新文档

评论

相关文档