<meta name="keywords" content="华夏棋牌,HTML5,SQL,存储,storage" />
华夏棋牌 > web前端 > H5教程 > 注释

剖析HTML5的存储功效和web SQL的相关操作措施_html5教程手艺

原创 2016-05-16 15:45:55 0 92
赞助会员专享特权
HTML5 引入了两种机制,类似于 HTTP 的会话 cookies,用于在客户端存储结构化数据和战胜以下弱点。

华夏棋牌每个 HTTP 请求中都网罗 Cookies,从而招致传输类似的数据减缓我们的 Web 应用法式模范模范。

每个 HTTP 请求中都网罗 Cookies,从而招致发送未加密的数据到互联网上。

Cookies 只能存储无限的 4KB 数据,缺乏以存储所需的数据。
这两种存储要领是 session storage 和 local storage,它们将用于处置赏罚赏罚不合的情形。

华夏棋牌简直一切最新版的浏览器都支持 HTML5 存储,网罗 IE 浏览器。

会话存储
_会话存储_被设计用于用户推行单一事务的场景,然则同时可以在不合的窗口中推行多个事务。

示例

好比,假定用户在统一网站的两个不合的窗口中购置机票。假定该网站应用 cookie 跟踪用户购置的机票,当用户在窗口中点击页面时,从一个窗口到此外一个时以后曾经购置的机票会“走漏”,这能够招致用户购置统一航班的两张机票而没有重视到。

HTML5 引入了 sessionStorage 属性,这个网站可以用来把数据添加到会话存储中,用户依然可以在掀开的持有该会话的窗口中会见统一站点的随便任性页面,当关闭窗口时,会话也会损掉落。

下面的代码将会设置一个会话变量,然后会见该变量:

XML/HTML Code复制内容到剪贴板
  1. >
  2. <html>
  3. <body>
  4. <script type="text/javascript">
  5. if( sessionStorage.hits ){
  6. sessionStorage.hits = Number(sessionStorage.hits) +1;
  7. }else{
  8. sessionStorage.hits = 1;
  9. }
  10. document.write("Total Hits :" + sessionStorage.hits );
  11. script>
  12. <p>Refresh the page to increase number of hits.p>
  13. <p>Close the window and open it again and check the result.p>
  14. body>
  15. html>

当地存储
_当地存储_被设计用于跨多个窗口阻拦存储,并一连处在以后会话上。特殊是,出于性能的启事 Web 应用法式模范模范能够欲望在客户端存储百万字节的用户数据,好比用户撰写的一切文档或许是用户的邮箱。

Cookies 着实不克不及很好的处置赏罚赏罚这类情形,由于每个请求都邑传输。

示例

HTML5 引入了 localStorage 属性,可以用于会见页面的当地存储区域而没有时间限制,岂论甚么时间我们应用这个页面的时间当地存储都是可用的。

华夏棋牌下面的代码设置了一个当地存储变量,每次会见这个页面时都可以会见该变量,以致是下次掀开窗口时:

XML/HTML Code复制内容到剪贴板
  1. >
  2. <html>
  3. <body>
  4. <script type="text/javascript">
  5. if( localStorage.hits ){
  6. localStorage.hits = Number(localStorage.hits) +1;
  7. }else{
  8. localStorage.hits = 1;
  9. }
  10. document.write("Total Hits :" + localStorage.hits );
  11. script>
  12. <p>Refresh the page to increase number of hits.p>
  13. <p>Close the window and open it again and check the result.p>
  14. body>
  15. html>

便于学习上述看法 - 请阻拦在线演习。

删除 Web 存储
华夏棋牌在当地机械上存储敏感数据能够是风险的,能够会留下安然隐患。

_会话存储数据_在会话终止以后将由浏览器急速删除。

华夏棋牌要扫除当地存储设置须要挪用 localStorage.remove('key');这个 'key' 就是我们想要移除的值对应的键。假设想要扫除一切设置,须要挪用 localStorage.clear() 措施。

下面的代码会完全扫除当地存储:

XML/HTML Code复制内容到剪贴板
  1. >
  2. <html>
  3. <body>
  4. <script type="text/javascript">
  5. localStorage.clear();
  6. // Reset number of hits.
  7. if( localStorage.hits ){
  8. localStorage.hits = Number(localStorage.hits) +1;
  9. }else{
  10. localStorage.hits = 1;
  11. }
  12. document.write("Total Hits :" + localStorage.hits );
  13. script>
  14. <p>Refreshing the page would not to increase hit counter.p>
  15. <p>Close the window and open it again and check the result.p>
  16. body>
  17. 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 = "

    Found rows: " + len + "

    "
    ;
  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. 华夏棋牌

  2. "status" name="status">Status Message

                      <dfn id='n3d6m'><optgroup id='n3d6m'></optgroup></dfn><tfoot id='n3d6m'><bdo id='n3d6m'><div id='n3d6m'></div><i id='n3d6m'><dt id='n3d6m'></dt></i></bdo></tfoot>

                      <ul id='n3d6m'></ul>

                        在浏览器中这会天生以下所示效果:

                        复制代码
                        代码以下:

                        华夏棋牌Log message created and row inserted.

                        华夏棋牌Found rows: 2

                        foobar

                        logmsg

                        php中文网最新课程二维码
                      • 相关标签:HTML5 SQL 存储 storage
                      • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
                      • 相关文章


                      • 若何应用input事宜来监听移动端的输入_html5教程手艺
                      • 深刻剖析HTML5 Canvas控制图形矩阵变换的措施_html5教程手艺
                      • 实例解说应用SVG制造loading加载动画的措施_html5教程手艺
                      • 实例解说应用HTML5 Canvas API操作图形改变的措施_html5教程手艺
                      • 剖析HTML5的存储功效和web SQL的相关操作措施_html5教程手艺
                      • 网友议论

                        文明上彀理性语言,请遵守 新闻议论服务协定

                        我要议论

                        独孤九贱(5)_ThinkPHP5视频教程

                        华夏棋牌ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

                        • 2017-05-16 12:03:57
                        • 点击数(173683)

                        独孤九贱(4)_PHP视频教程

                        华夏棋牌江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

                        • 2017-03-20 22:47:17
                        • 点击数(169819)

                        独孤九贱(1)_HTML5视频教程

                        《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

                        • 2017-03-13 10:15:11
                        • 点击数(137197)

                        ThinkPHP5实战之[教授修养治理系统]

                        华夏棋牌本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

                        • 2017-07-24 16:48:56
                        • 点击数(130522)

                        PHP入门视频教程之一周学会PHP

                        一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

                        • 2016-11-16 14:54:14
                        • 点击数(129868)

                        作者信息

                        php中文网

                        认证0级讲师

                        比来文章

                        相关视频教程

                      • javascript低级视频教程
                      • jquery 基础视频教程
                      • javascript三级联动视频教程
                      • 独孤九贱(3)_JavaScript视频教程
                      • 独孤九贱(6)_jQuery视频教程
                      • 相关视频章节