当前位置:Gxlcms > 数据库问题 > html5-localStorage本地存储和SQLLite本地数据库

html5-localStorage本地存储和SQLLite本地数据库

时间:2021-07-01 10:21:17 帮助过:2人阅读

supports_html5_storage() { try { return ‘localStorage‘ in window && window[‘localStorage‘] !== null; } catch (e) { return false; } } 或使用开源的用来侦测用户浏览器对HTML5支持度的工具(例如Modernizr) if (Modernizr.localstorage) { // window.localStorage is available! } else { // 浏览器不支持HTML5 storage :( // 可以考虑使用dojox.storage 或其他方法 }

使用例子

  1. <code class=" hljs javascript">localStorage.a = <span class="hljs-number">3</span>;<span class="hljs-comment">//设置a为"3"</span>
  2. localStorage[<span class="hljs-string">"a"</span>] = <span class="hljs-string">"sfsf"</span>;<span class="hljs-comment">//设置a为"sfsf",覆盖上面的值</span>
  3. localStorage.setItem(<span class="hljs-string">"b"</span>,<span class="hljs-string">"isaac"</span>);<span class="hljs-comment">//设置b为"isaac"</span>
  4. <span class="hljs-keyword">var</span> a1 = localStorage[<span class="hljs-string">"a"</span>];<span class="hljs-comment">//获取a的值</span>
  5. <span class="hljs-keyword">var</span> a2 = localStorage.a;<span class="hljs-comment">//获取a的值</span>
  6. <span class="hljs-keyword">var</span> b = localStorage.getItem(<span class="hljs-string">"b"</span>);<span class="hljs-comment">//获取b的值</span>
  7. localStorage.removeItem(<span class="hljs-string">"c"</span>);<span class="hljs-comment">//清除c的值</span>
  8. <span class="hljs-keyword">if</span> (localStorage.pagecount)
  9. {
  10. localStorage.pagecount=<span class="hljs-built_in">Number</span>(localStorage.pagecount) +<span class="hljs-number">1</span>;
  11. }
  12. <span class="hljs-keyword">else</span>
  13. {
  14. localStorage.pagecount=<span class="hljs-number">1</span>;
  15. }
  16. document.write(<span class="hljs-string">"Visits "</span>+ localStorage.pagecount + <span class="hljs-string">" time(s)."</span>);
  17. <span class="xml"><span class="hljs-tag"></<span class="hljs-title">script</span>></span></span></code>

SQLLite本地数据库

本地数据库支持比较少,不够规范,建议少用

本地数据库是H5之后出现的SQLLite数据库,可以通过SQL语言来访问文件型SQL数据库

使用数据库的步骤:

  1. 创建访问数据库
  2. 使用事务处理

创建访问数据库对象
博客出处
var db= openDatabase(‘mydb’,’1.0’,’TestDB’,2*1024*1024)

第一个参数:数据库名

第二个参数:版本号

第三个参数:数据库描述

第四个参数:数据库大小

该方法返回创建后的数据库访问对象,如果该数据库不存在,则创建数据库

用executeSql执行查询

transaction.executeSql(sqlquery,[],dataHandler,errorHandler);

第一个参数:查询语句

第二个参数:查询语句中的?

eg: transaction.executeSql(“UPDATE people set age=? which name=?”,[age,name])

第三个参数:执行成功时调用的回调函数

function dataHandler(transaction,result){//回调函数内容}

第四个参数:执行失败时调用的回调函数

function errorHandler(transaction,erromsg){//alert(“执行出错!”)}

  1. <code class=" hljs xml"><span class="hljs-doctype"><!DOCTYPE html></span>
  2. <span class="hljs-tag"><<span class="hljs-title">html</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">"en"</span>></span>
  3. <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
  4. <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>></span>
  5. <span class="hljs-tag"><<span class="hljs-title">title</span>></span>Sqlite<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
  6. <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  7. <span class="hljs-tag"><<span class="hljs-title">body</span> <span class="hljs-attribute">onload</span>=<span class="hljs-value">"init()"</span>></span>
  8. <span class="hljs-comment"><!-- 创建数据库对象、使用事务进行数据库操作 --></span>
  9. 姓名:<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"name"</span>/></span>
  10. 电话:<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"tel"</span> /></span>
  11. <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"保存"</span> <span class="hljs-attribute">onclick</span>=<span class="hljs-value">"saveData()"</span> /></span>
  12. <span class="hljs-tag"><<span class="hljs-title">hr</span>/></span>
  13. <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">onclick</span>=<span class="hljs-value">"showAllData()"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"显示全部"</span>></span>
  14. <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">onclick</span>=<span class="hljs-value">"delAllData()"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"清空全部"</span>></span>
  15. <span class="hljs-tag"><<span class="hljs-title">hr</span>/></span>
  16. <span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"datatable"</span> <span class="hljs-attribute">border</span>=<span class="hljs-value">"1"</span>></span>
  17. <span class="hljs-tag"></<span class="hljs-title">table</span>></span>
  18. <span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"‘msg"</span>></span><span class="hljs-tag"></<span class="hljs-title">p</span>></span>
  19. <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
  20. <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
  21. <span class="hljs-keyword">var</span> datatable = <span class="hljs-literal">null</span>;
  22. <span class="hljs-keyword">var</span> db = openDatabase(<span class="hljs-string">‘myTel‘</span>,<span class="hljs-string">‘1.0‘</span>,<span class="hljs-string">‘test db‘</span>,<span class="hljs-number">1024</span>*<span class="hljs-number">100</span>);<span class="hljs-comment">//数据库名 版本 数据库描述 大小</span>
  23. <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">init</span><span class="hljs-params">()</span>{</span><span class="hljs-comment">//初始化工作</span>
  24. datatable = document.getElementById(<span class="hljs-string">‘datatable‘</span>);
  25. showAllData();
  26. }
  27. <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">removeAllData</span><span class="hljs-params">()</span>{</span><span class="hljs-comment">//移除页面上展示的数据</span>
  28. <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = datatable.childNodes.length-<span class="hljs-number">1</span>;i>=<span class="hljs-number">0</span>;i--){
  29. datatable.removeChild(datatable.childNodes[i]);
  30. }
  31. <span class="hljs-keyword">var</span> tr = document.createElement(<span class="hljs-string">‘tr‘</span>);
  32. <span class="hljs-keyword">var</span> th1 = document.createElement(<span class="hljs-string">‘th‘</span>);
  33. <span class="hljs-keyword">var</span> th2 = document.createElement(<span class="hljs-string">‘th‘</span>);
  34. th1.innerHTML = <span class="hljs-string">‘姓名‘</span>;
  35. th2.innerHTML = <span class="hljs-string">‘电话‘</span>;
  36. tr.appendChild(th1);
  37. tr.appendChild(th2);
  38. datatable.appendChild(tr);
  39. }
  40. <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">showData</span><span class="hljs-params">(row)</span>{</span><span class="hljs-comment">//显示数据</span>
  41. <span class="hljs-keyword">var</span> tr = document.createElement(<span class="hljs-string">‘tr‘</span>);
  42. <span class="hljs-keyword">var</span> td1 = document.createElement(<span class="hljs-string">‘td‘</span>);
  43. td1.innerHTML = row.name;
  44. <span class="hljs-keyword">var</span> td2 = document.createElement(<span class="hljs-string">‘td‘</span>);
  45. td2.innerHTML = row.tel;
  46. tr.appendChild(td1);
  47. tr.appendChild(td2);
  48. datatable.appendChild(tr);
  49. }
  50. <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">showAllData</span><span class="hljs-params">()</span>{</span><span class="hljs-comment">//显示所有数据</span>
  51. db.transaction(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(tx)</span>{</span>
  52. tx.executeSql(<span class="hljs-string">‘create table if not exists TelData(name TEXT,tel TEXT)‘</span>,[],<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(tx,res)</span>{</span>
  53. },<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(tx,err)</span>{</span>
  54. alert(err.message)
  55. });
  56. tx.executeSql(<span class="hljs-string">‘select * from TelData‘</span>,[],<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(tx,result)</span>{</span>
  57. removeAllData();
  58. <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span> ;i<result.rows.length;i++){
  59. showData(result.rows.item(i));
  60. }
  61. })
  62. })
  63. }
  64. <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">saveData</span><span class="hljs-params">()</span>{</span><span class="hljs-comment">//保存数据</span>
  65. <span class="hljs-keyword">var</span> name = document.getElementById(<span class="hljs-string">‘name‘</span>).value;
  66. <span class="hljs-keyword">var</span> tel = document.getElementById(<span class="hljs-string">‘tel‘</span>).value;
  67. addData(name,tel);
  68. showAllData();
  69. }
  70. <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addData</span><span class="hljs-params">(name,tel)</span>{</span><span class="hljs-comment">//添加数据</span>
  71. db.transaction(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(tx)</span>{</span>
  72. tx.executeSql(<span class="hljs-string">‘insert into TelData values(?,?)‘</span>,[name,tel],<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(tx,rs)</span>{</span>
  73. alert(<span class="hljs-string">‘yes‘</span>);
  74. },
  75. <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(tx,err)</span>{</span>
  76. alert(err.source +<span class="hljs-string">‘====‘</span>+err.message);
  77. })
  78. })
  79. }
  80. <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">delAllData</span><span class="hljs-params">()</span>{</span><span class="hljs-comment">//删除所有数据</span>
  81. db.transaction(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(tx)</span>{</span>
  82. tx.executeSql(<span class="hljs-string">‘delete from TelData‘</span>,[],<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(tx,res)</span>{</span>
  83. alert(<span class="hljs-string">‘删除成功~‘</span>);
  84. },<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(tx,err)</span>{</span>
  85. alert(<span class="hljs-string">‘删除失败‘</span>+err.message);
  86. })
  87. })
  88. showAllData();
  89. }
  90. </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  91. <span class="hljs-tag"></<span class="hljs-title">html</span>></span></code>

参考
http://blog.csdn.net/sinat_25127047/article/details/51360868
http://www.cnblogs.com/yexiaochai/p/4509472.html
http://blog.csdn.net/dojotoolkit/article/details/6614883
http://html5doctor.com/introducing-web-sql-databases/
https://dev.w3.org/html5/webdatabase/
http://blog.csdn.net/panda_m/article/details/49951555

html5-localStorage本地存储和SQLLite本地数据库

标签:

人气教程排行