Работа с базой IndexedDB

() translation by (you can also view the original English article)

Приветствую вас во втором руководстве серии, посвященной IndexedDB. Я настоятельно рекомендую вам ознакомиться с первым, поскольку буду считать, что вы уже знакомы со всеми рассмотренными мною ранее понятиями. В этом руководстве мы завершим рассмотрение аспектов парадигмы CRUD (* Create, Update, Read, Delete – создать, прочесть, обновить, удалить), которые еще не обсудили, и затем создадим приложение из реального мира разработки, которое будем использовать для демонстрации остальных концепций в последнем руководстве.

Обновление записей

Давайте начнем с обсуждения того, как обновить запись при помощи IndexedDB. Если помните, добавить данные в базу довольно просто:

//Define a person
var person = {
    name:name,
    email:email,
    created:new Date()
}

//Perform the add
var request = store.add(person);

Обновить данные не менее просто. Если мы предположим, что вы определили свойство под названием id в качестве ключа для вашего хранилища объектов, то можете просто воспользоваться методом put вместо add.

var person = {
    name:name,
    email:email,
    created:new Date(),
    id:someId
}

//Perform the update
var request = store.put(person);

Как и в случае с методом add, при использовании метода put вы можете назначать методы для асинхронной обработки результатов операции.

Удаление записей

Удаление записей осуществляется при помощи метода delete. (Как неожиданно.) Вы просто передаете уникальный идентификатор записи, которую хотите удалить. Ниже показан простой пример:

1
2	var t = db.transaction(["people"], "readwrite");
3	var request = t.objectStore("people").delete(thisId);

И как и при работе с другими методами IndexedDB, вы можете добавить ваши обработчики для асинхронной обработки результатов операции.

Что ж, как я упомянул, все это выглядит не очень захватывающе, что, вероятно, и хорошо. Вам нужно, чтобы ваши API были простыми, скучными и без неожиданностей. Теперь давайте воспользуемся тем, что уже изучили, и создадим приложение из реального мира разработки.

Приложение для ведения записей

Хорошо, наконец у нас имеются все (ладно, большинство) частей, необходимых для создания приложение из реального мира разработки. Поскольку мы еще этого не сделали (гм), мы разработаем простое приложение для ведения записей. Давайте рассмотрим несколько скриншотов и затем разберем код, необходимый для реализации описанного в них функционала. При запуске приложения происходит инициализация IndexedDB для приложения и отображение пустой таблицы. Изначально, все что вы можете выполнить в приложении, – добавить новую запись. (Вероятно, мы могли бы сделать интерфейс более удобным для пользователя.)

После нажатия кнопки Add Note появляется форма:

После добавления некоторых данных формы вы можете затем сохранить запись.

Как вы видите, у вас имеется возможность отредактировать и удалить записи. Наконец, если вы нажмете по самой записи, то сможете ознакомиться с ее содержимым:

Что ж, это не совсем относится к высшему пилотажу, однако является готовым рабочим примером использования спецификации IndexedDB. Добавленные записи будут продолжать существовать. Вы можете закрыть ваш браузер, перезапустить компьютер, поразмышлять несколько лет над вашей жизнью и посочинять стихи, и когда вы откроете ваш браузер снова, то ваши данные по-прежнему будут там. Теперь давайте взглянем на код:

Сначала – отказ от ответственности. Рассматриваемое приложение было бы отличным кандидатом, для реализации которого стоило бы воспользоваться одним из многих фреймворков JavaScript. Уверен, что те из вас, кто используют Backbone или Angular, уже могут представить, как бы реализовали наше приложение. Однако, я принял смелое решение – не пользоваться фреймворком. Я переживал и за тех, кто, возможно, использует другой фреймворк, так и за тех, кто не использует их вообще. Я хотел бы, чтобы мы сфокусировались здесь только на вопросах, связанных с IndexedDB. Я уверен, что найдутся люди, не согласные с этим решением, однако, давайте обсудим это в разделе для комментариев.

Наш первый образец – HTML-файл. У нас он только один, и большая часть его содержимого – стандартный код для Bootstrap (* веб-фреймворк для создания дизайна веб-сайтов и веб-приложений).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Note Database</title>

    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="css/app.css" rel="stylesheet">

  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Note Database</a>
        </div>
      </div>
    </div>

    <div class="container">

        <div id="noteList"></div>
        <div class="pull-right"><button id="addNoteButton" class="btn btn-success">Add Note</button></div>
        <div id="noteDetail"></div>

        <div id="noteForm">
            <h2>Edit Note</h2>
            <form role="form" class="form-horizontal">
            <input type="hidden" id="key">
            <div class="form-group">
                <label for="title" class="col-lg-2 control-label">Title</label>
                <div class="col-lg-10">
                <input type="text" id="title" required class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="body" class="col-lg-2 control-label">Body</label>   
                <div class="col-lg-10">
                <textarea id="body" required class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-offset-2 col-lg-10">
                    <button id="saveNoteButton" class="btn btn-default">Save Note</button>
                </div>
            </div>
            </form>
        </div>

    </div>

    <script src="js/jquery-2.0.0.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Как упоминалось выше, значительная часть этого кода – стандартный код для Bootstrap. Интересующие нас части – элементы div с идентификаторами noteList, noteDetail и noteForm. Вы, вероятно, можете догадаться, что это те элементы div, которые мы будем обновлять после действий со стороны пользователя.

