必赢亚洲手机app下载


化学告诉你金装衣饰366net必赢亚洲手机版

一张图告诉你微课怎么做

地面存款和储蓄366net必赢亚洲手机版

HTML5出版今后,前端参加了二个着重的效率,就是地面存款和储蓄,本地存款和储蓄可分为4类:

Local
Storage
:总的存款和储蓄量有所限制,并无法提供真正的检索API,数据的生命期比窗口或浏览器的性命期长,数据可被同源的各个窗口恐怕标签页共享,包容性很好,使用最多的存款和储蓄形式。

Session
Storage
:只要浏览器窗口不关门就会直接留存,不应有把真的有价值的东西放在在那之中,数据会保存到存储它的窗口照旧标签页关闭时,数据只在构建他们的窗口可能标签页可知

Indexed Database:在Indexed
Database中,objectstore代替了价值观的表的定义,每一种objectstore约等于二个key和value的集结,IndexedDB并不像守旧的如SQL
Server那样要求万分安装。Indexed是存在于浏览器端的同时能被用户所访问控制。是保留不灵动用户数据的顶级方案,也可以用于制造本地利用,NOSql。

Web SQL Database:实际上未包蕴在HTML5正经中。和Indexed
Database都以在客户端存款和储蓄多量结构化数据的缓解方案。web sql
database实现了古板的遵照sql语句的数据库操作,而indexed
database完毕了nosql的蕴藏格局,关周密据库。

Indexed
Database通过一向执行一起依旧异步的函数调用来搜寻树状的靶子存款和储蓄引擎。索引数据库API避开了询问字符串,它选拔的最底层API扶助将值直接存款和储蓄在javascript对象中。存款和储蓄在数据库中的值能够通过键或利用索引获取到,并且能够使用同步或异步方式访问API。索引数据库也限制在同源范围内。

① 、HTML4客户端存款和储蓄

B/S架构的利用大批量的新闻存款和储蓄在服务器端,客户端通过请求响应的艺术从服务器获得数据,那样集中储存也会给服务器带来相应的压力,有个别数据能够直接存款和储蓄在客户端,守旧的Web技术中会使用Cookie,但Cookie有局地败笔,为了注脚那几个毛病大家先看看当提交表单时会有那个消息会被浏览器收集后发送到服务器。

Cookies 客户端 独享 4K

Session 服务端 独享 少量

Application 服务端 共享 小量

1.① 、提交表单发送到服务器的音讯

1)、带name的可用表单成分

2)、url

3)、客户端请求尾部音信

4)、cookie

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
//定义一个cookie对象
Cookie cookie=new     Cookie("color", "blue");
//设置过期时间为365小时,以秒为单位
cookie.setMaxAge(60*60*365);
//添加cookie
response.addCookie(cookie);
 %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>提交表单测试</title>
</head>
<body>
    <form action="target.do?id=1" method="post">
        <h2>提交表单测试</h2>
        <p>
            名称:<input type="text" name="txtName" id="txtName1" />
        </p>
        <p>
            价格:<input type="text" name="txtPrice" id="txtPrice1" value="888" readonly="readonly"/>
        </p>
        <p>
            数量:<input type="text" name="txtAmount" id="txtAmount1" value="999"  disabled="disabled"/>
        </p>
        <input type="hidden" id="key" value="123445">
        <input type="submit" value="提交" />
    </form>
</body>
</html>

运作结果:

366net必赢亚洲手机版 1

服务器在响应头部中宣称必要客户端浏览器钦命设置cookie
color=blue的办事,且钦点了晚点时间,会将cookie音讯记录在地头,查看结果如下:

366net必赢亚洲手机版 2

当提交新闻给服务器时cookie将征集后回去服务器,同时也会将url、带name可用的表单及请求尾部信息如user-agent等,结果如下:

366net必赢亚洲手机版 3

1.② 、客户端本地存储概要

顾名思义客户端本地存储正是将消息存款和储蓄在客户端电脑上,cookie正是一种典型的历史观客户端存储,长时间以来本地存款和储蓄能力一向是桌面应用差异于Web应用的二个注重优势,作为Web应用程序而言,新一代的HTML标准对数据的地头存款和储蓄提出了更高的须求。守旧的Web数据存款和储蓄格局一贯来利用的是Cookie,但Cookie有以下缺陷:

a)、cookie会被增大在种种HTTP请求中,所以无形中扩充了流量。

b)、由于在HTTP请求中的cookie是当面传递的,所以安全性成难点。

c)、Cookie的尺寸限制在4 KB左右,体量达不到供给。

HTML5中的Web
Storage,称为Web本地存款和储蓄,在Web客户端储存数据的功力,用键值对的款式保留数据,曾经属于HTML5的正经,近期一度被单独出来形成独立的正统体系。本地存款和储蓄优势:

a)、统一的科班,包容性高(IE捌 、各大浏览器协理)

b)、数据存储量大

c)、无需安装插件

d)、收缩互连网流量

e)、越发适合移动端

HTML5 提供了种种在客户端存款和储蓄数据的新措施,即localStorage
、sessionStorage、globalStorage、Web Sql Database。
前边多少个适用于储存较少的多寡,而Web Sql
Database适用于储存大型的,复杂的数据,小编习惯把后面包车型大巴多少个叫做小存款和储蓄。 IE捌 、Firefox3.陆 、Chrome⑤ 、Safari四 、Opera10,事实注脚各类浏览器在API方面包车型地铁兑现基本上一致,存在必然的包容性难题,但不影响健康使用。

在chrome浏览器中得以采用开发者工具查看到种种差异的地面存款和储蓄格局,如下图所示:

366net必赢亚洲手机版 4

Web SQL Database 和 Indexed Database
都以在客户端存款和储蓄大量结构化数据的化解方案。Web SQL Database
完成了价值观的依照 SQL 语句的数据库操作,而 Indexed Database 完毕了 NoSQL
的贮存方式。

Web Storage 那种用于存款和储蓄 (key, value),一般两者都以字符串;

IndexDB 是增强型的 Web Storage,也是储存 (key, value);

Web SQL 则是 SQLite,多少个整机的关系型数据库,能够推行 SQL。

WebSQL是SQLite在浏览器中的实现,所以它是一种关系型数据库。由于W3C对其规范定义不够美丽,各家浏览器有各自完毕,有浏览器包容难题;

IndexDB是一种key-value类型的非关周密据库(NoSQL)

二、localStorage

localStorage:将数据保存在客户端本地的硬件设备(平时指硬盘,但也足以是其它硬件装置)中,纵然浏览器被关闭了,该数量依旧存在,下次打开浏览器访问网站时仍旧能够持续使用。

2.1、添加

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>localStorage 本地存储</title>
    </head>
    <body>
        <h2>localStorage 本地存储</h2>
        <button onclick="add_click()">添加</button>
        <script type="text/javascript">
            function    add_click()
            {
                //向本地存储中添加一个名为name,值为"手机"的key-value对象
                localStorage.setItem("name","手机");
                //办法2
                localStorage["price"]=999.5;
                //办法3
                localStorage.amount=1788;
            }
        </script>
    </body>
</html>

运维结果:

366net必赢亚洲手机版 5

2.2、取值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>localStorage 本地存储</title>
    </head>
    <body>
        <h2>localStorage 本地存储</h2>
        <button onclick="add_click()">添加</button>
        <button onclick="get_click()">取值</button>
        <h3 id="msg"></h3>
        <a href="d02.html">d02.html</a>
        <script type="text/javascript">
            var msg=document.getElementById("msg");
            //添加
            function    add_click()
            {
                //向本地存储中添加一个名为name,值为"手机"的key-value对象
                localStorage.setItem("name","手机");
                //办法2
                localStorage["price"]=999.5;
                //办法3
                localStorage.amount=1788;
            }
            //取值
            function get_click()
            {
                msg.innerHTML+=localStorage.getItem("name")+"<br/>";
                msg.innerHTML+=localStorage["price"]+"<br/>";
                msg.innerHTML+=localStorage.amount+"<br/>";
            }
        </script>
    </body>
</html>

 运行结果:

366net必赢亚洲手机版 6

2.3、修改

            //修改
            function update_click()
            {
                //如果不存在就添加,如果存在就修改
                localStorage.setItem("name","iPhone 8 plus手机");
                //修改办法2
                localStorage["price"]=899.5;
                //修改办法3
                localStorage.amount=100;
            }

 运维结果:

366net必赢亚洲手机版 7

2.4、删除

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>localStorage 本地存储</title>
    </head>
    <body>
        <h2>localStorage 本地存储</h2>
        <button onclick="add_click()">添加</button>
        <button onclick="get_click()">取值</button>
        <button onclick="update_click()">修改</button>
        <button onclick="delete_click()">删除</button>
        <h3 id="msg"></h3>
        <a href="d02.html">d02.html</a>
        <script type="text/javascript">
            var msg=document.getElementById("msg");
            //添加
            function    add_click()
            {
                //向本地存储中添加一个名为name,值为"手机"的key-value对象
                localStorage.setItem("name","手机");
                //添加办法2
                localStorage["price"]=999.5;
                //添加办法3
                localStorage.amount=1788;
            }
            //取值
            function get_click()
            {
                msg.innerHTML+=localStorage.getItem("name")+"<br/>";
                msg.innerHTML+=localStorage["price"]+"<br/>";
                msg.innerHTML+=localStorage.amount+"<br/>";
            }
            //修改
            function update_click()
            {
                //如果不存在就添加,如果存在就修改
                localStorage.setItem("name","iPhone 8 plus手机");
                //修改办法2
                localStorage["price"]=899.5;
                //修改办法3
                localStorage.amount=100;
            }
            //删除
            function delete_click()
            {
               //根据键删除
               //localStorage.removeItem("price");
               //删除所有
               localStorage.clear();
            }
        </script>
    </body>
</html>

 运维结果:

366net必赢亚洲手机版 8

2.伍 、跨页面与跨域

当关闭浏览器,下次再打开时,值仍旧存在。能够跨页面,不能够跨域。大家在d01页面中添加了值,在d02页面中依旧能够访问,在整整同域下都足以访问。

366net必赢亚洲手机版 9

2.陆 、存款和储蓄地点与SQLite

localStorage与cookie不平等,它存款和储蓄在叁个数据库文件中,暗中同意地方在:C:\Users\Administrator\AppData\Local\Google\Chrome\User
Data\Default\databases\http_localhost_*

或者

C:\Users\Administrator\AppData\Local\Google\Chrome\User
Data\Profile 1\Local Storage

Administrator是当前报到用户名

366net必赢亚洲手机版 10

运用SQLite数据库管理工科具,打开后来看的结果,那里以taobao存款和储蓄客户端的localStorage为例:

366net必赢亚洲手机版 11

提醒:SQLite,是一款轻型的免费开源的数据库,是服从ACID的关系型数据库管理种类,它涵盖在3个周旋小的C库中。它是D.RichardHipp建立的国有领域项目。它的规划目的是嵌入式的,而且最近早已在广大嵌入式产品中使用了它,它占用能源十分的低,在嵌入式设备中,可能只要求几百K的内存就够了。它能够帮助Windows/Linux/Unix等等主流的操作系统,同时能够跟很多程序语言相结合,比如
Tcl、C#、PHP、Java等,还有ODBC接口,同样比起Mysql、PostgreSQL这七款开源的社会风气有名数据库管理系列来讲,它的处理速度比他们都快。SQLite第③个Alpha版本诞生于三千年八月。
至2016年曾经有1四个年头,SQLite也迎来了二个本子 SQLite 3已经公布。

SQLiteSpy管理工科具下载: http://pan.baidu.com/s/1i5JQtBf

2.柒 、用途、演习与包容性

怀有必要将少量(不超越4M)数据存储在客户端的要求都适用,如密码,用户偏好(profile)等

366net必赢亚洲手机版 12

报到成功后记录用户访问次数。

在IE第88中学测试通过

366net必赢亚洲手机版 13

Firefox测试通过

366net必赢亚洲手机版 14

三、sessionStorage

将数据权且保存在客户端session对象中。session对象就是会话对象,session中蕴藏的数额独立于每一种客户,该数据会趁着浏览器的倒闭而没有。

sessionStorage的操作api与localStorage基本一样,在不手动清除的情景下localStorage永久保存,而sessionStorage只是近来暂存。

