TypeSctiptでIndexedDBを操作する方法

app.js

$(function () {
  var indexedDB = window.indexedDB;
  var db = null;
  var request = indexedDB.open('library', 1);
  request.onupgradeneeded = function (event) {
    db = event.target.result;
    var store = db.createObjectStore('books', { keyPath: 'isbn' });
    store.createIndex('index', 'isbn', false);
  };
  request.onsuccess = function (event) {
    db = event.target.result;
  };
  request.onerror = function (event) {
    console.log(event.message);
  };
  $('#regist').click(function () {
    var trans = db.transaction('books', 'readwrite');
    var store = trans.objectStore('books');
    var bookInfo = {
      name: $('#name').val(),
      description: $('#description').val(),
      author: $('#author').val(),
      isbn: $('#isbn').val()
    };
    var request = store.put(bookInfo);
    request.onsuccess = function (event) {
      console.log('登録成功');
    };
    request.onerror = function (event) {
      console.log('登録失敗:' + event.message);
    };
  });
  $('#search').click(function () {
    clear();
    var key = $('#isbn').val();
    var trans = db.transaction('books', 'readonly');
    var store = trans.objectStore('books');
    var request = store.get(key);
    request.onsuccess = function (event) {
      var result = event.target.result;
      if (result) {
        render(result);
      }
      else {
        console.log('対象データは存在しません。');
      }
    };
  });
  $('#all-search').click(function () {
    clear();
    var trans = db.transaction('books', 'readonly');
    var store = trans.objectStore('books');
    var request = store.openCursor();
    request.onsuccess = function (event) {
      var cursor = event.target.result;
      if (cursor) {
        render(cursor.value);
        cursor.continue();
      }
    };
  });
  var render = function (bookInfo) {
    var tr = $('<tr>').append('<td>' + bookInfo.name + '</td>' + '<td>' + bookInfo.description + '</td>' + '<td>' + bookInfo.author + '</td>' + '<td>' + bookInfo.isbn + '</td>');
    $('#lists > tbody').append(tr);
  };
  var clear = function () {
    $('#lists > tbody > tr').remove();
  };
  $('#delete').click(function () {
    var key = $('#isbn').val();
    var trans = db.transaction('books', 'readwrite');
    var store = trans.objectStore('books');
    var request = store.delete(key);
    request.onsuccess = function (event) {
      console.log('削除成功');
    };
    request.onerror = function (event) {
      console.log('削除失敗:' + event.message);
    };
  });
  $('#all-delete').click(function () {
    var trans = db.transaction('books', 'readwrite');
    var store = trans.objectStore('books');
    var request = store.clear();
    request.onsuccess = function (event) {
      console.log('全データ削除成功');
    };
    request.onerror = function (event) {
      console.log('全データ削除失敗:' + event.message);
    };
  });
});
//# sourceMappingURL=app.js.map

app.ts

/// <reference path="scripts/typings/jquery/jquery.d.ts" />

// データベースに登録するオブジェクトの型
interface BookInfo {
  name: string;
  description: string;
  author: string;
  isbn: number;
}

$(() => {
  // ベンタープレフィックス（webkit:Chrome、moz：FireFox）
  var indexedDB = window.indexedDB; // || window.webkitIndexedDB;
  
  //　データベース接続
  var db: IDBDatabase = null;
  var request = indexedDB.open('library', 1);

  // 接続成功（初回 or DBのバージョンが変わったとき）
  request.onupgradeneeded = (event) => {
    db = (<IDBRequest>event.target).result;

    // オブジェクトストア作成（インデックスのキーとして'isbn'を指定）
    var store = db.createObjectStore('books', { keyPath: 'isbn' });
    // インデックスの作成
    store.createIndex('index', 'isbn', false);
  };

  // 接続成功（すでにDBが存在する場合）
  request.onsuccess = (event) => {
    db = (<IDBRequest>event.target).result;
  };

  request.onerror = (event) => {
    console.log(event.message);
  };


  // データ登録・更新
  $('#regist').click(() => {
    var trans = db.transaction('books', 'readwrite');
    var store = trans.objectStore('books');

    // 登録対象のデータ（BookInfoはInterfaceで定義）
    var bookInfo: BookInfo = {
      name: $('#name').val(),
      description: $('#description').val(),
      author: $('#author').val(),
      isbn: $('#isbn').val()
    };

    // データ登録・更新
    var request = store.put(bookInfo);

    request.onsuccess = (event) => {
      console.log('登録成功');
    };

    request.onerror = (event) => {
      console.log('登録失敗:' + event.message);
    };
  });


  // データ検索
  $('#search').click(() => {
    clear();
    var key = $('#isbn').val();

    var trans = db.transaction('books', 'readonly');
    var store = trans.objectStore('books');

    // データ取得
    var request = store.get(key);

    request.onsuccess = (event) => {
      var result = <BookInfo>(<IDBRequest>event.target).result;
      if (result) {
        render(result);
      } else {
        console.log('対象データは存在しません。');


      }
    };
  });

  // 全データ検索
  $('#all-search').click(() => {
    clear();
    var trans = db.transaction('books', 'readonly');
    var store = trans.objectStore('books');

    // 全データ取得
    var request = store.openCursor();

    request.onsuccess = (event) => {
      var cursor = <IDBCursorWithValue>(<IDBRequest>event.target).result;

      if (cursor) {
        render(cursor.value);
        cursor.continue();
      }
    };

  });

  // 画面表示
  var render = (bookInfo: BookInfo) => {
    var tr = $('<tr>').append(
      '<td>' + bookInfo.name + '</td>' + 
      '<td>' + bookInfo.description + '</td>' + 
      '<td>' + bookInfo.author + '</td>' + 
      '<td>' + bookInfo.isbn + '</td>'
      );
    $('#lists > tbody').append(tr);
  };

  // 画面クリア
  var clear = () => {
    $('#lists > tbody > tr').remove();
  };


  // データ削除
  $('#delete').click(() => {
    var key = $('#isbn').val();

    var trans = db.transaction('books', 'readwrite');
    var store = trans.objectStore('books');

    // データ削除
    var request = store.delete(key);

    request.onsuccess = (event) => {
      console.log('削除成功');
    };

    request.onerror = (event) => {
      console.log('削除失敗:' + event.message);
    };
  });


  // 全データ削除
  $('#all-delete').click(() => {
    var trans = db.transaction('books', 'readwrite');
    var store = trans.objectStore('books');

    // 全データ削除
    var request = store.clear();

    request.onsuccess = (event) => {
      console.log('全データ削除成功');
    };

    request.onerror = (event) => {
      console.log('全データ削除失敗:' + event.message);
    };
  });
});

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>Indexed Database API</title>
</head>
<body>
  <h1>IndexedDB Sample</h1>
  ISBN(*)：<input type="text" id="isbn" /><br />
  名前： <input type="text" id="name" /><br />
  詳細：<input type="text" id="description" /><br />
  著者：<input type="text" id="author" /><br />
  <button type="button" id="regist">登録</button>
  <button type="button" id="search">検索</button>
  <button type="button" id="all-search">全検索</button>
  <button type="button" id="delete">削除</button>
  <button type="button" id="all-delete">全削除</button>
  <hr />
  <table id="lists" border="1">
    <thead>
      <tr>
        <th>名前</th>
        <th>詳細</th>
        <th>著者</th>
        <th>ISBN</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <script src="Scripts/jquery-2.1.3.min.js"></script>
  <script src="app.js"></script>
</body>
</html>