解析HTML5的存储功能和web SQL的相关操作方法

html教程 跟版网
这篇文章主要介绍了HTML5的存储功能和web SQL的相关操作方法,包括Storage属性的使用以及利用JavaScript进行web SQL的操作等内容，需要的朋友可以参考下

HTML5 引入了两种机制，类似于 HTTP 的会话 cookies，用于在客户端存储结构化数据以及克服以下缺点。

每个 HTTP 请求中都包含 Cookies，从而导致传输相同的数据减缓我们的 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

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

让你的HTML5&CSS3网站在老IE中也能正常显示的3种方法
1、htmlshiv.js Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main，header，footer等HTML5元素。也就是说使用JavaScript能创建这些本来不存在的HTML5新元素。这是什么原理？你可能花几天也想不明白，但谁在意呢！这个脚本几乎是所有正式网站必用
HTML5之Canvas基础绘图教程
HTML5 火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。 好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。 1、使用Canvas绘制直线： !doctype html ht
HTML5 respond.js 解决IE6~8的响应式布局问题
响应式布局，理想状态是，对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器，但是IE8在市场当中仍然占据了比较大量的市场份额，使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢？这里我们需要借助这
微软开源新一代浏览器的JavaScript引擎核心代码
近日，微软宣布开源Chakra的核心组件。Chakra是微软新一代浏览器 Microsoft Edge的JavaScript引擎。相关代码将于2016年1月上传到微软的GitHub账号，项目名称为 ChakraCore，遵循MIT许可协议。 ...，HTML5中国，中国最大的HTML5中文门户。
Google Chrome终于支持CSS Variables了
这篇文章报道的不是“新闻”，因为W3C早已开始着手CSS变量方面的工作。至于Google，则要追溯到11月初，当时该公司主要开发人员之一的Addy Osmani宣布了率先在Chrome Canary中引入对CSS变量的支持。 ...，HTML5中国，中国最大的HTML5中文门户。
如果你坚持写代码,25年后你将会遇到这些...
25年后，你发的编程知识经验还会增加，但薪水却不加了；25年后，如果你还热爱编程便不会选择转行去当管理人员；25年后，你想和好友去玩耍，而经理却让你加班；那么你是否想过这25年之间做出另一种选择呢？ ...，HTML5中国，中国最大的HTML5中文门户。
html教程css教程前端开发cms教程seo优化网页设计服务器数据库平面设计电脑教程编程教程互联网移动开发php编程java编程建站技巧Python编程
织梦资讯网 织梦模板 dede 外语学校 织梦鬼故事 竞价网站源码 竞价培训网 门户网站 织梦二次开发 织梦笑话网 dedecms笑话网 织梦源码 网站建设 搞笑图片 织梦教程 旅游网站源码 织梦旅游网 学校培训 html5 企业织梦源码 医院源码 后台样式 移动营销页 整形医院 大学医院 新手建站 客服代码 洗衣机维修 企业网站 淘宝客 导航菜单 教育网站 学校源码 装修网站 装修模板 美容整形 女性健康 妈妈网 机械源码 建站公司 珠宝首饰 苹果网站 手机资讯 美女图片 织梦模版打包 妇科源码 安卓市场源码 男性时尚网 健康之家 app应用网站 笑话网站 下载站 美女图片网 中医院网站 家装网站源码 QQ网站 标牌网站 魔兽世界网 淘宝客源码 YY网站源码 别墅设计网站 服装搭配网 宝宝起名网 站长网站 婚庆网站 脑科医院源码 笑话源码 肝胆医院 意外怀孕源码 工作室