3.1、sessionStorage使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>sessionStorage 本地存储</title>
    </head>
    <body>
        <h2>sessionStorage 本地存储</h2>
        <button onclick="add_click()">添加</button>
        <button onclick="get_click()">取值</button>
        <button onclick="update_click()">修改</button>
        <button onclick="delete_click()">删除</button>
        <h3 id="msg"></h3>
        <a href="d04.html">d04.html</a>
        <script type="text/javascript">
            var msg=document.getElementById("msg");
            //添加
            function    add_click()
            {
                //向本地存储中添加一个名为name,值为"手机"的key-value对象
                sessionStorage.setItem("name","手机");
                //添加办法2
                sessionStorage["price"]=999.5;
                //添加办法3
                sessionStorage.amount=1788;
            }
            //取值
            function get_click()
            {
                msg.innerHTML+=sessionStorage.getItem("name")+"<br/>";
                msg.innerHTML+=sessionStorage["price"]+"<br/>";
                msg.innerHTML+=sessionStorage.amount+"<br/>";
            }
            //修改
            function update_click()
            {
                //如果不存在就添加,如果存在就修改
                sessionStorage.setItem("name","iPhone 8 plus手机");
                //修改办法2
                sessionStorage["price"]=899.5;
                //修改办法3
                sessionStorage.amount=100;
            }
            //删除
            function delete_click()
            {
               //根据键删除
               //sessionStorage.removeItem("price");
               //删除所有
               sessionStorage.clear();
            }
        </script>
    </body>
</html>

运作结果:

366net必赢亚洲手机版 15

能够兑现在页面间传值,比如能够权且存款和储蓄用户音信。

3.二 、Web本地存款和储蓄事件监听 

当程序修改localStorage与sessionStorage时将触及全局事件。

当setItem(),removeItem()恐怕clear()
方法被调用,并且数据真的爆发了改变时,就会触发storage事件,假如须求举行监听数据处理,通过以下办法:
window.addEventListener(event,handleEvent, capture)
event:设置成storage
handle伊芙nt:事件处理函数
capture:事件处理顺序,一般安装成false,表示选拔冒泡格局处理

handle伊夫nt处监护人件的函数会接收到二个Storage伊夫nt对象,该指标有以下属性:
key:被修改的键。
oldValue:修改前的值(如若是充实新的键值,则该属性为null)
newValue:修改后的值(假设是删除键值,则该属性为null)
url/uri:触发当前储存事件的页面包车型客车url

注意:storage改变的时候,触发那些事件会调用全数同域下别的窗口的storage事件,可是它自身触发storage即当前窗口是不会触发那几个事件的(当然ie那几个特例除了这些之外,它含有自个儿本事也会触发storage事件)

 修改d02页面,监听值的扭转。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>获得localStorage的值</title>
    </head>
    <body>
        <script type="text/javascript">
            console.log(localStorage.price);

            window.addEventListener("storage",function(obj){
                alert(obj.oldValue+","+obj.newValue+","+obj.url);
            },true);
        </script>
    </body>
</html>

运行结果如下:

366net必赢亚洲手机版 16

3.3、cookie、sessionStorage、localStorage比较

 366net必赢亚洲手机版 17

366net必赢亚洲手机版 18

四、Web SQL Database 

Web SQL Database 引入了一套使用 SQL 来决定客户端数据库(client-side
database)的 API,这一个 API 是异步的(asynchronous),规范中所使用的 SQL
语言为 SQLite。Web SQL Database API 实际上未包涵在 HTML 5
规范内部,它是3个独立的正儿八经,它引入了一套使用 SQL 操作客户端数据库的
API,这一个 API 有同步的,也有异步的, 同步版本的 API 只在干活线程(Worker
Threads)上有用,由于并不是持有的浏览器都扶助理工科程师作线程,一般情形下,都会选择异步
API。包容情状如下:

366net必赢亚洲手机版 19

Web SQL
Database能够让开发人士使用SQL语句操作客户端浏览器中放到的SQLite数据库
,给开发人士提供了便宜。对于简易的数据,使用sessionStorage和localStorage能够很好地达成存取,不过对于拍卖复杂的关系型数据,它就不可能了。那也是
HTML 5 的“Web SQLDatabase”API
接口的行使所在。笔者把它理解成一个Html5条件下得以用Js执行CRUD的Web数据库

八个主导措施
openDatabase:那些措施运用现有数据库或创办新数据库创造数据库对象。
transaction:那么些法子允许大家依据事态控制工作提交或回滚。
executeSql:这几个主意用于实施实际的SQL查询。

366net必赢亚洲手机版 20

4.壹 、创设数据库

应用openDatabase创造或打开数据库,尽管存在就开辟,假诺不存在就创办,语法如下:

openDatabase(a,b,c,d,e);

a).数据库名称。
b).版本号 目前为1.0
c).对数据库的讲述
d).设置数据的尺寸,以Byte为单位
e).回调函数(可归纳)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Web SQL Database</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <body>
        <h2>Web SQL Database</h2>
        <h2 id="msg"></h2>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
          //数据库
          var db;

          //创建名称为products,版本为1.0,描述为产品数据库,3M大小的数据库
          db=openDatabase("products",1.0,"产品数据库",1024*1024*3,function(){
              log("创建或打开数据库完成");
          });

          //显示消息
          function log(info){
              $("#msg")[0].innerHTML+=info+"<br/>";
          }
        </script>
    </body>
</html>

运作结果:

366net必赢亚洲手机版 21

4.2、创建表

实践全部的SQL语句都将使用到transaction、executeSql三个方法,基本语法格式如下:

            数据库对象.transaction(function(tx) {
                tx.executeSql(
                    "要执行的sql", [参数],
                    function(tx, result) {
                        alert('成功时的回调方法');
                    },
                    function(tx, error) {
                        alert('失败时的回调方法' + error.message);
                    });
            });

页面脚本如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Web SQL Database</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>

    <body>
        <h2>Web SQL Database</h2>
        <div>
            <button onclick="createTable()">创建表</button>
        </div>
        <h2 id="msg"></h2>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //创建或打开名称为products,版本为1.0,描述为产品数据库,3M大小的数据库
            var db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {
                log("创建数据库完成");
            });

            //创建表
            function createTable() {
                db.transaction(function(tx) {
                    tx.executeSql(
                        "create table if not exists goods(id integer primary key autoincrement,name text not null,price double)", [],
                        function(tx, result) {
                            log('创建表成功');
                        },
                        function(tx, error) {
                            log('创建表失败' + error.message);
                        });
                });
            }

            //显示消息
            function log(info) {
                $("#msg")[0].innerHTML += info + "<br/>";
            }
        </script>
    </body>

</html>

运维结果:

366net必赢亚洲手机版 22

当创设成功时,能够发以后出现了五个表,当中名为sqlite_sequence为活动增加用的行列。

4.三 、添加数据

页面脚本如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Web SQL Database</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>

    <body>
        <h2>Web SQL Database</h2>
        <div>
            <button onclick="createTable()">创建表</button>

            <fieldset>
                <legend>商品信息</legend>
                <p>
                    <label for="name">名称:</label>
                    <input type="text" id="name" value="" />
                </p>
                <p>
                    <label for="price">价格:</label>
                    <input type="text" id="price" value="" />
                </p>
                <p>
                    <button onclick="insert()">添加</button>
                </p>
            </fieldset>
        </div>
        <h2 id="msg"></h2>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //创建名称为products,版本为1.0,描述为产品数据库,3M大小的数据库
            var db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {
                log("创建或打开数据库完成");
            });

            //创建表
            function createTable() {
                db.transaction(function(tx) {
                    tx.executeSql(
                        "create table if not exists goods(id integer primary key autoincrement,name text not null,price double)", [],
                        function(tx, result) {
                            log('创建表成功');
                        },
                        function(tx, error) {
                            log('创建表失败' + error.message);
                        });
                });
            }

            //插入数据
            function insert() {
                db.transaction(function(tx) {
                    tx.executeSql(
                        "insert into goods(name,price) values(?,?)", 
                        [$("#name").val(),$("#price").val()],
                        function(tx, result) {
                            log('添加数据成功');
                        },
                        function(tx, error) {
                            log('添加数据失败' + error.message);
                        });
                });
            }



            //显示消息
            function log(info) {
                $("#msg")[0].innerHTML += info + "<br/>";
            }
        </script>
    </body>

</html>

运作结果:

366net必赢亚洲手机版 23

4.肆 、浮现数据

页面脚本如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Web SQL Database</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>

    <body>
        <h2>Web SQL Database</h2>
        <div>
            <button onclick="createTable()">创建表</button>
            <table border="1" width="80%" id="tabGoods">
                <tr><th>编号</th><th>名称</th><th>价格</th><th>删除</th></tr>
            </table>
            <fieldset>
                <legend>商品信息</legend>
                <p>
                    <label for="name">名称:</label>
                    <input type="text" id="name" value="" />
                </p>
                <p>
                    <label for="price">价格:</label>
                    <input type="text" id="price" value="" />
                </p>
                <p>
                    <button onclick="insert()">添加</button>
                </p>
            </fieldset>
        </div>
        <h2 id="msg"></h2>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //创建名称为products,版本为1.0,描述为产品数据库,3M大小的数据库
            var db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {
                log("创建或打开数据库完成");
            });

            //展示,加载数据
            function select()
            {
                //将表格中tr索引大于0的元素删除
                $("#tabGoods tr:gt(0)").remove();
                db.transaction(function(tx) {
                    tx.executeSql(
                        "select id,name,price from goods", [],
                        function(tx, result) {

                            for (var i=0;i<result.rows.length;i++) {
                                var tr=$("<tr/>");

                                $("<td/>").text(result.rows.item(i)["id"]).appendTo(tr);
                                $("<td/>").text(result.rows.item(i)["name"]).appendTo(tr);
                                $("<td/>").text(result.rows.item(i)["price"]).appendTo(tr);
                                var del=$("<a href='#' onclick='del("+result.rows.item(i)["id"]+")' >删除</a>")
                                $("<td/>").append(del).appendTo(tr);

                                tr.appendTo("#tabGoods");
                            }

                        },
                        function(tx, error) {
                            log('创建表失败' + error.message);
                        });
                });
            }
            select();

            //创建表
            function createTable() {
                db.transaction(function(tx) {
                    tx.executeSql(
                        "create table if not exists goods(id integer primary key autoincrement,name text not null,price double)", [],
                        function(tx, result) {
                            log('创建表成功');
                        },
                        function(tx, error) {
                            log('创建表失败' + error.message);
                        });
                });
            }

            //插入数据
            function insert() {
                db.transaction(function(tx) {
                    tx.executeSql(
                        "insert into goods(name,price) values(?,?)", 
                        [$("#name").val(),$("#price").val()],
                        function(tx, result) {
                            log('添加数据成功');
                            select();
                        },
                        function(tx, error) {
                            log('添加数据失败' + error.message);
                        });
                });
            }



            //显示消息
            function log(info) {
                $("#msg")[0].innerHTML += info + "<br/>";
            }
        </script>
    </body>

</html>

运营结果如下:

366net必赢亚洲手机版 24

4.五 、编辑数据

页面脚本如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Web SQL Database</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>

    <body>
        <h2>Web SQL Database</h2>
        <div>
            <button onclick="createTable()">创建表</button>
            <table border="1" width="80%" id="tabGoods">
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>删除</th>
                </tr>
            </table>
            <fieldset>
                <legend>商品信息</legend>
                <p>
                    <label for="name">名称:</label>
                    <input type="text" id="name" value="" />
                </p>
                <p>
                    <label for="price">价格:</label>
                    <input type="text" id="price" value="" />
                </p>
                <p>
                    <input type="hidden" id="goodsId" />
                    <button onclick="insert()">添加</button>
                    <button onclick="update()">更新</button>
                </p>
            </fieldset>
        </div>
        <h2 id="msg"></h2>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //创建名称为products,版本为1.0,描述为产品数据库,3M大小的数据库
            var db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {
                log("创建或打开数据库完成");
            });

            //展示,加载数据
            function select() {
                //将表格中tr索引大于0的元素删除
                $("#tabGoods tr:gt(0)").remove();
                db.transaction(function(tx) {
                    tx.executeSql(
                        "select id,name,price from goods", [],
                        function(tx, result) {

                            for(var i = 0; i < result.rows.length; i++) {
                                var tr = $("<tr/>");

                                $("<td/>").text(result.rows.item(i)["id"]).appendTo(tr);
                                $("<td/>").text(result.rows.item(i)["name"]).appendTo(tr);
                                $("<td/>").text(result.rows.item(i)["price"]).appendTo(tr);
                                var del = $("<a href='#' onclick='del(" + result.rows.item(i)["id"] + ",this)' >删除 | </a>")
                                var edit = $("<a href='#' onclick='edit(" + result.rows.item(i)["id"] + ",this)' >修改</a>")
                                $("<td/>").append(del).append(edit).appendTo(tr);

                                tr.appendTo("#tabGoods");
                            }

                        },
                        function(tx, error) {
                            log('创建表失败' + error.message);
                        });
                });
            }
            select();

            //创建表
            function createTable() {
                db.transaction(function(tx) {
                    tx.executeSql(
                        "create table if not exists goods(id integer primary key autoincrement,name text not null,price double)", [],
                        function(tx, result) {
                            log('创建表成功');
                        },
                        function(tx, error) {
                            log('创建表失败' + error.message);
                        });
                });
            }

            //插入数据
            function insert() {
                db.transaction(function(tx) {
                    tx.executeSql(
                        "insert into goods(name,price) values(?,?)", [$("#name").val(), $("#price").val()],
                        function(tx, result) {
                            log('添加数据成功');
                            select();
                        },
                        function(tx, error) {
                            log('添加数据失败' + error.message);
                        });
                });
            }

            //删除 
            function del(id, link) {
                db.transaction(function(tx) {
                    tx.executeSql(
                        "delete from goods where id=?", [id],
                        function(tx, result) {
                            log('删除成功');
                            //查找a标签最近的一个tr父元素,移除
                            $(link).closest("tr").remove();
                        },
                        function(tx, error) {
                            log('删除失败' + error.message);
                        });
                });
            }

            //编辑
            function edit(id) {
                db.transaction(function(tx) {
                    tx.executeSql(
                        "select id,name,price from goods where id=?", [id],
                        function(tx, result) {
                            $("#name").val(result.rows.item(0)["name"]);
                            $("#price").val(result.rows.item(0)["price"]);
                            $("#goodsId").val(result.rows.item(0)["id"]);
                            log("修改后请保存");
                        },
                        function(tx, error) {
                            log('编辑失败' + error.message);
                        });
                });
            }

            //更新
            function update() {
                if($("#goodsId").val()) {
                    db.transaction(function(tx) {
                        tx.executeSql(
                            "update goods set name=?,price=?  where id=?", [$("#name").val(), $("#price").val(), $("#goodsId").val()],
                            function(tx, result) {
                                log('更新成功');
                                select();
                                $("#goodsId").val("");
                            },
                            function(tx, error) {
                                log('更新失败' + error.message);
                            });
                    });
                } else {
                    log("请选择要更新的记录 ");
                }
            }

            //显示消息
            function log(info) {
                $("#msg")[0].innerHTML += info + "<br/>";
            }
        </script>
    </body>

