新浦京81707con > 注册购买 > 新莆京投注网站html5数据库详解,数据持久化

原标题:新莆京投注网站html5数据库详解,数据持久化

浏览次数:115 时间:2019-11-20

HTML5地点数据库底蕴操作安详严整,html5数据库详整

上面分别介绍本地数据库的生龙活虎大器晚成API及其使用方式。

1、利用openDatabase创建数据库

大家能够运用openDatabase方法创设数据库。openDatabase方法传递多少个参数,分别是:数据库名、数据库版本号(可总结卡塔 尔(英语:State of Qatar)、对数据库的描述、设置分配的数据库的分寸、回调函数。

若果大家要成立三个地方数据库,能够举行如下代码:

var myWebDatabase = openDatabase(“user”, ”1.0”, “user info”, 1024*1024, function(){}); 

这么就创办了三个顾客音讯表。之后能够对成立的地点数据库是或不是中标进行求证:

SQL Code复制内容到剪贴板

  1. if(!dataBase){     
  2. alert(“The database has been created successfully!”);     
  3. }else{     
  4. alert(“The database has not been successfully created.”)     
  5. }if(!dataBase){     
  6. alert(“The database has been created successfully!”);     
  7. }else{     
  8. alert(“The database has not been successfully created.”)     
  9. }     
  10.   

2、利用executeSql方法施行sql语句

使用executeSql方法,大家能够直接执行符合规律的sql语句,如下:

context.executeSql(‘INSERT INTO testTable(id,name) VALUES (1,”Martin”)’);

本来,这里只体现了executeSql的功力,并从未适当表明executeSql方法怎么用,用在何地。要想利用该办法就亟须介绍transaction。

3、利用transaction处监护人务

该格局用来处监护人务,可以传递五个参数:蕴含事务内容的一个措施、施行成功的回调函数、实践破产的回调函数(后两个能够简轻松单卡塔 尔(阿拉伯语:قطر‎。

整合transaction和executeSql,大家就可在我们事先创制的数据库中增加创制数量表并增加数据了,代码如下:

JavaScript Code复制内容到剪贴板

  1. myWebDatabase.transaction(function (context) {     
  2.            context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');     
  3.            context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');     
  4.            context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');     
  5.            context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');     
  6.          });     
  7.   

sql语句的含义非常的少解释,但从这里已经能够很驾驭的观望哪些在本土数据库中,想在平时数据库中相通成立数据库数据表并增加数据了。

以上便是本文的全体内容,希望对大家的学习抱有利于。

本文链接:

上边分别介绍本地数据库的种种API及其使用方法。 1、利用openDatabase创造数据库 大家能够利...

多少持久化及数量更新缓存

剖析HTML5的积存功用和web SQL的连锁操作方法,html5sql

HTML5 引进了二种机制,相像于 HTTP 的对话 cookies,用于在顾客端存款和储蓄结构化数据以至克制以下弱点。

种种 HTTP 诉求中都包蕴 库克ies,进而导致传输肖似的多少减缓大家的 Web 应用程序。

种种 HTTP 央浼中都富含 Cookies,从而引致发送未加密的数码到互联英特网。

Cookies 只可以存储有限的 4KB 数据,不足以存款和储蓄所需的数据。
这两种存储方式是 session storage 和 local storage,它们将用于拍卖区别的情事。

差少之甚少具备最新版的浏览器都辅助 HTML5 存款和储蓄,包含 IE 浏览器。

会话存款和储蓄 _会话存款和储蓄_被规划用来客商施行单黄金年代业务的境况,然则同期能够在不相同的窗口中施行五个事情。

示例

比方说,假诺客户在同一网站的五个不等的窗口中购得机票。纵然该网址使用 cookie 追踪顾客购买的机票,当顾客在窗口中式茶食击页面时,从三个窗口到另三个时当前已经购买贩卖的机票会“泄漏”,那恐怕招致客户购买相像航班的两张长沙票而从未注意到。

HTML5 引进了 sessionStorage 属性,那些网址能够用来把数据增加到会话存储中,用户还是能够在开采的具有该会话的窗口中拜候同一站点的即兴页面,当关闭窗口时,会话也会放弃。

上面包车型地铁代码将会安装二个会话变量,然后访问该变量:

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.   
  5.   <script type="text/javascript">  
  6.     if( sessionStorage.hits ){   
  7.        sessionStorage.hits = Number(sessionStorage.hits)  1;   
  8.     }else{   
  9.        sessionStorage.hits = 1;   
  10.     }   
  11.     document.write("Total Hits :"   sessionStorage.hits );   
  12.   </script>  
  13.   <p>Refresh the page to increase number of hits.</p>  
  14.   <p>Close the window and open it again and check the result.</p>  
  15.   
  16. </body>  
  17. </html>  

本土存款和储蓄 _地方存款和储蓄_被设计用来跨八个窗口进行仓库储存,并不断处于当前对话上。尤其是,出于品质的开始和结果Web 应用程序也许希望在顾客端存款和储蓄百万字节的客户数据,举例客户撰写的总体文书档案大概是客户的信箱。

Cookies 并无法很好的拍卖这种意况,因为各样伏乞都会传导。

示例

HTML5 引进了 localStorage 属性,能够用来访谈页面的当地存款和储蓄区域而从辰时间范围,无论哪天我们选取这么些页面包车型客车时候本地存款和储蓄都以可用的。

下面包车型客车代码设置了三个地面存款和储蓄变量,每便访问那一个页面时都得以访问该变量,以致是后一次打开窗口时:

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.   
  5.   <script type="text/javascript">  
  6.     if( localStorage.hits ){   
  7.        localStorage.hits = Number(localStorage.hits)  1;   
  8.     }else{   
  9.        localStorage.hits = 1;   
  10.     }   
  11.     document.write("Total Hits :"   localStorage.hits );   
  12.   </script>  
  13.   <p>Refresh the page to increase number of hits.</p>  
  14.   <p>Close the window and open it again and check the result.</p>  
  15.   
  16. </body>  
  17. </html>  

实惠学习上述概念 - 请进行在线演习。

删除 Web 存储 在本土机械上囤积敏感数据只怕是危急的,恐怕会留下安全隐患。

_会话存款和储蓄数据_在对话终止之后将由浏览器立即删除。

要去掉本地存款和储蓄装置要求调用 localStorage.remove('key');那些 'key' 正是大家想要移除的值对应的键。如若想要消弭全部安装,要求调用 localStorage.clear() 方法。

上面包车型大巴代码会完全息灭本地存款和储蓄:

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.   
  5.   <script type="text/javascript">  
  6.     localStorage.clear();   
  7.   
  8.     // Reset number of hits.   
  9.     if( localStorage.hits ){   
  10.        localStorage.hits = Number(localStorage.hits)  1;   
  11.     }else{   
  12.        localStorage.hits = 1;   
  13.     }   
  14.     document.write("Total Hits :"   localStorage.hits );   
  15.   </script>  
  16.   <p>Refreshing the page would not to increase hit counter.</p>  
  17.   <p>Close the window and open it again and check the result.</p>  
  18.   
  19. </body>  
  20. </html>  

Web SQL 数据库 Web SQL 数据库 API 而不是 HTML5 标准的朝气蓬勃局地,然则它是二个单身的正统,引进了朝气蓬勃组选用 SQL 操作客商端数据库的 APIs。
主干措施 上面是标准中定义的多个基本措施。也会包蕴在本教程中:

openDatabase:这一个点子运用现存的数据库大概新建的数据库创建贰个数据库对象。
transaction:那一个格局让我们能够支配一个专门的工作,甚至依据这种情形施行提交恐怕回滚。
executeSql:那些主意用于实施实际的 SQL 查询。
拉开数据库
只要数据库已经存在,openDatabase 方法担当开启数据库,假设不设有,这一个方法会创建它。

动用上面包车型客车代码能够创制并展开三个数据库:

JavaScript Code复制内容到剪贴板

  1. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

地点的秘技选择下列多个参数:

数据库名称
版本号
陈诉文本
数据库大小
始建回调
最终也是第七个参数,成立回调会在开创数据库后被调用。不过,即便未有那一个特点(作用),运维时依旧会创建数据库以致科学的版本。

实行查询 实施查询须要运用 database.transaction() 函数。这么些函数须求多少个参数,它是贰个顶住实际实践查询的函数,如下所示:

JavaScript Code复制内容到剪贴板

  1. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);   
  2. 新莆京投注网站,db.transaction(function (tx) {     
  3.    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');   
  4. });  

地方的询问语句会在 'mydb' 数据库中开创二个叫做的 LOGS 的表。

插入操作 为了在表中创设条款,大家在下边包车型地铁事例中踏向简单的 SQL 查询,如下所示:

JavaScript Code复制内容到剪贴板

  1. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);   
  2. db.transaction(function (tx) {   
  3.    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');   
  4.    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');   
  5.    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');   
  6. });  

创建条款时还可以够传递如下所示的动态值:

JavaScript Code复制内容到剪贴板

  1. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);   
  2. db.transaction(function (tx) {     
  3.   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');   
  4.   tx.executeSql('INSERT INTO LOGS   
  5.                         (id,log) VALUES (?, ?'), [e_id, e_log];   
  6. });  

这里的 e_id 和 e_log 是表面变量,executeSql 会映射数组参数中的每一种条目款项给 "?"。

读取操作 要读取已经存在的记录,大家可以应用回调来捕获结果,如下所示:

JavaScript Code复制内容到剪贴板

  1. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);   
  2. db.transaction(function (tx) {   
  3.    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');   
  4.    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');   
  5.    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');   
  6. });   
  7. db.transaction(function (tx) {   
  8.    tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {   
  9.    var len = results.rows.length, i;   
  10.    msg = "<p>Found rows: "   len   "</p>";   
  11.    document.querySelector('#status').innerHTML  =  msg;   
  12.    for (i = 0; i < len; i ){   
  13.       alert(results.rows.item(i).log );   
  14.    }   
  15.  }, null);   
  16. });  

最后示例
终极,然大家把那个例子放到如下所示的欧洲经济共同体 HTML5 文书档案中,然后尝试在 Safari 浏览器中运作它:

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE HTML>   
  2. <html>   
  3. <head>   
  4. <script type="text/javascript">   
  5. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);   
  6. var msg;   
  7. db.transaction(function (tx) {   
  8.   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');   
  9.   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');   
  10.   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');   
  11.   msg = '<p>Log message created and row inserted.</p>';   
  12.   document.querySelector('#status').innerHTML =  msg;   
  13. });   
  14.   
  15. db.transaction(function (tx) {   
  16.   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {   
  17.    var len = results.rows.length, i;   
  18.    msg = "<p>Found rows: "   len   "</p>";   
  19.    document.querySelector('#status').innerHTML  =  msg;   
  20.    for (i = 0; i < len; i ){   
  21.      msg = "<p><b>"   results.rows.item(i).log   "</b></p>";   
  22.      document.querySelector('#status').innerHTML  =  msg;   
  23.    }   
  24.  }, null);   
  25. });   
  26. </script>   
  27. </head>   
  28. <body>   
  29. <div id="status" name="status">Status Message</div>   
  30. </body>   
  31. </html>  

在浏览器中那会生成如下所示结果:

代码如下:
Log message created and row inserted.</p> <p>Found rows: 2</p> <p>foobar</p> <p>logmsg

