/*
* 参数
* db: 已建或未建数据库
* pouchId: 数据库唯一的主键_id
* src: 图片img的DOM对象
* bg: 判断是否是背景图
* */
function addTodo(db, pouchId,src,bg) {
    // 查询数据库中是否有该文档 根据主键pouchId查询
    db.get(pouchId).then(function(doc) {
        return db.put({         //  如有该文档 则更新版本号_rev
            _id: pouchId,
            _rev: doc._rev,     // 版本号
            imgFile:doc.imgFile     //图片Blob对象
        });
    }).then(function(response) {
        // handle response
        console.log('查询成功');     // 文档查询成功
        console.log(response);       // 响应查询文档信息
        db.get(pouchId).then(function (doc) {   // 查询数据库中该主键_id的文档信息
            // handle doc
            var imgBlob = doc.imgFile  // blob图片对象
            console.log(imgBlob)
            // 判断是否存在该图片对象Blob
            if (imgBlob) {
                // 传入blob对象 dom对象
                showImg(imgBlob, src,bg);
            } else {
                getByRequest(db,pouchId, src);
            }
        }).catch(function (err) {
            console.log(err);
        });

    }).catch(function (err) {
        console.log(err);
        console.log('查询失败,进行创建')    // 文档查询失败
        // 新建文档
        db.put({
            _id: pouchId
        }).then(function (response) {
            // handle response
            console.log('创建成功')
        }).catch(function (err) {
            console.log(err);
        });
    });
}

// 传入blob对象 显示图片
function showImg(imgFile, src,bg) {

    console.log("showImg" + imgFile);

    // Get window.URL object
    var URL = window.URL || window.webkitURL;

    // Create and revoke ObjectURL
    // 利用blob对象 创建一个URL对象
    var imgURL = URL.createObjectURL(imgFile);

    // Set img src to ObjectURL
    // 获取图片的dom对象 并将URL设置为该对象的SRC
    var imgElephant = document.getElementById(src);
    if(!bg){
        imgElephant.setAttribute("src", imgURL);
    }else{
        imgElephant.style.background = "url("+imgURL+")";
    }


    // Revoking ObjectURL
    // 当图片加载完成后
    // 使用URL.revokeObjectURL() 方法释放之前创建的URL对象
    imgElephant.onload = function () {
        window.URL.revokeObjectURL(this.src);
    }
}

// 当数据库查询主键 无该图片数据时 通过项目自身存储图片blob
function getByRequest(db,pouchId, src) {
    // Create XHR
    var xhr = new XMLHttpRequest(), // 创建 XMLHttpRequest 对象   目前请求项目自身
        blob;
    xhr.open("GET", pouchId, true);   // 在项目中get请求该图片
    // Set the responseType to blob
    // 将响应类型设为blob类型
    xhr.responseType = "blob";
    // 响应加载
    xhr.addEventListener("load", function () {
        // 响应为200 请求完成
        if (xhr.status === 200) {
            console.log("Image retrieved");

            // Blob as response
            blob = xhr.response;  // blob对象为响应后的对象
            console.log("Blob:" + blob);
            //  获得blob图片信息  存入pouchDB文档
            save(db,blob, pouchId);
            //  从pouchDB查询该文档
            showImg(blob, src);
        }
    }, false);
    // Send XHR
    xhr.send();
}

//根据blob对象为keyPath  更新键值
function save(db,blob, pouchId) {
    // 根据主键_id 查询文档 并追加文档imgFile内容 更新版本号_rev
    db.get(pouchId).then(function(doc) {
        return db.put({
            _id: pouchId,
            _rev: doc._rev,
            imgFile: blob
        });
    }).then(function(response) {
        // handle response
        console.log('图片存储成功')
        console.log(response)
    }).catch(function (err) {
        console.log(err);
    });

}
GitHub地址:https://github.com/VIVI863628/PouchDB/blob/master/IMGDB2.js

接上回

  • 上回我们已经完毕了接纳的保有机能,接下去大家要做的是借助applicationCache使应用能够离线使用
  • 搭建简易nodejs服务器,测试大家的品类

接上回