</html>

运作结果如下:

366net必赢亚洲手机版 25

366net必赢亚洲手机版 26

4.⑥ 、删除数据

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Web SQL Database</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>

    <body>
        <h2>Web SQL Database</h2>
        <div>
            <button onclick="createTable()">创建表</button>
            <table border="1" width="80%" id="tabGoods">
                <tr><th>编号</th><th>名称</th><th>价格</th><th>删除</th></tr>
            </table>
            <fieldset>
                <legend>商品信息</legend>
                <p>
                    <label for="name">名称:</label>
                    <input type="text" id="name" value="" />
                </p>
                <p>
                    <label for="price">价格:</label>
                    <input type="text" id="price" value="" />
                </p>
                <p>
                    <button onclick="insert()">添加</button>
                </p>
            </fieldset>
        </div>
        <h2 id="msg"></h2>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //创建名称为products,版本为1.0,描述为产品数据库,3M大小的数据库
            var db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {
                log("创建或打开数据库完成");
            });

            //展示,加载数据
            function select()
            {
                //将表格中tr索引大于0的元素删除
                $("#tabGoods tr:gt(0)").remove();
                db.transaction(function(tx) {
                    tx.executeSql(
                        "select id,name,price from goods", [],
                        function(tx, result) {

                            for (var i=0;i<result.rows.length;i++) {
                                var tr=$("<tr/>");

                                $("<td/>").text(result.rows.item(i)["id"]).appendTo(tr);
                                $("<td/>").text(result.rows.item(i)["name"]).appendTo(tr);
                                $("<td/>").text(result.rows.item(i)["price"]).appendTo(tr);
                                var del=$("<a href='#' onclick='del("+result.rows.item(i)["id"]+",this)' >删除</a>")
                                $("<td/>").append(del).appendTo(tr);

                                tr.appendTo("#tabGoods");
                            }

                        },
                        function(tx, error) {
                            log('创建表失败' + error.message);
                        });
                });
            }
            select();

            //创建表
            function createTable() {
                db.transaction(function(tx) {
                    tx.executeSql(
                        "create table if not exists goods(id integer primary key autoincrement,name text not null,price double)", [],
                        function(tx, result) {
                            log('创建表成功');
                        },
                        function(tx, error) {
                            log('创建表失败' + error.message);
                        });
                });
            }

            //插入数据
            function insert() {
                db.transaction(function(tx) {
                    tx.executeSql(
                        "insert into goods(name,price) values(?,?)", 
                        [$("#name").val(),$("#price").val()],
                        function(tx, result) {
                            log('添加数据成功');
                            select();
                        },
                        function(tx, error) {
                            log('添加数据失败' + error.message);
                        });
                });
            }

            //删除 
            function del(id,link) {
                db.transaction(function(tx) {
                    tx.executeSql(
                        "delete from goods where id=?", 
                        [id],
                        function(tx, result) {
                            log('删除成功');
                            //查找a标签最近的一个tr父元素,移除
                            $(link).closest("tr").remove();
                        },
                        function(tx, error) {
                            log('删除失败' + error.message);
                        });
                });
            }
            //显示消息
            function log(info) {
                $("#msg")[0].innerHTML += info + "<br/>";
            }
        </script>
    </body>

</html>

运作结果:

366net必赢亚洲手机版 27

4.7、删除表

删除表

            //创建表
            function dropTable() {
                db.transaction(function(tx) {
                    tx.executeSql(
                        "drop table IF EXISTS goods", [],
                        function(tx, result) {
                            log('删除表成功');
                        },
                        function(tx, error) {
                            log('删除表失败' + error.message);
                        });
                });
            }

运营结果:

366net必赢亚洲手机版 28

4.⑧ 、数据库地方

D:\Users\Administrator\AppData\Local\Google\Chrome\User
Data\Default\databases

366net必赢亚洲手机版 29

4.9、封装JavaScript

前边的示范中javascript方法都一贯揭露在window下,有大概与其余js龃龉,能够展开简易封装。

简单对象封装示例:

        var ticker={
            n:0,
            add:function()
            {
                this.n++;
            },
            show:function()
            {
                alert(this.n);
            }
        }
        ticker.add();
        ticker.add();
        ticker.show();

 

运作结果:2 

首先次封装后的代码,在整整window对象中只揭露dbApp对象,代码如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Web SQL Database</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>

    <body>
        <h2>Web SQL Database</h2>
        <div>
            <button id="btnCreateTable">创建表</button>
            <button id="btnDropTable">删除表</button>
            <table border="1" width="80%" id="tabGoods">
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>删除</th>
                </tr>
            </table>
            <fieldset>
                <legend>商品信息</legend>
                <p>
                    <label for="name">名称:</label>
                    <input type="text" id="name" value="" />
                </p>
                <p>
                    <label for="price">价格:</label>
                    <input type="text" id="price" value="" />
                </p>
                <p>
                    <input type="hidden" id="goodsId" />
                    <button id="btnInsert">添加</button>
                    <button id="btnUpdate">更新</button>
                </p>
            </fieldset>
        </div>
        <h2 id="msg"></h2>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">        
          //定义当前应用的对象
          var dbApp={
               //打开数据库
               openDb:function()
               {
                   //创建名称为products,版本为1.0,描述为产品数据库,3M大小的数据库
                this.db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {
                    this.log("创建或打开数据库完成");
                });
               },
               //初始化
               init:function()
               {
                   //打开或创建数据库
                   this.openDb();
                   //绑定事件
                   this.bindEvent();
                   //展示数据
                   this.select();
                   this.log("初始化完成");
               },
               //绑定事件
               bindEvent:function()
               {
                   //添加事件
                   $("#btnInsert").click(this.insert);
                   $("#btnUpdate").click(this.update);
                   $("#btnCreateTable").click(this.createTable);
                   $("#btnDropTable").click(this.dropTable);
               },
               //显示消息
            log:function(info) {
                $("#msg")[0].innerHTML += info + "<br/>";
            },
            //创建表
            createTable:function() {
                this.db.transaction(function(tx) {
                    tx.executeSql(
                        "create table IF not EXISTS goods(id integer primary key autoincrement,name text not null,price double)", [],
                        function(tx, result) {
                            this.log('创建表成功');
                        },
                        function(tx, error) {
                            this.log('创建表失败' + error.message);
                        });
                });
            },
            //删除表
            dropTable:function() {
                this.db.transaction(function(tx) {
                    tx.executeSql(
                        "drop table IF EXISTS goods", [],
                        function(tx, result) {
                            this.log('删除表成功');
                        },
                        function(tx, error) {
                            this.log('删除表失败' + error.message);
                        });
                });
            },
            //展示,加载数据
            select:function() {
                //将表格中tr索引大于0的元素删除
                $("#tabGoods tr:gt(0)").remove();
                this.db.transaction(function(tx) {
                    tx.executeSql(
                        "select id,name,price from goods", [],
                        function(tx, result) {

                            for(var i = 0; i < result.rows.length; i++) {
                                var tr = $("<tr/>");

                                $("<td/>").text(result.rows.item(i)["id"]).appendTo(tr);
                                $("<td/>").text(result.rows.item(i)["name"]).appendTo(tr);
                                $("<td/>").text(result.rows.item(i)["price"]).appendTo(tr);
                                var del = $("<a href='#' onclick='dbApp.del(" + result.rows.item(i)["id"] + ",this)' >删除 | </a>")
                                var edit = $("<a href='#' onclick='dbApp.edit(" + result.rows.item(i)["id"] + ",this)' >修改</a>")
                                $("<td/>").append(del).append(edit).appendTo(tr);

                                tr.appendTo("#tabGoods");
                            }

                        },
                        function(tx, error) {
                            this.log('创建表失败' + error.message);
                        });
                });
            },
            //插入数据
            insert:function() {
                //如果insert方法被绑定为事件,则this表示事件发生的对象
                dbApp.db.transaction(function(tx) {
                    tx.executeSql(
                        "insert into goods(name,price) values(?,?)", [$("#name").val(), $("#price").val()],
                        function(tx, result) {
                            dbApp.log('添加数据成功');
                            //刷新
                            dbApp.select();
                        },
                        function(tx, error) {
                            dbApp.log('添加数据失败' + error.message);
                        });
                });
            },
            //删除 
            del:function(id, link) {
                dbApp.db.transaction(function(tx) {
                    tx.executeSql(
                        "delete from goods where id=?", [id],
                        function(tx, result) {
                            dbApp.log('删除成功');
                            //查找a标签最近的一个tr父元素,移除
                            $(link).closest("tr").remove();
                        },
                        function(tx, error) {
                            dbApp.log('删除失败' + error.message);
                        });
                });
            },
            //编辑
            edit:function(id) {
                dbApp.db.transaction(function(tx) {
                    tx.executeSql(
                        "select id,name,price from goods where id=?", [id],
                        function(tx, result) {
                            $("#name").val(result.rows.item(0)["name"]);
                            $("#price").val(result.rows.item(0)["price"]);
                            $("#goodsId").val(result.rows.item(0)["id"]);
                            dbApp.log("修改后请保存");
                        },
                        function(tx, error) {
                            dbApp.log('编辑失败' + error.message);
                        });
                });
            },
            //更新
            update:function() {
                if($("#goodsId").val()) {
                    dbApp.db.transaction(function(tx) {
                        tx.executeSql(
                            "update goods set name=?,price=?  where id=?", [$("#name").val(), $("#price").val(), $("#goodsId").val()],
                            function(tx, result) {
                                dbApp.log('更新成功');
                                dbApp.select();
                                $("#goodsId").val("");
                            },
                            function(tx, error) {
                                dbApp.log('更新失败' + error.message);
                            });
                    });
                } else {
                    dbApp.log("请选择要更新的记录 ");
                }
            }
          };

        dbApp.init();            
        </script>
    </body>

</html>

运营结果:

366net必赢亚洲手机版 30