SQL的连锁操作方法,html5sql HTML5 引进了三种机制,形似于 HTTP 的对话 cookies,用于在客户端存款和储蓄结构化数据甚至克...

常用的8种缓存机制:HTTP缓存, locationStorage, Session Storage, Clear storage, Local Storage, indexDB, Web SQL, Cookies, CacheStorage, Application Cache.

LocalStroage :HTML5

不一样浏览器中localStroage有长度限定且各不相通(IE8:5MB;firefox8:5.24MB;Opera:2MB;Chrome,Safari:2.6MB)

核心API:

设置储存记录: localStorage.setItem()

获取存款和储蓄记录: localStorage.getItem()

删除: localStroage.removeItem()

删除全数: localStroage.clear()

SessionStorage:

能够说sessinonstroage为一时积存器,与localStroge成效相仿,不过在浏览器关闭之后数据会被清空.

sessionstroage与localStroag的API 相同

cookie :

1.cookie指网址为了鉴定识别用于身份或session追踪而变化的存款和储蓄

2.cookie仓库储存小型数据,日常感觉cookie的最大尺寸节制为4kb(4095b~4097b)

设置(js能够选择document.cookie属性来创设,读取,及删除cookie)

document.cookie = 'key=value'

//读取或获得是因而点语法来获得

console.log(docunment.cookie.username);

为cookie增加三个实现时间(能够用克拉霉素T或是UTC)

docunment.cookie="key=value; key=value; key=value; expires=Tues, 31 Oct 2017 12:00:00 GMT"

本文由新浦京81707con发布于注册购买,转载请注明出处:新莆京投注网站html5数据库详解,数据持久化

关键词: 新浦京81707con 日记本

上一篇:【澳门XPJ】C语言程序判断计算机的CPU大小端,大

下一篇:没有了