上回说起,我们已经到位了动用的1/三,方今应用已经能够落成保存用户的装置。
图片本地存储,基于客户端存储的可离线使用web应用。近来,大家早先开始产生剩余的模块之一——职务列表页。
本章我们最首要实现的效益

  • 成立并连接到1个indexedDB数据库
  • 贯彻模糊寻找效果
  • 实现增,删,查,改
  • 删去indexedDB中单个,全体数据
    首先介绍

接上回

暗中认可大家都以及有了尽量的知识储备,大家就准备真正的入手开头创设我们的小应用。

在此处自身提前定义好前边的代码会引用到的变量

const settingForm = document.forms.settings,
    searchForm = document.forms.search,
    nav = document.querySelector('ul'),
    addForm = document.forms.add,
    // 通过hash值映射到tabIndex
    hashToIndex = {
      '#list': 0,
      '#add': 1,
      '#settings': 2
    },
    // 判断localStorage是否可用
    localStorageAvailable = ('localStorage' in window),
    indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB || false,
    IDBKeyRange = window.IDBKeyRange || window.webkitIDKeyRange || window.mozIDKeyRange || window.msIDKeyRange || false,
    // webSQL对象并未实现为window成员,可以侦察window成员的openDatabase是否存在以检测web sql
    webSQLSupport = ('openDatabase' in window)
    let db = null

 

创办应用缓存清单文件task.appcache
CACHE MANIFEST
#Rev 1

CACHE:
index.html
style.css
app.js
image/favicon.ico

NETWORK:

在那之中 cache表示需求缓存的文本名,network表示需求运用互联网访问的文件名
我们在index.html中的html标签中动用该文件

<html lang="en" manifest="tasks.appcache">

职分初步

第3大家侦测浏览器对数据库的支撑,大家早就创制了四个变量突显浏览器的相称手艺(恐怖的包容难点)

const indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB || false,
      IDBKeyRange = window.IDBKeyRange || window.webkitIDKeyRange || window.mozIDKeyRange || window.msIDKeyRange || false,
      // webSQL对象并未实现为window成员,可以侦察window成员的openDatabase是否存在以检测web sql
      webSQLSupport = ('openDatabase' in window)
创设HTML文书档案结构

那是相持简便易行的有个别,可是值得注意的是!
<a>标签中的链接都以形如
#AAA花样,该措施不会接触网页重载,而是再url后加多#——hash值,可通过location.hash获取。
location.hash转移时,会监听到hashchange事件,合营js完结路由的跳转,那也是当下流行框架中前端路由完结的措施之一。
location.hash详解

<body class="list">
  <header>
    <h1>My &nbspTasks</h1>
    <nav>
      <ul>
        <li class="active">
          <a href="#list" class="list">任务列表</a>
        </li>
        <li>
          <a href="#add" class="add">添加任务</a>
        </li>
        <li>
          <a href="#settings" class="settings">设置</a>
        </li>
      </ul>
    </nav>
  </header>
  <section class="list">
    <form name="search" class="search_form">
        <input type="text" name="query" placeholder="搜索任务">
        <input type="submit" value="搜索">
    </form>
    <ul id="task_list"></ul>
  </section>
  <section class="add">
    <form name="add" class="add_form">
      <h3 class="task_desc">
        任务描述
      </h3>
      <textarea name="desc" class="task_desc_input" placeholder="请输入任务描述"></textarea>
      <h3 class="task_due_date">完成日期</h3>
      <input type="date" name="due_date" class="task_due_date_input">
      <input type="submit" value="添加一个新任务" class="add_button">
    </form>
  </section>
  <section class="settings">
    <form name="settings" class="setting_form">
      <div class="setting_form_div">
        <h3>姓名</h3>
        <input type="text" name="name" class="name">
        <h3 class="color_scheme">颜色</h3>
        <select name="color_scheme" class="scheme">
          <option value="white">白色</option>
          <option value="black">黑色</option>
        </select>
        <input type="submit" value="保存设置" class="button save_setting">
        <input type="reset" value="重置所有数据" class="button reset">
      </div>
    </form>
  </section>
</body>
网站地图xml地图