从上面的代码能够发现操作数据库,执行sql的艺术存在大气的冗余,能够优化,优化后的代码如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Web SQL Database</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>

    <body>
        <h2>Web SQL Database</h2>
        <div>
            <button id="btnCreateTable">创建表</button>
            <button id="btnDropTable">删除表</button>
            <table border="1" width="80%" id="tabGoods">
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>删除</th>
                </tr>
            </table>
            <fieldset>
                <legend>商品信息</legend>
                <p>
                    <label for="name">名称:</label>
                    <input type="text" id="name" value="" />
                </p>
                <p>
                    <label for="price">价格:</label>
                    <input type="text" id="price" value="" />
                </p>
                <p>
                    <input type="hidden" id="goodsId" />
                    <button id="btnInsert">添加</button>
                    <button id="btnUpdate">更新</button>
                </p>
            </fieldset>
        </div>
        <h2 id="msg"></h2>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">        
          //定义当前应用的对象
          var dbApp={
               //打开数据库
               openDb:function()
               {
                   //创建名称为products,版本为1.0,描述为产品数据库,3M大小的数据库
                this.db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {
                    this.log("创建或打开数据库完成");
                });
               },
               //初始化
               init:function()
               {
                   //打开或创建数据库
                   this.openDb();
                   //绑定事件
                   this.bindEvent();
                   //展示数据
                   this.select();
                   this.log("初始化完成");
               },
               //绑定事件
               bindEvent:function()
               {
                   //添加事件
                   $("#btnInsert").click(this.insert);
                   $("#btnUpdate").click(this.update);
                   $("#btnCreateTable").click(this.createTable);
                   $("#btnDropTable").click(this.dropTable);
               },
               //显示消息
            log:function(info) {
                $("#msg")[0].innerHTML += info + "<br/>";
            },
            //执行sql的通用方法 result.rowsAffected 影响行数
            //callback执行成功时的回调方法
            exeSql:function(sql,title,param,callback) {
                title=title||"操作";
                this.db.transaction(function(tx) {
                    tx.executeSql(
                        sql, param||[],
                        function(tx, result) {
                            dbApp.log(title+'成功');
                            if(callback){  //如果有参数
                                callback(result);
                            }
                        },
                        function(tx, error) {
                            dbApp.log(title+'失败' + error.message);
                        });
                });
            },
            //创建表
            createTable:function() {
                dbApp.exeSql("create table IF not EXISTS goods(id integer primary key autoincrement,name text not null,price double)","创建表");
            },
            //删除表
            dropTable:function() {
                dbApp.exeSql("drop table IF EXISTS goods","删除表");
            },
            //展示,加载数据
            select:function() {
                dbApp.exeSql("select id,name,price from goods","查询",[],function(result) {
                           //将表格中tr索引大于0的元素删除
                            $("#tabGoods tr:gt(0)").remove();
                            for(var i = 0; i < result.rows.length; i++) {
                                var tr = $("<tr/>");

                                $("<td/>").text(result.rows.item(i)["id"]).appendTo(tr);
                                $("<td/>").text(result.rows.item(i)["name"]).appendTo(tr);
                                $("<td/>").text(result.rows.item(i)["price"]).appendTo(tr);
                                var del = $("<a href='#' onclick='dbApp.del(" + result.rows.item(i)["id"] + ",this)' >删除 | </a>")
                                var edit = $("<a href='#' onclick='dbApp.edit(" + result.rows.item(i)["id"] + ",this)' >修改</a>")
                                $("<td/>").append(del).append(edit).appendTo(tr);
                                tr.appendTo("#tabGoods");
                            }
                            });
            },
            //插入数据
            insert:function() {
                //如果insert方法被绑定为事件,则this表示事件发生的对象
                dbApp.exeSql("insert into goods(name,price) values(?,?)","添加",[$("#name").val(), $("#price").val()],function(){
                    dbApp.select();
                });
            },
            //删除 
            del:function(id, link) {
                dbApp.exeSql("delete from goods where id=?","删除",[id],function(result){
                    //查找a标签最近的一个tr父元素,移除
                    $(link).closest("tr").remove();
                });
            },
            //编辑
            edit:function(id) {
                dbApp.exeSql("select id,name,price from goods where id=?","编辑",[id],function(result) {
                            $("#name").val(result.rows.item(0)["name"]);
                            $("#price").val(result.rows.item(0)["price"]);
                            $("#goodsId").val(result.rows.item(0)["id"]);
                            dbApp.log("修改后请保存");
                    });
            },
            //更新
            update:function() {
                if($("#goodsId").val()) {
                    dbApp.exeSql("update goods set name=?,price=?  where id=?","更新",[$("#name").val(), $("#price").val(), $("#goodsId").val()],function(result) {
                                dbApp.select();
                                $("#goodsId").val("");
                    });
                } else {
                    dbApp.log("请选择要更新的记录 ");
                }
            }
          };

        dbApp.init();            
        </script>
    </body>

</html>

运作结果:

366net必赢亚洲手机版 31

4.⑩ 、美化页面

在原页面的底蕴上扩张css样式,添加样式后的页面脚本如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Web SQL Database</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                font-family: "microsoft yahei";
            }
            #container{
                padding: 10px;
                font-size: 14px;
            }
            #container a{
                color: #fff;
                text-decoration: none;
                margin-right: 5px;
            }
            #container a:hover{
                color:orangered;
            }
            button,a{
                border: 0;
                height: 22px;
                line-height: 22px;
                border-radius: 3px;
                padding:0 10px;
                background: dodgerblue;
                color: white;
            }
            button:hover{
                background: orangered;
            }
            #container h2{
                height: 60px;
            }
            html #tabGoods{
                width:100%;
                margin: 15px 0;
                border: 2px solid #0062CC;
            }
            #tabGoods,#tabGoods td,#tabGoods th
            {
                border: 1px solid #0062CC;
                border-collapse: collapse;
            }
            #tabGoods td,#tabGoods th{
                padding: 5px 0 5px 5px;
            }
            #fieldsetForm{
                width: 400px;
                padding: 10px;
                border-radius: 10px;
                border: 2px solid #0062CC;
            }
            #fieldsetForm p{
                padding: 10px;
            }
            #msg{
                font-size: 16px;
                font-weight: normal;
                height: 100px;
                overflow: auto;
                margin-top: 10px;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <h2>Web SQL Database</h2>
            <button id="btnCreateTable">创建表</button>
            <button id="btnDropTable">删除表</button>
            <table id="tabGoods">
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>删除</th>
                </tr>
            </table>
            <fieldset id="fieldsetForm">
                <legend>商品信息</legend>
                <p>
                    <label for="name">名称:</label>
                    <input type="text" id="name" value="" />
                </p>
                <p>
                    <label for="price">价格:</label>
                    <input type="text" id="price" value="" />
                </p>
                <p>
                    <input type="hidden" id="goodsId" />
                    <button id="btnInsert">添加</button>
                    <button id="btnUpdate">更新</button>
                </p>
            </fieldset>
            <h2 id="msg"></h2>
        </div>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义当前应用的对象
            var dbApp = {
                //打开数据库
                openDb: function() {
                    //创建名称为products,版本为1.0,描述为产品数据库,3M大小的数据库
                    this.db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {
                        this.log("创建或打开数据库完成");
                    });
                },
                //初始化
                init: function() {
                    //打开或创建数据库
                    this.openDb();
                    //绑定事件
                    this.bindEvent();
                    //展示数据
                    this.select();
                    this.log("初始化完成");
                },
                //绑定事件
                bindEvent: function() {
                    //添加事件
                    $("#btnInsert").click(this.insert);
                    $("#btnUpdate").click(this.update);
                    $("#btnCreateTable").click(this.createTable);
                    $("#btnDropTable").click(this.dropTable);
                },
                //显示消息
                log: function(info) {
                    $("#msg")[0].innerHTML += info + "<br/>";
                },
                //执行sql的通用方法 result.rowsAffected 影响行数
                //callback执行成功时的回调方法
                exeSql: function(sql, title, param, callback) {
                    title = title || "操作";
                    this.db.transaction(function(tx) {
                        tx.executeSql(
                            sql, param || [],
                            function(tx, result) {
                                dbApp.log(title + '成功');
                                if(callback) { //如果有参数
                                    callback(result);
                                }
                            },
                            function(tx, error) {
                                dbApp.log(title + '失败' + error.message);
                            });
                    });
                },
                //创建表
                createTable: function() {
                    dbApp.exeSql("create table IF not EXISTS goods(id integer primary key autoincrement,name text not null,price double)", "创建表");
                },
                //删除表
                dropTable: function() {
                    dbApp.exeSql("drop table IF EXISTS goods", "删除表");
                },
                //展示,加载数据
                select: function() {
                    dbApp.exeSql("select id,name,price from goods", "查询", [], function(result) {
                        //将表格中tr索引大于0的元素删除
                        $("#tabGoods tr:gt(0)").remove();
                        for(var i = 0; i < result.rows.length; i++) {
                            var tr = $("<tr/>");

                            $("<td/>").text(result.rows.item(i)["id"]).appendTo(tr);
                            $("<td/>").text(result.rows.item(i)["name"]).appendTo(tr);
                            $("<td/>").text(result.rows.item(i)["price"]).appendTo(tr);
                            var del = $("<a href='#' onclick='dbApp.del(" + result.rows.item(i)["id"] + ",this)' >删除</a> ")
                            var edit = $("<a href='#' onclick='dbApp.edit(" + result.rows.item(i)["id"] + ",this)' >修改</a>")
                            $("<td/>").append(del).append(edit).appendTo(tr);
                            tr.appendTo("#tabGoods");
                        }
                    });
                },
                //插入数据
                insert: function() {
                    //如果insert方法被绑定为事件,则this表示事件发生的对象
                    dbApp.exeSql("insert into goods(name,price) values(?,?)", "添加", [$("#name").val(), $("#price").val()], function() {
                        dbApp.select();
                    });
                },
                //删除 
                del: function(id, link) {
                    dbApp.exeSql("delete from goods where id=?", "删除", [id], function(result) {
                        //查找a标签最近的一个tr父元素,移除
                        $(link).closest("tr").remove();
                    });
                },
                //编辑
                edit: function(id) {
                    dbApp.exeSql("select id,name,price from goods where id=?", "编辑", [id], function(result) {
                        $("#name").val(result.rows.item(0)["name"]);
                        $("#price").val(result.rows.item(0)["price"]);
                        $("#goodsId").val(result.rows.item(0)["id"]);
                        dbApp.log("修改后请保存");
                    });
                },
                //更新
                update: function() {
                    if($("#goodsId").val()) {
                        dbApp.exeSql("update goods set name=?,price=?  where id=?", "更新", [$("#name").val(), $("#price").val(), $("#goodsId").val()], function(result) {
                            dbApp.select();
                            $("#goodsId").val("");
                        });
                    } else {
                        dbApp.log("请选择要更新的记录 ");
                    }
                }
            };

            dbApp.init();
        </script>
    </body>

</html>

运营结果:

366net必赢亚洲手机版 32

五、IndexedDB

Web Sql
API的重要达成者是Chrome、Safari、Opera、Android、IOS、BB。IE和FF都不帮助Web
Sql API。

IndexedDB由于受到W3C的尊重。浏览器厂商的兑现动静要好有的。但由于方今正规表达书还只是居于候选建议阶段。各大浏览器厂商方今的达成还有一部分差距化。

IndexedDB是在浏览器中保留结构化数据的一种数据库,为了替换WebSQL(标准已扬弃,但被普遍援救)而产出。IndexedDB使用NoSQL的款型来操作数据库,保存和读取是JavaScript对象,同时还辅协助调查询及寻找。

API: https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API

以身作则代码:

366net必赢亚洲手机版 33366net必赢亚洲手机版 34

if('indexedDB' in window){
    //检测是否支持indexed database
}else{
    mui.alert('您的手机占不支持');
}
//数据库信息
var DB = {
    name:'admin_users',
    version:1
}
var db;
function openDB(name,version){
    //第一个参数是数据库名称,如果存在则打开,如果不存在就创建
    //第二个参数是数据库版本,用于更新数据库结构
    var request = window.indexedDB.open(name,version);

        request.onerror = function(e){
            mui.alert('打开数据库失败');
        }

        request.onsuccess = function(e){
            db = request.result;
            ReadAll();
        }
        //操作数据库(创建删除修改)
        //首次打开数据库或改变数据库版本的时候触发
        request.onupgradeneeded = function(e){
            //使用createObjectStore()方法创建一个对象存储
            //此方法接受两个参数:存储的名称和参数对象
            //keypath是用户数据的唯一标识 或者使用索引
            var objectStore = e.target.result.createObjectStore("users",{keyPath:'name'});
        }
}

function Add(name,account,password){
    //transaction()方法是用来指定我们想要进行事务处理的对象存储,接受3个参数
    //第一个(必选)要处理的对象存储的列表数组
    //第二个(可选)指定操作方式 只读/读写
    //第三个(可选)版本变化
    //add()方法用于添加数据
    var request = db.transaction(["users"],"readwrite").objectStore("users").add({
        name:name,
        account:account,
        password:password
    });

    request.onsuccess = function(e){
        mui.toast('成功');
        var list = document.querySelector('#list');
        var dom = '<li class="mui-table-view-cell mui-collapse">';
                    dom+= '<a class="mui-navigate-right" href="#">'+name+'</a>';
                    dom+= '<div class="mui-collapse-content"><p>账号:'+account+'</p>';
                    dom+= '<p>密码:'+password+'</p></div></li>';
            list.innerHTML += dom;
    }

    request.onerror = function(e){
        mui.toast('失败');
    }
}

function Read(name){
    var objectStore = db.transaction(["users"]).objectStore("users");
    //get()方法用于获取数据
    var request = objectStore.get(name);

        request.onerror = function(event){
            mui.toast('读取失败');
        }

        request.onsuccess = function(event){
            if(request.result){
                console.log(request.result);
            }
        }
}

function ReadAll(){
    var objectStore = db.transaction("users").objectStore("users");
    //openCursor()方法用于获取所有数据
    var request = objectStore.openCursor();

        request.onsuccess = function(event){
            //db.close();
            var res = event.target.result;
            var list = document.querySelector('#list');
            if(res){
                var dom = '<li class="mui-table-view-cell mui-collapse">';
                    dom+= '<a class="mui-navigate-right" href="#">'+res.value.name+'</a>';
                    dom+= '<div class="mui-collapse-content"><p>账号:'+res.value.account+'</p>';
                    dom+= '<p>密码:'+res.value.password+'</p></div></li>';

                list.innerHTML += dom;
                //console.log(res.value);
                res.continue();
            }
        }

        request.onerror = function(e){
            mui.toast('读取失败')
        }
}

function Remove(name){
    //delete()方法用于删除数据
    var request = db.transaction("users","readwrite").objectStore('users').delete(name);
        request.onsuccess = function(event){
            mui.toast('删除成功');
        }
        request.onerror = function(){
            mui.toast('删除失败')
        }
}
openDB(DB.name,DB.version);


var submits = document.querySelector('#submit');
function display(dis){
    var bg = document.querySelectorAll('.alert-bg')[0];
    var alert = document.querySelectorAll('.alert')[0];
    alert.style.display = dis;
    bg.style.display = dis;
}
submits.onclick = function(){
    var name      = document.querySelector('#name').value;
    var account  = document.querySelector('#account').value;
    var password = document.querySelector('#password').value;
    if(!name || !account || !password){
        return mui.toast('请输入完整信息');
    }
    display('none');
    Add(name,account,password)
}

View Code

5.一 、数据库开端化

IndexedDB保存的是指标,而不是使用表保存数据。打开数据库使用indexDB.open方法,那措施有七个参数,第1个是数据库名称,第二个是数量版本号。

IndexedDB的操作完全是异步进行的,每一次IndexedDB操作,都急需注册onerror或onsuccess事件处理程序。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>IndexedDB</title>
    </head>

    <body>
        <h2>IndexedDB(NOSQL)</h2>
        <input value="创建数据库与表" type="button" onclick="create()" />
        <h2 id="msg"></h2>
        <script>
            //数据库
            var db;

            //创建数据库与表
            function create() {
                //创建一个名称为gomall且版本为2的数据库,返回一个请求
                var request = indexedDB.open("gomall", 2);
                //绑定回调事件,成功时
                request.onsuccess = function(e) {
                    db = e.target.result;
                    log('创建数据库成功');
                };
                //失败时
                request.onerror = function(e) {
                    log("错误:" + e.target.errorCode || e.target.error);
                };
                //增加数据库版本号时,会触发onupgradeneeded事件(会在onsuccess之前被调用)
                request.onupgradeneeded = function(e) {
                    //创建对象存储空间(ObjectStore),类似表,goods是表名,id是主键,存储的是JSON
                    e.target.result.createObjectStore("goods",{"keyPath":"id"});
                    log("初始化数据库成功!");
                };
            }

            //显示消息
            var msg = document.getElementById("msg");

            function log(m) {
                msg.innerHTML += m + "<br/>";
            }

            //用于判断浏览器是否支持indexedDB,0,null,'',undefind false
            if(window.indexedDB) {

            } else {
                alert('请升级浏览器,如chrome');
            }
        </script>
    </body>

</html>

此地要小心的是,数据库版本只会有流行贰个,不会同时设有四个本子的同名数据库。

运维结果:

366net必赢亚洲手机版 35

5.② 、对象存款和储蓄空间(ObjectStore)

指标存款和储蓄空间(ObjectStore)可以设想成关周密据库的表,在起首化DB触发onupgradeneeded时,创设ObjectStore。使用createObjectStore方法,第①个参数是指标名,第三个参数是目的属性,一般是安装keyPath(作为键使用)。

因为对新数据的操作都亟待在transaction中开始展览,而transaction又供给内定object
store,所以大家不得不在创建数据库的时候开始化object
store以供前边使用,那多亏onupgradeneeded的八个注重效能

有了数据库后大家本来希望创设1个表用来储存数据,但indexedDB中并未表的概念,而是objectStore,二个数据库中能够涵盖多少个objectStore,objectStore是三个灵活的数据结构,能够存放几连串型数据。也正是说三个objectStore也正是一张表,里面储存的每条数据和四个键相关联。

大家得以应用每条记下中的有些钦命字段作为键值(keyPath),也足以选用自动生成的一日千里数字作为键值(keyGenerator),也可以不点名。采取键的品种分裂,objectStore可以储存的数据结构也有出入

不行使—>任意值,不过没添加一条数据的时候须要钦命键参数

keyPath—>Javascript对象,对象必须有一属性作为键值

keyGenerator—>任意值(db.createObjectStore(‘students’,{autoIncrement:
true});)

都选择—>Javascript对象,如若目的中有keyPath内定的品质则不生成新的键值,假诺没有自动生成递增键值,填充keyPath钦点属性

     req.onupgradeneeded = function (evt) {
          console.debug("initDb.onupgradeneeded");
          var db = evt.currentTarget.result;
          //ObjectStore必须在onupgradeneeded里创建,其他地方将会创建失败
          var usersStore = db.createObjectStore("users", { keyPath : "id" });
     };

功效如下:

366net必赢亚洲手机版 36

366net必赢亚洲手机版 37.png)

5.3、事务

享有读取或涂改数据的操作,都要通过工作来达成。成立工作使用transaction方法,第三个参数是急需拜访的ObjectStore,首个参数是造访格局(readwrite可读可写、readonly只读,暗中认可是只读)。

5.4、添加多少

示例:

366net必赢亚洲手机版 38366net必赢亚洲手机版 39

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>IndexedDB</title>
    </head>

    <body>
        <h2>IndexedDB(NOSQL)</h2>
        <input value="创建数据库与表" type="button" onclick="create()" />
        <input value="新增数据" type="button" onclick="add()" />
        <h2 id="msg"></h2>
        <script>
            //数据库
            var db;

            //创建数据库与表
            function create() {
                //创建一个名称为gomall且版本为2的数据库,返回一个请求
                var request = indexedDB.open("gomall", 2);
                //绑定回调事件,成功时
                request.onsuccess = function(e) {
                    db = e.target.result;
                    log('创建数据库成功');
                };
                //失败时
                request.onerror = function(e) {
                    log("错误:" + e.target.errorCode || e.target.error);
                };
                //增加数据库版本号时,会触发onupgradeneeded事件(会在onsuccess之前被调用)
                request.onupgradeneeded = function(e) {
                    //创建对象存储空间(ObjectStore),类似表,goods是表名,id是主键,存储的是JSON
                    e.target.result.createObjectStore("goods",{"keyPath":"id"});
                    log("初始化数据库成功!");
                };
            }

            //新增数据
            function add(){
                //创建事务对象
                var tx=db.transaction("goods","readwrite");
                //从数据库中获得存储对象,表
                var goods=tx.objectStore("goods");
                //javascript中的对象数组
                var items=[{"id":1,"name":"iPhone 11","price":19999.5},{"id":2,"name":"华为荣耀V9","price":1997.3}];
                for(var i=0;i<items.length;i++){
                    goods.add(items[i]);
                }
                log("添加数据成功!");
            }

            //显示消息
            var msg = document.getElementById("msg");

            function log(m) {
                msg.innerHTML += m + "<br/>";
            }

            //用于判断浏览器是否支持indexedDB,0,null,'',undefind false
            if(window.indexedDB) {

            } else {
                alert('请升级浏览器,如chrome');
            }
        </script>
    </body>

</html>

View Code 

 结果:

366net必赢亚洲手机版 40

5.伍 、获取单个对象数据

示例:

366net必赢亚洲手机版 41366net必赢亚洲手机版 42

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>IndexedDB</title>
    </head>

    <body>
        <h2>IndexedDB(NOSQL)</h2>
        <input value="创建数据库与表" type="button" onclick="create()" />
        <input value="新增数据" type="button" onclick="add()" />
        <input value="获得单个对象" type="button" onclick="getSingle()" />
        <h2 id="msg"></h2>
        <script>
            //数据库
            var db;

            //创建数据库与表
            function create() {
                //创建一个名称为gomall且版本为2的数据库,返回一个请求
                var request = indexedDB.open("gomall", 2);
                //绑定回调事件,成功时
                request.onsuccess = function(e) {
                    db = e.target.result;
                    log('创建数据库成功');
                };
                //失败时
                request.onerror = function(e) {
                    log("错误:" + e.target.errorCode || e.target.error);
                };
                //增加数据库版本号时,会触发onupgradeneeded事件(会在onsuccess之前被调用)
                request.onupgradeneeded = function(e) {
                    //创建对象存储空间(ObjectStore),类似表,goods是表名,id是主键,存储的是JSON
                    e.target.result.createObjectStore("goods", {
                        "keyPath": "id"
                    });
                    log("初始化数据库成功!");
                };
            }

            //新增数据
            function add() {
                //创建事务对象
                var tx = db.transaction("goods", "readwrite");
                //从数据库中获得存储对象,表
                var goods = tx.objectStore("goods");
                //javascript中的对象数组
                var items = [{
                    "id": 1,
                    "name": "iPhone 11",
                    "price": 19999.5
                }, {
                    "id": 2,
                    "name": "华为荣耀V9",
                    "price": 1997.3
                }];
                for(var i = 0; i < items.length; i++) {
                    goods.add(items[i]);
                }
                log("添加数据成功!");
            }

            //获得单个对象
            function getSingle() {
                //创建事务对象
                var tx = db.transaction("goods", "readwrite");
                //从数据库中获得存储对象,表
                var goods = tx.objectStore("goods");
                //请求key为1的对象
                var request=goods.get(1);
                request.onsuccess=function(e){
                    var obj=e.target.result;
                    //JSON.stringify将obj对象转换成字符
                    log(JSON.stringify(obj));
                    log(obj.id+","+obj.name+","+obj.price);
                };
            }

            //显示消息
            var msg = document.getElementById("msg");

            function log(m) {
                msg.innerHTML += m + "<br/>";
            }

            //用于判断浏览器是否支持indexedDB,0,null,'',undefind false
            if(window.indexedDB) {

            } else {
                alert('请升级浏览器,如chrome');
            }
        </script>
    </body>

</html>

View Code

结果:

366net必赢亚洲手机版 43

5.⑥ 、修改数据

示例:

366net必赢亚洲手机版 44366net必赢亚洲手机版 45

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>IndexedDB</title>
    </head>

    <body>
        <h2>IndexedDB(NOSQL)</h2>
        <input value="创建数据库与表" type="button" onclick="create()" />
        <input value="新增数据" type="button" onclick="add()" />
        <input value="获得单个对象" type="button" onclick="getSingle()" />
        <input value="更新对象" type="button" onclick="edit()" />
        <h2 id="msg"></h2>
        <script>
            //数据库
            var db;

            //创建数据库与表
            function create() {
                //创建一个名称为gomall且版本为2的数据库,返回一个请求
                var request = indexedDB.open("gomall", 2);
                //绑定回调事件,成功时
                request.onsuccess = function(e) {
                    db = e.target.result;
                    log('创建数据库成功');
                };
                //失败时
                request.onerror = function(e) {
                    log("错误:" + e.target.errorCode || e.target.error);
                };
                //增加数据库版本号时,会触发onupgradeneeded事件(会在onsuccess之前被调用)
                request.onupgradeneeded = function(e) {
                    //创建对象存储空间(ObjectStore),类似表,goods是表名,id是主键,存储的是JSON
                    e.target.result.createObjectStore("goods", {
                        "keyPath": "id"
                    });
                    log("初始化数据库成功!");
                };
            }

            //新增数据
            function add() {
                //创建事务对象
                var tx = db.transaction("goods", "readwrite");
                //从数据库中获得存储对象,表
                var goods = tx.objectStore("goods");
                //javascript中的对象数组
                var items = [{
                    "id": 1,
                    "name": "iPhone 11",
                    "price": 19999.5
                }, {
                    "id": 2,
                    "name": "华为荣耀V9",
                    "price": 1997.3
                }];
                for(var i = 0; i < items.length; i++) {
                    goods.add(items[i]);
                }
                log("添加数据成功!");
            }

            //获得单个对象
            function getSingle() {
                //创建事务对象
                var tx = db.transaction("goods", "readwrite");
                //从数据库中获得存储对象,表
                var goods = tx.objectStore("goods");
                //请求key为1的对象
                var request = goods.get(2);
                request.onsuccess = function(e) {
                    var obj = e.target.result;
                    //JSON.stringify将obj对象转换成字符
                    log(JSON.stringify(obj));
                    log(obj.id + "," + obj.name + "," + obj.price);
                };
            }

            //更新对象
            function edit() {
                //创建事务对象
                var tx = db.transaction("goods", "readwrite");
                //从数据库中获得存储对象,表
                var goods = tx.objectStore("goods");
                //javascript中的对象数组
                var item = {
                    "id": 2,
                    "name": "华为荣耀P15",
                    "price":1357.9,
                    "os":"android"
                };
                //执行更新
                var request=goods.put(item);
                request.onsuccess=function(e){
                    log(e.target.result);
                };
            }

            //显示消息
            var msg = document.getElementById("msg");

            function log(m) {
                msg.innerHTML += m + "<br/>";
            }

            //用于判断浏览器是否支持indexedDB,0,null,'',undefind false
            if(window.indexedDB) {

            } else {
                alert('请升级浏览器,如chrome');
            }
        </script>
    </body>

