1

错误是 db 无法打开且 $ 未定义，未能加载资源（j 查询）。代码旨在接收输入字段值（日期，cal）并使用 indexedDB 将它们存储到数据库中 

  <!DOCTYPE html>
<html manifest="manifest.webapp" lang="en">
<head>
  <meta charset="utf-8">
  <title>Diab</title>

  <link rel="stylesheet" href="diab.css">

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0/jquery.min.js"></script>

  <script type="text/javascript" src="diab1.js"></script>


</head>
<body>
    <input type="date" id="date">Date</input>
    <input type="number" id="cal">Cal</input>
    <button id="add" >Add</button>
</body>
</html>



(function()
{   var db;
    var openDb=function()
    {
        var request=indexedDB.open("diabetore");
        request.onsuccess = function()
        {
            console.log("DB created succcessfully");
            db = request.result;
            console.log("openDB done!!");
        };


        request.onerror=function(){
            alert("could not open db");
        };

        request.onupgradeneeded = function()
        { 


        console.log("openDB.onupgradeneeded function");
        var store = db.createObjectStore("diab", {keyPath:  "date"});
        var dateIndex = store.createIndex("date", "date",{unique: true});

            // Populate with initial data.
            store.put({date: "june 1 2013",cal:70});
            store.put({date: "june 2 2013",cal:71});
            store.put({date: "june 3 2013",cal:72});
            store.put({date: "june 8 2013",cal:73});
        };   
    };

    function getObjectStore(store_name,mode)
    {
        var tx=db.transaction(store_name,mode);
        return tx.objectStore(store_name);
    }

    function addItems(date,cal)
    {
        console.log("addition to db started");
        var obj={date:date,cal:cal};
        var store=getObjectStore("diab",'readwrite');
        var req;
        try
        {
            req=store.add(obj);
        }catch(e)
        {
            if(e.name=='DataCloneError')
            alert("This engine doesn't know how to clone");
            throw(e);
        }
        req.onsuccess=function(evt)
        {
            console.log("****Insertion in DB successful!!****");

        };
        req.onerror=function(evt)
        {
            console.log("Could not insert into DB");
        };

    }

    function addEventListners()
    {
        console.log("addEventListeners called...");
        $('#add').click(function(evt){
            console.log("add...");
            var date=$('#date').val();
            var cal=$('#cal').val();
            if(!date || !cal)
            {
                alert("required field missing..");
                return;
            }
            addItems(date,cal);
        });
    }

    openDb();
    addEventListners();


})();
4

2 回答 2

0

您应该在浏览器中测试脚本 URL。然后你会意识到脚本不存在。

例如，您需要将 2.0 更改为 2.0.0。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

于 2013-06-29T18:30:57.973 回答
0

关于看不到创建的db的问题，打开数据库的时候需要传入另外一个参数和数据库的版本，比如：

var request=indexedDB.open("diabetore",1);

要在 Chrome 开发人员工具的资源选项卡上查看数据库结构，有时您必须刷新页面。

您的 addEventListners() 函数也会出现问题，因为您的匿名函数在浏览器读取 HTML 内容之前运行，因此浏览器不知道“#add”元素，因此该元素的单击事件处理程序是未创建。

你应该把你的代码放在 "$(function() {" 或 "$(document).ready(function() {" 中：

$(function() {
    (function() {
       var db;
       var openDb=function() {
于 2013-06-29T20:54:50.233 回答