Пишем код главного файла приложения

Теперь давайте взглянем на app.js, главный файл, в котором содержится логика (* последовательность операций, выполняемых программно или аппаратно) нашего приложения.

/* global console,$,document,window,alert */
var db;

function dtFormat(input) {
    if(!input) return "";
    var res = (input.getMonth()+1) + "/" + input.getDate() + "/" + input.getFullYear() + " ";
    var hour = input.getHours();
    var ampm = "AM";
    if(hour === 12) ampm = "PM";
    if(hour > 12){
        hour-=12;
        ampm = "PM";
    }
    var minute = input.getMinutes()+1;
    if(minute < 10) minute = "0" + minute;
    res += hour + ":" + minute + " " + ampm;
    return res;
}

Вы можете проигнорировать первую функцию, поскольку это просто вспомогательная функция для преобразования формата дат. Давайте перескочим к блоку кода, который добавляется в методе jQuery ready, зарегистрированный для объекта document.

Проверка поддержки IndexedDB браузером


$(document).ready(function() {

    if(!("indexedDB" in window)) {
        alert("IndexedDB support required for this demo!");
        return;
    }

    var $noteDetail = $("#noteDetail");
    var $noteForm = $("#noteForm");

    var openRequest = window.indexedDB.open("nettuts_notes_1",1);

    openRequest.onerror = function(e) {
        console.log("Error opening db");
        console.dir(e);
    };

    openRequest.onupgradeneeded = function(e) {

        var thisDb = e.target.result;
        var objectStore;

        //Create Note OS
        if(!thisDb.objectStoreNames.contains("note")) {
            console.log("I need to make the note objectstore");
            objectStore = thisDb.createObjectStore("note", { keyPath: "id", autoIncrement:true });  
        }

    };

    openRequest.onsuccess = function(e) {
        db = e.target.result;

        db.onerror = function(event) {
          // Generic error handler for all errors targeted at this database's
          // requests!
          alert("Database error: " + event.target.errorCode);
          console.dir(event.target);
        };

        displayNotes();

    };

Первое, что нам необходимо выполнить, – проверить поддержку IndexedDB браузером. Если браузер пользователя не поддерживает ее, то мы выводим сообщение пользователю и прерываем выполнение функции. Вероятно, было бы лучше, если бы мы перенаправили пользователей на страницу с подробными объяснениями причины, по которой они не могут использовать приложение. (И если честно, мы могли бы также добавить в наше приложение возможность использования в качестве запасного варианта WebSQL. Но опять-таки, в этом руководстве я буду упрощать.)

После получения пары селекторов jQuery, которые мы будем использовать в коде нашего приложения, мы открываем соединение с базой данных IndexedDB. Код для работы с базой данных довольно прост. Вы видите, что мы создали одно хранилище объектов под названием note в обработчике onupgradeneeded. После того как код вышеуказанного обработчика выполнен, в обработчике onsuccess будет запущена функция displayNotes.

Функция `displayNotes`


    function displayNotes() {

        var transaction = db.transaction(["note"], "readonly");  
        var content="<table class='table table-bordered table-striped'><thead><tr><th>Title</th><th>Updated</th><th>&amp;nbsp;</td></thead><tbody>";

        transaction.oncomplete = function(event) {
            $("#noteList").html(content);
        };

        var handleResult = function(event) {  
          var cursor = event.target.result;  
          if (cursor) {  
            content += "<tr data-key=\""+cursor.key+"\"><td class=\"notetitle\">"+cursor.value.title+"</td>";
            content += "<td>"+dtFormat(cursor.value.updated)+"</td>";

            content += "<td><a class=\"btn btn-primary edit\">Edit</a> <a class=\"btn btn-danger delete\">Delete</a></td>";
            content +="</tr>";
            cursor.continue();  
          }  
          else {  
            content += "</tbody></table>";
          }  
        };

        var objectStore = transaction.objectStore("note");

        objectStore.openCursor().onsuccess = handleResult;

    }

Функция displayNotes выполняет то, что вы и ожидаете, – получает все данные и отображает их. Мы обсудили, как получить все данные в предыдущем руководстве, однако я хочу обратить здесь ваше внимание на один отличительный момент. Обратите внимание, что у нас имеется новый обработчик событий, oncomplete, который мы подвязали к самой транзакции (* групповая операция). Ранее вы использовали обработчики только внутри методов для выполнения действий, внутри транзакции, однако при помощи IndexedDB мы также можем использовать их и на верхнем уровне. Это становится особенно полезным в случаях вроде нашего. У нас имеется огромная строка, наша HTML-таблица, которую создали при итерации по нашим данным. Мы можем воспользоваться обработчиком транзакции oncomplete, чтобы обернуть порцию данных для отображения и отобразить ее при помощи единственного вызова jQuery.

Функции для удаления, редактирования и добавления записей


    $("#noteList").on("click", "a.delete", function(e) {
        var thisId = $(this).parent().parent().data("key");

        var t = db.transaction(["note"], "readwrite");
        var request = t.objectStore("note").delete(thisId);
        t.oncomplete = function(event) {
            displayNotes();
            $noteDetail.hide();
            $noteForm.hide();
        };
        return false;
    });

    $("#noteList").on("click", "a.edit", function(e) {
        var thisId = $(this).parent().parent().data("key");

        var request = db.transaction(["note"], "readwrite")  
                        .objectStore("note")  
                        .get(thisId);  
        request.onsuccess = function(event) {  
            var note = request.result;
            $("#key").val(note.id);
            $("#title").val(note.title);
            $("#body").val(note.body);
            $noteDetail.hide();
            $noteForm.show();
        };

        return false;
    });

    $("#noteList").on("click", "td", function() {
        var thisId = $(this).parent().data("key");
        var transaction = db.transaction(["note"]);  
        var objectStore = transaction.objectStore("note");  
        var request = objectStore.get(thisId);

        request.onsuccess = function(event) {  
            var note = request.result;
            $noteDetail.html("<h2>"+note.title+"</h2><p>"+note.body+"</p>").show();
            $noteForm.hide();
        };  
    });

    $("#addNoteButton").on("click", function(e) {
        $("#title").val("");
        $("#body").val("");
        $("#key").val("");
        $noteDetail.hide();
        $noteForm.show();       
    });

Наши следующие два метода (delete и edit) реализуются согласно тому же принципу. Поскольку в этом коде нет новых вызовов IndexedDB, то мы не будем на них обращать внимание. Большей частью «мяса» здесь являеются простые манипуляции с DOM (* Document Object Model – объектная модель документа) для выполнения определенных действий. Обработчик события click для кнопки, при помощи которой добавляются записи, как раз для этого и служит.

Функция `Save`


    $("#saveNoteButton").on("click",function() {

        var title = $("#title").val();
        var body = $("#body").val();
        var key = $("#key").val();

        var t = db.transaction(["note"], "readwrite");

        if(key === "") {
            t.objectStore("note")
                            .add({title:title,body:body,updated:new Date()});
        } else {
            t.objectStore("note")
                            .put({title:title,body:body,updated:new Date(),id:Number(key)});
        }

        t.oncomplete = function(event) {
            $("#key").val("");
            $("#title").val("");
            $("#body").val("");
            displayNotes();
            $noteForm.hide();           
        };

        return false;
    });

});