</html>

View Code

结果:

366net必赢亚洲手机版 46

5.七 、删除数据

示例:

366net必赢亚洲手机版 47366net必赢亚洲手机版 48

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>IndexedDB</title>
    </head>

    <body>
        <h2>IndexedDB(NOSQL)</h2>
        <input value="创建数据库与表" type="button" onclick="create()" />
        <input value="新增数据" type="button" onclick="add()" />
        <input value="获得单个对象" type="button" onclick="getSingle()" />
        <input value="更新对象" type="button" onclick="edit()" />
        <input value="删除对象" type="button" onclick="del()" />
        <h2 id="msg"></h2>
        <script>
            //数据库
            var db;

            //创建数据库与表
            function create() {
                //创建一个名称为gomall且版本为2的数据库,返回一个请求
                var request = indexedDB.open("gomall", 2);
                //绑定回调事件,成功时
                request.onsuccess = function(e) {
                    db = e.target.result;
                    log('创建数据库成功');
                };
                //失败时
                request.onerror = function(e) {
                    log("错误:" + e.target.errorCode || e.target.error);
                };
                //增加数据库版本号时,会触发onupgradeneeded事件(会在onsuccess之前被调用)
                request.onupgradeneeded = function(e) {
                    //创建对象存储空间(ObjectStore),类似表,goods是表名,id是主键,存储的是JSON
                    e.target.result.createObjectStore("goods", {
                        "keyPath": "id"
                    });
                    log("初始化数据库成功!");
                };
            }

            //新增数据
            function add() {
                //创建事务对象
                var tx = db.transaction("goods", "readwrite");
                //从数据库中获得存储对象,表
                var goods = tx.objectStore("goods");
                //javascript中的对象数组
                var items = [{
                    "id": 1,
                    "name": "iPhone 11",
                    "price": 19999.5
                }, {
                    "id": 2,
                    "name": "华为荣耀V9",
                    "price": 1997.3
                }];
                for(var i = 0; i < items.length; i++) {
                    goods.add(items[i]);
                }
                log("添加数据成功!");
            }

            //获得单个对象
            function getSingle() {
                //创建事务对象
                var tx = db.transaction("goods", "readwrite");
                //从数据库中获得存储对象,表
                var goods = tx.objectStore("goods");
                //请求key为1的对象
                var request = goods.get(2);
                request.onsuccess = function(e) {
                    var obj = e.target.result;
                    //JSON.stringify将obj对象转换成字符
                    log(JSON.stringify(obj));
                    log(obj.id + "," + obj.name + "," + obj.price);
                };
            }

            //更新对象
            function edit() {
                //创建事务对象
                var tx = db.transaction("goods", "readwrite");
                //从数据库中获得存储对象,表
                var goods = tx.objectStore("goods");
                //javascript中的对象数组
                var item = {
                    "id": 2,
                    "name": "华为荣耀P15",
                    "price":1357.9,
                    "os":"android"
                };
                //执行更新
                var request=goods.put(item);
                request.onsuccess=function(e){
                    log(e.target.result);
                };
            }

            //删除对象
            function del() {
                //创建事务对象
                var tx = db.transaction("goods", "readwrite");
                //从数据库中获得存储对象,表
                var goods = tx.objectStore("goods");
                //执行删除操作
                var request=goods.delete(2);
                //成功时的回调
                request.onsuccess=function(e){
                    log(e.target.result);
                };
            }

            //显示消息
            var msg = document.getElementById("msg");

            function log(m) {
                msg.innerHTML += m + "<br/>";
            }

            //用于判断浏览器是否支持indexedDB,0,null,'',undefind false
            if(window.indexedDB) {

            } else {
                alert('请升级浏览器,如chrome');
            }
        </script>
    </body>

</html>

View Code

 

结果:

366net必赢亚洲手机版 49

5.捌 、清空数据

function clearData(){
     var tx = db.transaction("users", READ_WRITE);
     var store = tx.objectStore("users");
     var req = store.clear();
     req.onsuccess = function (evt) {
          console.debug("clearData success");
     };
     req.onerror = function (evt) {
          console.error("clearData error:", evt.target.errorCode || evt.target.error);
     };
}

5.九 、游标查询

利用工作能够平昔通过键摸索单个对象,而急需摸索五个对象时候就要求动用游标。游标是指向结果集的指针,不提前收集结果。游标指针会先指向结果中的第二项,在接到查找下一项命令时,才会针对下一项。

function openCursor(){
     var tx = db.transaction("users", READ_WRITE);
     var store = tx.objectStore("users");
     var req = store.openCursor();
     req.onsuccess = function (evt) {
          var cursor = evt.target.result;
          if(cursor){ //必要检查
               var value = cursor.value;
               console.log(value);
               if(value.name == '杨幂'){
                    value.age = 16;
                    cursor.update(value); //修改数据(必须是读写模式)
               }
               if(value.name == '柳岩'){
                    cursor.delete();  //删除当前项
               }
               cursor.continue(); //移动到下一项
          }
     };
     req.onerror = function (evt) {
          console.error("openCursor error:", evt.target.errorCode || evt.target.error);
     };
}

此间有几点要留心:

  1. 假定急需修改或删除数据,就须要打开成读写形式。

  2. cursor的非空校验是不可或缺的。

  3. 修改或删除的操作也是有onsuccess和onerror的,只是在示范中没有写出来。

  4. 调用continue才会移动到下一项

除此以外能够安装游标的键范围和游标的大方向,即打开openCursor方法时得以传这三个参数(openCursor(键范围,方向)),第1个参数是object类型,第②个参数是字符串类型。

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>IndexedDB</title>
    </head>

    <body>
        <h2>IndexedDB(NOSQL)</h2>
        <input value="创建数据库与表" type="button" onclick="create()" />
        <input value="新增数据" type="button" onclick="add()" />
        <input value="获得单个对象" type="button" onclick="getSingle()" />
        <input value="更新对象" type="button" onclick="edit()" />
        <input value="删除对象" type="button" onclick="del()" />
        <input value="获得多个对象(游标)" type="button" onclick="getAll()" />
        <h2 id="msg"></h2>
        <script>
            //数据库
            var db;

            //创建数据库与表
            function create() {
                //创建一个名称为gomall且版本为2的数据库,返回一个请求
                var request = indexedDB.open("gomall", 2);
                //绑定回调事件,成功时
                request.onsuccess = function(e) {
                    db = e.target.result;
                    log('创建数据库成功');
                };
                //失败时
                request.onerror = function(e) {
                    log("错误:" + e.target.errorCode || e.target.error);
                };
                //增加数据库版本号时,会触发onupgradeneeded事件(会在onsuccess之前被调用)
                request.onupgradeneeded = function(e) {
                    //创建对象存储空间(ObjectStore),类似表,goods是表名,id是主键,存储的是JSON
                    e.target.result.createObjectStore("goods", {
                        "keyPath": "id"
                    });
                    log("初始化数据库成功!");
                };
            }

            //新增数据
            function add() {
                //创建事务对象
                var tx = db.transaction("goods", "readwrite");
                //从数据库中获得存储对象,表
                var goods = tx.objectStore("goods");
                //javascript中的对象数组
                var items = [{
                    "id": 2,
                    "name": "iPhone 13",
                    "price": 19999.5
                }, {
                    "id": 3,
                    "name": "华为荣耀V10",
                    "price": 1997.3
                }];
                for(var i = 0; i < items.length; i++) {
                    goods.add(items[i]);
                }
                log("添加数据成功!");
            }

            //获得单个对象
            function getSingle() {
                //创建事务对象
                var tx = db.transaction("goods", "readwrite");
                //从数据库中获得存储对象,表
                var goods = tx.objectStore("goods");
                //请求key为1的对象
                var request = goods.get(2);
                request.onsuccess = function(e) {
                    var obj = e.target.result;
                    //JSON.stringify将obj对象转换成字符
                    log(JSON.stringify(obj));
                    log(obj.id + "," + obj.name + "," + obj.price);
                };
            }

            //更新对象
            function edit() {
                //创建事务对象
                var tx = db.transaction("goods", "readwrite");
                //从数据库中获得存储对象,表
                var goods = tx.objectStore("goods");
                //javascript中的对象数组
                var item = {
                    "id": 2,
                    "name": "华为荣耀P15",
                    "price": 1357.9,
                    "os": "android"
                };
                //执行更新
                var request = goods.put(item);
                request.onsuccess = function(e) {
                    log(e.target.result);
                };
            }

            //删除对象
            function del() {
                //创建事务对象
                var tx = db.transaction("goods", "readwrite");
                //从数据库中获得存储对象,表
                var goods = tx.objectStore("goods");
                //执行删除操作
                var request = goods.delete(2);
                //成功时的回调
                request.onsuccess = function(e) {
                    log(e.target.result);
                };
            }

            //获得多个对象(游标)
            function getAll() {
                //创建事务对象
                var tx = db.transaction("goods", "readwrite");
                //从数据库中获得存储对象,表
                var goods = tx.objectStore("goods");
                //打开游标
                var request = goods.openCursor();
                //成功时的回调
                request.onsuccess = function(e) {
                    //获得游标
                    var cursor = e.target.result;
                    if(cursor) { //如果不为空
                        var obj = cursor.value;
                        log(JSON.stringify(obj));
                        //下移
                        cursor.continue();
                    }
                };
            }

            //显示消息
            var msg = document.getElementById("msg");

            function log(m) {
                msg.innerHTML += m + "<br/>";
            }

            //用于判断浏览器是否支持indexedDB,0,null,'',undefind false
            if(window.indexedDB) {

            } else {
                alert('请升级浏览器,如chrome');
            }
        </script>
    </body>

</html>

 

结果:

366net必赢亚洲手机版 50

 

5.⑩ 、游标键范围

键范围由IDBKeyRange的实例表示。

366net必赢亚洲手机版 51

IDBKeyRange.only('001');  //只想要键为001的结果
IDBKeyRange.lowerBound('002'); //从键为002开始,到最后
IDBKeyRange.lowerBound('002', true); //从键为002开始,但忽略002,到最后
IDBKeyRange.upperBound('002'); //从头开始,到键为002为止
IDBKeyRange.upperBound('002', true); //从头开始,到键为002为止,但忽略002
IDBKeyRange.bound('001', '005'); //从001开始,到为005为止
IDBKeyRange.bound('001', '005', true, true); //从001开始,到为005为止,但忽略001、005

366net必赢亚洲手机版 52

5.1壹 、游标方向

next : 从第1项到最后一项(私下认可)

prev : 从最终一项到第1项

索引

当必要选取别的属性(非主键)获取数据时,就要优先创立索引,然后使用索引获取数据。

始建索引(在数据库开首化onupgradeneeded事件时)

先是个参数是索引名字,第三个参数是索引的品质的名字,第陆个是3个options对象。一般是钦命unique,设置索引是还是不是唯一。

usersStore.createIndex("name", "name", { unique : false });

目录获取数据

366net必赢亚洲手机版 53

function indexGetData(){
     var tx = db.transaction("users", READ_WRITE);
     var store = tx.objectStore("users");
     var index = store.index("name");
     var req = index.get("杨幂")
     req.onsuccess = function (evt) {
          console.debug("indexGet success" , evt.target.result);
     };
     req.onerror = function (evt) {
          console.error("indexGet error:", evt.target.errorCode || evt.target.error);
     };
}

function indexOpenCursor(){
     var tx = db.transaction("users", READ_WRITE);
     var store = tx.objectStore("users");
     var index = store.index("name");
     var req = index.openCursor();
     req.onsuccess = function (evt) {
          var cursor = evt.target.result;
          if(cursor){ //必要检查
               var value = cursor.value;
               console.log(value);
               cursor.continue(); //移动到下一项
          }
     };
     req.onerror = function (evt) {
          console.error("openCursor error:", evt.target.errorCode || evt.target.error);
     };
}

366net必赢亚洲手机版 54

PS:索引用法跟普通取值和游标取值一样

指标存款和储蓄全数索引

366net必赢亚洲手机版 55

function indexNames(){
     var tx = db.transaction("users", READ_WRITE);
    var store = tx.objectStore("users");
     var indexNames = store.indexNames;
     var index, i = 0, len = indexNames.length;
     while(i < len){
          index = store.index(indexNames[i++]);
          console.log(index);
     }
}

