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


Posted in HTML / CSS onFebruary 19, 2016

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
HTML / CSS 相关文章推荐
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 #HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 #HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 #HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 #HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 #HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 #HTML / CSS
HTML5实现预览本地图片
Feb 17 #HTML / CSS
You might like
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
python实现ip地址的包含关系判断
2020/02/07 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
国家励志奖学金获奖感言
2014/01/09 职场文书
公司离职证明样本
2014/09/13 职场文书
信访维稳工作汇报
2014/10/27 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
农村老人去世追悼词
2015/06/23 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP