时间:2021-07-01 10:21:17 帮助过:2人阅读
使用例子
- <code class=" hljs javascript">localStorage.a = <span class="hljs-number">3</span>;<span class="hljs-comment">//设置a为"3"</span>
- localStorage[<span class="hljs-string">"a"</span>] = <span class="hljs-string">"sfsf"</span>;<span class="hljs-comment">//设置a为"sfsf",覆盖上面的值</span>
- localStorage.setItem(<span class="hljs-string">"b"</span>,<span class="hljs-string">"isaac"</span>);<span class="hljs-comment">//设置b为"isaac"</span>
- <span class="hljs-keyword">var</span> a1 = localStorage[<span class="hljs-string">"a"</span>];<span class="hljs-comment">//获取a的值</span>
- <span class="hljs-keyword">var</span> a2 = localStorage.a;<span class="hljs-comment">//获取a的值</span>
- <span class="hljs-keyword">var</span> b = localStorage.getItem(<span class="hljs-string">"b"</span>);<span class="hljs-comment">//获取b的值</span>
- localStorage.removeItem(<span class="hljs-string">"c"</span>);<span class="hljs-comment">//清除c的值</span>
- <span class="hljs-keyword">if</span> (localStorage.pagecount)
- {
- localStorage.pagecount=<span class="hljs-built_in">Number</span>(localStorage.pagecount) +<span class="hljs-number">1</span>;
- }
- <span class="hljs-keyword">else</span>
- {
- localStorage.pagecount=<span class="hljs-number">1</span>;
- }
- document.write(<span class="hljs-string">"Visits "</span>+ localStorage.pagecount + <span class="hljs-string">" time(s)."</span>);
- <span class="xml"><span class="hljs-tag"></<span class="hljs-title">script</span>></span></span></code>
本地数据库支持比较少,不够规范,建议少用
本地数据库是H5之后出现的SQLLite数据库,可以通过SQL语言来访问文件型SQL数据库
使用数据库的步骤:
创建访问数据库对象
博客出处
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(“执行出错!”)}
- <code class=" hljs xml"><span class="hljs-doctype"><!DOCTYPE html></span>
- <span class="hljs-tag"><<span class="hljs-title">html</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">"en"</span>></span>
- <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
- <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>></span>
- <span class="hljs-tag"><<span class="hljs-title">title</span>></span>Sqlite<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
- <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
- <span class="hljs-tag"><<span class="hljs-title">body</span> <span class="hljs-attribute">onload</span>=<span class="hljs-value">"init()"</span>></span>
- <span class="hljs-comment"><!-- 创建数据库对象、使用事务进行数据库操作 --></span>
- 姓名:<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>
- 电话:<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>
- <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>
- <span class="hljs-tag"><<span class="hljs-title">hr</span>/></span>
- <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>
- <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>
- <span class="hljs-tag"><<span class="hljs-title">hr</span>/></span>
- <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>
- <span class="hljs-tag"></<span class="hljs-title">table</span>></span>
- <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>
- <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
- <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">
- <span class="hljs-keyword">var</span> datatable = <span class="hljs-literal">null</span>;
- <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>
- <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>
- datatable = document.getElementById(<span class="hljs-string">‘datatable‘</span>);
- showAllData();
- }
- <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>
- <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--){
- datatable.removeChild(datatable.childNodes[i]);
- }
- <span class="hljs-keyword">var</span> tr = document.createElement(<span class="hljs-string">‘tr‘</span>);
- <span class="hljs-keyword">var</span> th1 = document.createElement(<span class="hljs-string">‘th‘</span>);
- <span class="hljs-keyword">var</span> th2 = document.createElement(<span class="hljs-string">‘th‘</span>);
- th1.innerHTML = <span class="hljs-string">‘姓名‘</span>;
- th2.innerHTML = <span class="hljs-string">‘电话‘</span>;
- tr.appendChild(th1);
- tr.appendChild(th2);
- datatable.appendChild(tr);
- }
- <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>
- <span class="hljs-keyword">var</span> tr = document.createElement(<span class="hljs-string">‘tr‘</span>);
- <span class="hljs-keyword">var</span> td1 = document.createElement(<span class="hljs-string">‘td‘</span>);
- td1.innerHTML = row.name;
- <span class="hljs-keyword">var</span> td2 = document.createElement(<span class="hljs-string">‘td‘</span>);
- td2.innerHTML = row.tel;
- tr.appendChild(td1);
- tr.appendChild(td2);
- datatable.appendChild(tr);
- }
- <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>
- db.transaction(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(tx)</span>{</span>
- 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>
- },<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(tx,err)</span>{</span>
- alert(err.message)
- });
- 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>
- removeAllData();
- <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span> ;i<result.rows.length;i++){
- showData(result.rows.item(i));
- }
- })
- })
- }
- <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>
- <span class="hljs-keyword">var</span> name = document.getElementById(<span class="hljs-string">‘name‘</span>).value;
- <span class="hljs-keyword">var</span> tel = document.getElementById(<span class="hljs-string">‘tel‘</span>).value;
- addData(name,tel);
- showAllData();
- }
- <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>
- db.transaction(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(tx)</span>{</span>
- 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>
- alert(<span class="hljs-string">‘yes‘</span>);
- },
- <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(tx,err)</span>{</span>
- alert(err.source +<span class="hljs-string">‘====‘</span>+err.message);
- })
- })
- }
- <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>
- db.transaction(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(tx)</span>{</span>
- 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>
- alert(<span class="hljs-string">‘删除成功~‘</span>);
- },<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(tx,err)</span>{</span>
- alert(<span class="hljs-string">‘删除失败‘</span>+err.message);
- })
- })
- showAllData();
- }
- </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
- <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本地数据库
标签: