首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

解析HTML5的存储功能和webSQL的相关操作方法_html5教程技巧

作者：饥饿的饮水机 | 来源：互联网 | 2017-05-11 14:13
这篇文章主要介绍了HTML5的存储功能和webSQL的相关操作方法,包括Storage属性的使用以及利用JavaScript进行webSQL的操作等内容，需要的朋友可以参考下
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>
  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>
  16. body>
  17. html>

本地存储
_本地存储_被设计用于跨多个窗口进行存储，并持续处在当前会话上。尤其是，出于性能的原因 Web 应用程序可能希望在客户端存储百万字节的用户数据，比如用户撰写的整个文档或者是用户的邮箱。

COOKIEs 并不能很好的处理这种情况，因为每个请求都会传输。

示例

HTML5 引入了 localStorage 属性，可以用于访问页面的本地存储区域而没有时间限制，无论何时我们使用这个页面的时候本地存储都是可用的。

下面的代码设置了一个本地存储变量，每次访问这个页面时都可以访问该变量，甚至是下次打开窗口时：

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

  1. >
  2. <html>
  3. <body>
  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>
  16. body>
  17. html>

便于学习上述概念 - 请进行在线练习。

删除 Web 存储
在本地机器上存储敏感数据可能是危险的，可能会留下安全隐患。

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

要清除本地存储设置需要调用 localStorage.remove('key')；这个 'key' 就是我们想要移除的值对应的键。如果想要清除所有设置，需要调用 localStorage.clear() 方法。

下面的代码会完全清除本地存储：

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

  1. >
  2. <html>
  3. <body>
  5. <script type="text/Javascript">
  6. localStorage.clear();
  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>
  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 = "

    Found rows: " + len + "

    "    ;
  11. document.querySelector('#status').innerHTML += msg;
  12. for (i = 0; i
  13. alert(results.rows.item(i).log );
  14. }
  15. }, null);
  16. });

最终示例
最后，然我们把这个例子放到如下所示的完整 HTML5 文档中，然后尝试在 Safari 浏览器中运行它：

Javascript Code复制内容到剪贴板

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

在浏览器中这会生成如下所示结果：

代码如下:


Log message created and row inserted.

Found rows: 2

foobar

logmsg

推荐阅读
  • range

    使用cacti监控mssql 2005运行资源情况的操作步骤

    本文介绍了使用cacti监控mssql 2005运行资源情况的操作步骤，包括安装必要的工具和驱动，测试mssql的连接，配置监控脚本等。通过php连接mssql来获取SQL 2005性能计算器的值，实现对mssql的监控。详细的操作步骤和代码请参考附件。 ... [详细]
  • java

    Hibernate基础映射

    在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • java

    简单的ajax与struts2实例

    前言对于从事技术的人员来说ajax是这好东西，都会使用，而且乐于使用。但对于新手，开发一个ajax实例，还有是难度的，必竟对于他们这是新东西。leo开发一个简单的ajax实例,用的是 ... [详细]
  • java

    javascript入门·表单与表单元素总结（表单验证）

    表单提交前的最后验证：通常在表单提交前，我们必须确认用户是否都把必须填选的做了，如果没有，就不能被提交到服务器，这里我们用到表单的formname.submit()看演示，其实这个对于我们修炼道 ... [详细]
  • java

    ASP.NET Tips: 获取插入记录的ID的方法详解

    本文详细介绍了在ASP.NET中获取插入记录的ID的几种方法，包括使用SCOPE_IDENTITY()和IDENT_CURRENT()函数，以及通过ExecuteReader方法执行SQL语句获取ID的步骤。同时，还提供了使用这些方法的示例代码和注意事项。对于需要获取表中最后一个插入操作所产生的ID或马上使用刚插入的新记录ID的开发者来说，本文提供了一些有用的技巧和建议。 ... [详细]
  • java

    Java验证码——kaptcha的使用配置及样式

    Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • java

    高质量SQL书写的30条建议

    高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]
  • main

    在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板

    在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板
    本文介绍了在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板的方法和步骤，包括将ResourceDictionary添加到页面中以及在ResourceDictionary中实现模板的构建。通过本文的阅读，读者可以了解到在Xamarin XAML语言中构建控件模板的具体操作步骤和语法形式。 ... [详细]
  • list

    MyBatis多表查询与动态SQL使用

    MyBatis多表查询与动态SQL使用
    本文介绍了MyBatis多表查询与动态SQL的使用方法，包括一对一查询和一对多查询。同时还介绍了动态SQL的使用，包括if标签、trim标签、where标签、set标签和foreach标签的用法。文章还提供了相关的配置信息和示例代码。 ... [详细]
  • java

    如何在输入字段中使用默认值的方法及代码

    本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时，使用50作为默认值；当输入字段填充有-20或更多（负数）时，使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码，用于动态地根据条件使用默认值。 ... [详细]
  • java

    常用的CSS属性及用法整理

    本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]
  • main

    CSS |网格行结束属性

    CSS|网格-行-结束属性原文:https://www.gee ... [详细]
  • main

    css元素可拖动,如何使用CSS禁止元素拖拽？

    css元素可拖动,如何使用CSS禁止元素拖拽？
    一、用户行为三剑客以下3个CSS属性：user-select属性可以设置是否允许用户选择页面中的图文内容；user-modify属性可以设置是否允许输入 ... [详细]
  • java

    pyecharts 介绍

    pyecharts 介绍
    一、pyecharts介绍ECharts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部 ... [详细]
  • java

    Google Contacts API未返回输出 - Google Contacts API not returning output

    Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]
author-avatar
饥饿的饮水机
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有