当前位置：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本地数据库

标签：

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！