366net必赢亚洲手机版 56

5.1贰 、删除数据库

var request = indexedDB.deleteDatabase(name);
var request = indexedDB.deleteDatabase(name, options);

var DBDeleteRequest = window.indexedDB.deleteDatabase("toDoList");

DBDeleteRequest.onerror = function(event) {
  console.log("Error deleting database.");
};

DBDeleteRequest.onsuccess = function(event) {
  console.log("Database deleted successfully");

  console.log(event.result); // should be undefined
};

5.1③ 、删除存款和储蓄对象

366net必赢亚洲手机版,dbInstance.deleteObjectStore(name);

var dbName = "sampleDB";
var dbVersion = 2;
var request = indexedDB.open(dbName, dbVersion);

request.onupgradeneeded = function(e) {
  var db = request.result;
  if (e.oldVersion < 1) {
    db.createObjectStore("store1");
  }

  if (e.oldVersion < 2) {
    db.deleteObjectStore("store1");
    db.createObjectStore("store2");
  }

  // etc. for version < 3, 4...
};

⑥ 、移动端打包与运作

6.① 、在二哥伦比亚大学端直接待上访问Web站点

将手提式有线电话机与总结机再而三到同叁个网段,比如能够动用wifi

查看本机ip地址,有时须求将本地连接禁止使用,查看ip地址的吩咐是ipconfig

在手提式有线电话机端使用浏览器查看结果如下:

366net必赢亚洲手机版 57

6.2、打包成app安装运营

此间运用HBuilder打包成apk的安装包,安装打包结果如下:

366net必赢亚洲手机版 58

366net必赢亚洲手机版 59

6.③ 、套用移动端UI框架MUI

官网: http://www.dcloud.io/

文档: http://dev.dcloud.net.cn/mui/ui/

源码: https://github.com/dcloudio/mui/

6.3.1、Hello MUI

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Hello MUI</title>
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">Hello MUI</h1>
        </header>

        <div class="mui-content">
            <div class="mui-content-padded">
                <button type="button" class="mui-btn">默认</button>
                <button type="button" class="mui-btn mui-btn-primary" id="btnHello">Hello</button>
                <button type="button" class="mui-btn mui-btn-success">绿色</button>
                <button type="button" class="mui-btn mui-btn-warning">黄色</button>
                <button type="button" class="mui-btn mui-btn-danger">红色</button>
                <button type="button" class="mui-btn mui-btn-royal">紫色</button>
            </div>
        </div>

        <script src="js/mui.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            mui.init({
            });

            document.getElementById("btnHello").addEventListener("tap",function(){
                mui.alert("Hello MUI!","提示","确认",function(){
                    mui.toast("关闭完成");
                });
            },false);
        </script>
    </body>

</html>

效果:

366net必赢亚洲手机版 60

6.3.② 、事件与转场

代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Hello MUI</title>
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">Hello MUI</h1>
        </header>

        <div class="mui-content">
            <div class="mui-content-padded">
                <button type="button" class="mui-btn">默认</button>
                <button type="button" class="mui-btn mui-btn-primary" id="btnHello">Hello</button>
                <button type="button" class="mui-btn mui-btn-success" id="btnWin">窗口</button>
                <button type="button" class="mui-btn mui-btn-warning">黄色</button>
                <button type="button" class="mui-btn mui-btn-danger">红色</button>
                <button type="button" class="mui-btn mui-btn-royal">紫色</button>
            </div>
        </div>

        <script src="js/mui.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            mui.init({
                //侧滑关闭
                swipeBack: true //Boolean(默认false)启用右滑关闭功能
            });

            document.getElementById("btnHello").addEventListener("tap", function() {
                mui.alert("Hello MUI!", "提示", "确认", function() {
                    mui.toast("关闭完成");
                });
            }, false);

            //mui加载完成
            mui.ready(function() {
                mui(".mui-content").on("tap", "#btnWin", function() {

                    mui.openWindow({
                        url: "sub1.html?id=1",
                        id: "sub1.html",
                        extras: {
                            id: "1"
                        },
                        createNew: false, //是否重复创建同样id的webview,默认为false:不重复创建,直接显示
                        show: {
                            autoShow: true //页面loaded事件发生后自动显示,默认为true
                        },
                        waiting: {
                            autoShow: true, //自动显示等待框,默认为true
                            title: '正在加载...' //等待对话框上显示的提示内容
                        }
                    });

                });
            });
        </script>
    </body>

</html>

效果:

366net必赢亚洲手机版 61

6.3.三 、列表与选项卡

示例:

366net必赢亚洲手机版 62366net必赢亚洲手机版 63

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Hello List</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!--标准mui.css-->
        <link rel="stylesheet" href="css/mui.min.css">
        <style>
            .title {
                margin: 20px 15px 10px;
                color: #6d6d72;
                font-size: 15px;
            }

            .oa-contact-cell.mui-table .mui-table-cell {
                padding: 11px 0;
                vertical-align: middle;
            }

            .oa-contact-cell {
                position: relative;
                margin: -11px 0;
            }

            .oa-contact-avatar {
                width: 75px;
            }

            .oa-contact-avatar img {
                border-radius: 50%;
            }

            .oa-contact-content {
                width: 100%;
            }

            .oa-contact-name {
                margin-right: 20px;
            }

            .oa-contact-name,
            oa-contact-position {
                float: left;
            }
        </style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">用户列表</h1>
        </header>
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" href="#tabbar">

                首页
            </a>
            <a class="mui-tab-item" href="#tabbar-with-chat">
                9
                添加
            </a>
            <a class="mui-tab-item" href="#tabbar-with-contact">

                我的
            </a>
            <a class="mui-tab-item" href="#tabbar-with-map">

                设置
            </a>
        </nav>
        <div class="mui-content">
            <div id="slider" class="mui-slider">
                <div class="mui-slider-group mui-slider-loop">
                    <!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="images/yuantiao.jpg">
                        </a>
                    </div>
                    <!-- 第一张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="images/shuijiao.jpg">
                        </a>
                    </div>
                    <!-- 第二张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="images/muwu.jpg">
                        </a>
                    </div>
                    <!-- 第三张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="images/cbd.jpg">
                        </a>
                    </div>
                    <!-- 第四张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="images/yuantiao.jpg">
                        </a>
                    </div>
                    <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="images/shuijiao.jpg">
                        </a>
                    </div>
                </div>
                <div class="mui-slider-indicator">
                    <div class="mui-indicator mui-active"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                </div>
                <!--轮播-->

                <!--list-->
                <ul class="mui-table-view mui-table-view-chevron">
                    <li class="mui-table-view-cell mui-media">
                        <a class="mui-navigate-right" id="sub1.html">
                            <img class="mui-media-object mui-pull-left" src="images/cbd.jpg">
                            <div class="mui-media-body">
                                CBD
                                <p class='mui-ellipsis'>烤炉模式的城,到黄昏,如同打翻的调色盘一般.</p>
                            </div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media">
                        <a class='mui-navigate-right' id="index.html">
                            <img class="mui-media-object mui-pull-left" src="images/yuantiao.jpg">
                            <div class="mui-media-body">
                                远眺
                                <p class='mui-ellipsis'>静静的看这个世界,最后终于疯了</p>
                            </div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media">
                        <a class="mui-navigate-right">
                            <img class="mui-media-object mui-pull-left" src="images/shuijiao.jpg">
                            <div class="mui-media-body">
                                幸福
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
                            </div>
                        </a>
                    </li>
                </ul>
                <!--list-->
            </div>
            <div id="tabbar-with-chat" class="mui-control-content">
                添加
            </div>
            <div id="tabbar-with-contact" class="mui-control-content">
                我的
            </div>
            <div id="tabbar-with-map" class="mui-control-content">
                设置
            </div>
        </div>
    </body>
    <script src="js/mui.min.js"></script>
    <script>
        mui.init({
            swipeBack: true //启用右滑关闭功能
        });

        mui("#slider").slider({
            interval: 1000
        });

        mui.ready(function() {

            mui(".mui-content").on("tap", ".mui-navigate-right", function() {
                var id =this.id;
                mui.openWindow({
                    url: id,
                    id: id,
                    extras: {
                        id: "1"
                    },
                    createNew: false, //是否重复创建同样id的webview,默认为false:不重复创建,直接显示
                    show: {
                        autoShow: true //页面loaded事件发生后自动显示,默认为true
                    },
                    waiting: {
                        autoShow: true, //自动显示等待框,默认为true
                        title: '正在加载...' //等待对话框上显示的提示内容
                    }
                });

            });

        });
    </script>

</html>

View Code

 

效果:

366net必赢亚洲手机版 64