Следующий лакомый кусочек – функция save. В нее необходимо добавить немного логики, чтобы определить, происходит ли обновление или добавление данных, однако даже это довольно просто. И на этом все! Теперь у нас имеется готовое приложение, использующее IndexedDB. Вы можете поэкспериментировать с этой демоверсией, скачав прикрепленные файлы с исходный кодом.

В заключение

На этом вторая часть серии подошла к концу! В третьем руководстве мы продолжим работать с этим приложением и начнем добавлять дополнительные возможности, включая возможность поиска данных и возможности, реализуемые при помощи массива.

1
2	$(document).ready(function() {
3
4	if(!("indexedDB" in window)) {
5	alert("IndexedDB support required for this demo!");
6	return;
7	}
8
9	var $noteDetail = $("#noteDetail");
10	var $noteForm = $("#noteForm");
11
12	var openRequest = window.indexedDB.open("nettuts_notes_1",1);
13
14	openRequest.onerror = function(e) {
15	console.log("Error opening db");
16	console.dir(e);
17	};
18
19	openRequest.onupgradeneeded = function(e) {
20
21	var thisDb = e.target.result;
22	var objectStore;
23
24	//Create Note OS
25	if(!thisDb.objectStoreNames.contains("note")) {
26	console.log("I need to make the note objectstore");
27	objectStore = thisDb.createObjectStore("note", { keyPath: "id", autoIncrement:true });
28	}
29
30	};
31
32	openRequest.onsuccess = function(e) {
33	db = e.target.result;
34
35	db.onerror = function(event) {
36	// Generic error handler for all errors targeted at this database's
37	// requests!
38	alert("Database error: " + event.target.errorCode);
39	console.dir(event.target);
40	};
41
42	displayNotes();
43
44	};

Работа с базой IndexedDB - Часть 2