那边运用HBuilder内置的MUI为例,新增d06.html,页面脚本如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>淘水果</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!--标准mui.css-->
        <link rel="stylesheet" href="css/mui.min.css">
        <!--App自定义的css-->
        <link rel="stylesheet" type="text/css" href="css/app.css" />
        <style>
            .title {
                margin: 20px 15px 10px;
                color: #6d6d72;
                font-size: 15px;
            }

            .oa-contact-cell.mui-table .mui-table-cell {
                padding: 11px 0;
                vertical-align: middle;
            }

            .oa-contact-cell {
                position: relative;
                margin: -11px 0;
            }

            .oa-contact-avatar {
                width: 75px;
            }

            .oa-contact-avatar img {
                border-radius: 50%;
            }

            .oa-contact-content {
                width: 100%;
            }

            .oa-contact-name {
                margin-right: 20px;
            }

            .oa-contact-name,
            oa-contact-position {
                float: left;
            }
        </style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">淘水果</h1>
        </header>
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" href="#tabbar">

                畅销水果
            </a>
            <a class="mui-tab-item" href="#tabbar-with-chat">
                9
                新货上架
            </a>
            <a class="mui-tab-item" href="#tabbar-with-contact">

                收款
            </a>
            <a class="mui-tab-item" href="#tabbar-with-map">

                发货
            </a>
        </nav>
        <div class="mui-content">
            <div id="tabbar" class="mui-control-content mui-active">

                <div id="slider" class="mui-slider">
                    <div class="mui-slider-group mui-slider-lhttp://127.0.0.1:8020/HTML5_2_1/d06.html#oop">
                        <!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
                        <div class="mui-slider-item mui-slider-item-duplicate">
                            <a href="#">
                                <img src="images/yuantiao.jpg">
                            </a>
                        </div>
                        <!-- 第一张 -->
                        <div class="mui-slider-item">
                            <a href="#">
                                <img src="images/shuijiao.jpg">
                            </a>
                        </div>
                        <!-- 第二张 -->
                        <div class="mui-slider-item">
                            <a href="#">
                                <img src="images/muwu.jpg">
                            </a>
                        </div>
                        <!-- 第三张 -->
                        <div class="mui-slider-item">
                            <a href="#">
                                <img src="images/cbd.jpg">
                            </a>
                        </div>
                        <!-- 第四张 -->
                        <div class="mui-slider-item">
                            <a href="#">
                                <img src="images/yuantiao.jpg">
                            </a>
                        </div>
                        <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
                        <div class="mui-slider-item mui-slider-item-duplicate">
                            <a href="#">
                                <img src="images/shuijiao.jpg">
                            </a>
                        </div>
                    </div>
                    <div class="mui-slider-indicator">
                        <div class="mui-indicator mui-active"></div>
                        <div class="mui-indicator"></div>
                        <div class="mui-indicator"></div>
                        <div class="mui-indicator"></div>
                    </div>
                </div>

                <ul class="mui-table-view mui-table-view-chevron" id="goodsList">

                </ul>

            </div>

            <div id="tabbar-with-chat" class="mui-control-content">
                <p>
                    <label for="name">名称:</label>
                    <input type="text" id="name" value="" />
                </p>
                <p>
                    <label for="price">价格:</label>
                    <input type="text" id="price" value="" />
                </p>
                <p>
                    <input type="hidden" id="goodsId" />
                    <button id="btnInsert">添加</button>
                    <button id="btnUpdate">更新</button>
                </p>
            </div>
            <div id="tabbar-with-contact" class="mui-control-content">
                <div class="title">这是div模式选项卡中的第3个子页面,该页面展示一个通讯录示例.</div>
                <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
                    <li class="mui-table-view-cell">
                        <div class="mui-slider-cell">
                            <div class="oa-contact-cell mui-table">
                                <div class="oa-contact-avatar mui-table-cell">
                                    <img src="images/60x60.gif" />
                                </div>
                                <div class="oa-contact-content mui-table-cell">
                                    <div class="mui-clearfix">
                                        <h4 class="oa-contact-name">叶文洁</h4>
                                        董事长
                                    </div>
                                    <p class="oa-contact-email mui-h6">
                                        yewenjie@sina.com
                                    </p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="mui-table-view-cell">
                        <div class="mui-slider-cell">
                            <div class="oa-contact-cell mui-table">
                                <div class="oa-contact-avatar mui-table-cell">
                                    <img src="images/60x60.gif" />
                                </div>
                                <div class="oa-contact-content mui-table-cell">
                                    <div class="mui-clearfix">
                                        <h4 class="oa-contact-name">艾AA</h4>
                                        总经理
                                    </div>
                                    <p class="oa-contact-email mui-h6">
                                        aaa@163.com
                                    </p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="mui-table-view-cell">
                        <div class="mui-slider-cell">
                            <div class="oa-contact-cell mui-table">
                                <div class="oa-contact-avatar mui-table-cell">
                                    <img src="images/60x60.gif" />
                                </div>
                                <div class="oa-contact-content mui-table-cell">
                                    <div class="mui-clearfix">
                                        <h4 class="oa-contact-name">罗辑</h4>
                                        员工
                                    </div>
                                    <p class="oa-contact-email mui-h6">
                                        luoji@126.com
                                    </p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="mui-table-view-cell">
                        <div class="mui-slider-cell">
                            <div class="oa-contact-cell mui-table">
                                <div class="oa-contact-avatar mui-table-cell">
                                    <img src="images/60x60.gif" />
                                </div>
                                <div class="oa-contact-content mui-table-cell">
                                    <div class="mui-clearfix">
                                        <h4 class="oa-contact-name">云天明</h4>
                                        员工
                                    </div>
                                    <p class="oa-contact-email mui-h6">
                                        ytm@163.com
                                    </p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="mui-table-view-cell">
                        <div class="mui-slider-cell">
                            <div class="oa-contact-cell mui-table">
                                <div class="oa-contact-avatar mui-table-cell">
                                    <img src="images/60x60.gif" />
                                </div>
                                <div class="oa-contact-content mui-table-cell">
                                    <div class="mui-clearfix">
                                        <h4 class="oa-contact-name">史强</h4>
                                        员工
                                    </div>
                                    <p class="oa-contact-email mui-h6">
                                        shiqiang@gmail.com
                                    </p>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div id="tabbar-with-map" class="mui-control-content">
                <div class="title">这是div模式选项卡中的第4个子页面,该页面展示一个常见的设置示例.</div>
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            新消息通知
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            隐私
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            通用
                        </a>
                    </li>
                </ul>
                <ul class="mui-table-view" style="margin-top: 25px;">
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            关于mui
                        </a>
                    </li>
                </ul>
                <ul class="mui-table-view" style="margin-top: 25px;">
                    <li class="mui-table-view-cell">
                        <a style="text-align: center;color: #FF3B30;">
                            退出登录
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </body>
    <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.min.js"></script>
    <script>
        //定义当前应用的对象
        var dbApp = {
            //打开数据库
            openDb: function() {
                //创建名称为products,版本为1.0,描述为产品数据库,3M大小的数据库
                this.db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {
                    this.log("创建或打开数据库完成");
                });
            },
            //初始化
            init: function() {
                //打开或创建数据库
                this.openDb();
                //绑定事件
                this.bindEvent();
                //展示数据
                this.select();
                this.log("初始化完成");
            },
            //绑定事件
            bindEvent: function() {
                //添加事件
                $("#btnInsert").click(this.insert);
                $("#btnUpdate").click(this.update);
                $("#btnCreateTable").click(this.createTable);
                $("#btnDropTable").click(this.dropTable);
            },
            //显示消息
            log: function(info) {
                mui.toast(info);
            },
            //执行sql的通用方法 result.rowsAffected 影响行数
            //callback执行成功时的回调方法
            exeSql: function(sql, title, param, callback) {
                title = title || "操作";
                this.db.transaction(function(tx) {
                    tx.executeSql(
                        sql, param || [],
                        function(tx, result) {
                            dbApp.log(title + '成功');
                            if(callback) { //如果有参数
                                callback(result);
                            }
                        },
                        function(tx, error) {
                            dbApp.log(title + '失败' + error.message);
                        });
                });
            },
            //创建表
            createTable: function() {
                dbApp.exeSql("create table IF not EXISTS goods(id integer primary key autoincrement,name text not null,price double)", "创建表");
            },
            //删除表
            dropTable: function() {
                dbApp.exeSql("drop table IF EXISTS goods", "删除表");
            },
            //展示,加载数据
            select: function() {
                dbApp.exeSql("select id,name,price from goods", "查询", [], function(result) {
                    //将表格中tr索引大于0的元素删除
                    $("#goodsList li").remove();
                    for(var i = 0; i < result.rows.length; i++) {
                        var tr = $("<li class='mui-table-view-cell mui-media'><a class='mui-navigate-right'><img class='mui-media-object mui-pull-left' src='images/cbd.jpg'><div class='mui-media-body'>" + result.rows.item(i)["name"] + "<p class='mui-ellipsis'>新鲜好吃的水果,仅售:" + result.rows.item(i)["price"] + "/斤</p></div></a></li>")
                        tr.appendTo("#goodsList");
                    }
                    mui.init({
                        swipeBack: true //启用右滑关闭功能
                    });
                });
            },
            //插入数据
            insert: function() {
                //如果insert方法被绑定为事件,则this表示事件发生的对象
                dbApp.exeSql("insert into goods(name,price) values(?,?)", "添加", [$("#name").val(), $("#price").val()], function() {
                    dbApp.select();
                });
            },
            //删除 
            del: function(id, link) {
                dbApp.exeSql("delete from goods where id=?", "删除", [id], function(result) {
                    //查找a标签最近的一个tr父元素,移除
                    $(link).closest("tr").remove();
                });
            },
            //编辑
            edit: function(id) {
                dbApp.exeSql("select id,name,price from goods where id=?", "编辑", [id], function(result) {
                    $("#name").val(result.rows.item(0)["name"]);
                    $("#price").val(result.rows.item(0)["price"]);
                    $("#goodsId").val(result.rows.item(0)["id"]);
                    dbApp.log("修改后请保存");
                });
            },
            //更新
            update: function() {
                if($("#goodsId").val()) {
                    dbApp.exeSql("update goods set name=?,price=?  where id=?", "更新", [$("#name").val(), $("#price").val(), $("#goodsId").val()], function(result) {
                        dbApp.select();
                        $("#goodsId").val("");
                    });
                } else {
                    dbApp.log("请选择要更新的记录 ");
                }
            }
        };

        dbApp.init();
    </script>

</html>

装进运转后的结果如下:

366net必赢亚洲手机版 65

7、示例下载

https://coding.net/u/zhangguo5/p/HTML502/git

github: https://github.com/zhangguo5/HTML5_2_1

mui示例: https://git.coding.net/zhangguo5/GoMallPro.git

卷入下载

八、视频

https://www.bilibili.com/video/av16293468/

九、作业

9.1.① 、再次出现每一种教学示例。

9.1.② 、用户登录,记住密码,选择颜色,下次打开页面时不供给输入密码,将背景观设置为用户采用的颜色。Login.html,Admin.html

9.1.三 、用SessionStorage判断用户是不是登录,假若未登录转到页面Login.html

9.1.肆 、使用IndexedDb完毕如下效果:

366net必赢亚洲手机版 66

参考:

366net必赢亚洲手机版 67366net必赢亚洲手机版 68

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>IndexedDB-UI</title>
    </head>

    <body>
        <h2>IndexedDB-UI(NOSQL)</h2>

        <table border="1" cellspacing="1" cellpadding="1" id="tabGoods" width="100%">
            <tr>
                <th>序号</th>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
        </table>

        <fieldset>
            <legend>商品信息</legend>
            <p>
                <label for="id">编号</label>
                <input type="text" name="id" id="id" value="" />
            </p>
            <p>
                <label for="name">名称</label>
                <input type="text" name="name" id="name" value="" />
            </p>
            <p>
                <label for="price">价格</label>
                <input type="number" name="price" id="price" value="" />
            </p>
            <p>
                <input type="button" id="btnSubmit" value="添加" />
                <input type="button" id="btnUpdate" value="更新" />
            </p>
        </fieldset>

        <h3 id="msg"></h3>
        <script src="../js/jQuery/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script>
            //数据库
            var db;

            function init() {
                create();

                $("body").on("click", "#btnSubmit", {}, function() {
                    add();
                });

                $("#tabGoods").on("click", ".del", {}, function() {
                    if(confirm('您确定要删除吗?')) {
                        var tr = $(this).closest("tr");
                        del(tr.data("goods").id, function() {
                            alert('删除成功!');
                            tr.remove();
                        });
                    }
                });

                $("#tabGoods").on("click", ".edit", {}, function() {
                    var tr = $(this).closest("tr");
                    var obj = tr.data("goods");
                    $("#id").val(obj.id).prop("disabled", "disabled");
                    $("#name").val(obj.name);
                    $("#price").val(obj.price);
                });

                $("body").on("click", "#btnUpdate", {}, function() {
                    var obj = {
                        "id": $("#id").val(),
                        "name": $("#name").val(),
                        "price": $("#price").val()
                    };
                    edit(obj, function() {
                        alert('修改成功!');
                        getAll();
                    });
                    $("#id").val(obj.id).removeProp("disabled");
                });

            }
            init();

            //创建数据库与表
            function create() {
                //创建一个名称为gomall且版本为2的数据库,返回一个请求
                var request = indexedDB.open("gomallPro", 2);
                //绑定回调事件,成功时
                request.onsuccess = function(e) {
                    db = e.target.result;
                    log('创建数据库或打开数据库成功!');
                    getAll();
                };
                //失败时
                request.onerror = function(e) {
                    log("错误:" + e.target.errorCode || e.target.error);
                };
                //增加数据库版本号时,会触发onupgradeneeded事件(会在onsuccess之前被调用)
                request.onupgradeneeded = function(e) {
                    //创建对象存储空间(ObjectStore),类似表,goods是表名,id是主键,存储的是JSON
                    e.target.result.createObjectStore("goods", {
                        "keyPath": "id"
                    });
                    log("初始化数据库成功!");
                };
            }

            //新增数据
            function add() {
                //创建事务对象
                var tx = db.transaction("goods", "readwrite");
                //从数据库中获得存储对象,表
                var goods = tx.objectStore("goods");
                //javascript中的对象数组
                var item = {
                    "id": $("#id").val(),
                    "name": $("#name").val(),
                    "price": $("#price").val()
                };
                goods.add(item);
                log("添加数据成功!");
                getAll();
            }

            //更新对象
            function edit(item, callback) {
                //创建事务对象
                var tx = db.transaction("goods", "readwrite");
                //从数据库中获得存储对象,表
                var goods = tx.objectStore("goods");

                //执行更新
                var request = goods.put(item);
                request.onsuccess = function(e) {
                    log(e.target.result);
                    if(callback) callback();
                };
            }

            //删除对象
            function del(key, callback) {
                //创建事务对象
                var tx = db.transaction("goods", "readwrite");
                //从数据库中获得存储对象,表
                var goods = tx.objectStore("goods");
                //执行删除操作
                var request = goods.delete(key);
                //成功时的回调
                request.onsuccess = function(e) {
                    log(e.target.result);
                    log("删除成功!");
                    if(callback) callback();
                };
            }

            var index;
            //获得多个对象(游标)
            function getAll() {
                index = 1;
                //移除表格中除第一行以外的所有行
                $("#tabGoods tr:gt(0)").remove();
                //创建事务对象
                var tx = db.transaction("goods", "readwrite");
                //从数据库中获得存储对象,表
                var goods = tx.objectStore("goods");
                //打开游标
                var request = goods.openCursor();
                //成功时的回调
                request.onsuccess = function(e) {
                    //获得游标
                    var cursor = e.target.result;
                    if(cursor) { //如果不为空
                        var obj = cursor.value;
                        genTr(obj);
                        //下移
                        cursor.continue();
                    }
                };
            }

            function genTr(goods) {
                var tr = $("<tr/>").data("goods", goods);
                $("<td/>").html(index++).appendTo(tr);
                $("<td/>").html(goods.id).appendTo(tr);
                $("<td/>").html(goods.name).appendTo(tr);
                $("<td/>").html(goods.price).appendTo(tr);

                var btnDel = $("<input type='button' value='删除' class='del'/>");
                var btnEdit = $("<input type='button' value='编辑' class='edit'/>");

                $("<td/>").append(btnDel).append(btnEdit).appendTo(tr);

                tr.appendTo($("#tabGoods"));
            }

            //显示消息
            var msg = document.getElementById("msg");

            function log(m) {
                msg.innerHTML += m + "<br/>";
            }
        </script>
    </body>
</html>

View Code

运作结果:

366net必赢亚洲手机版 69

9.2.一 、完毕2个密码管理器APP

366net必赢亚洲手机版 70

366net必赢亚洲手机版 71

javascript获得url中的参数

//方法一:采用正则表达式获取地址栏参数
function GetQueryString(name)
{
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}

 

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图