<!DOCTYPE html>
<html lang="en">

<head>
  <title>Indexed DB</title>
</head>

<body>
  <div class="container d-flex justify-content-center">
    <div class="col-md-6 mt-5" id="app">
      <div class="input-group mb-5">
        <input type="text" class="form-control" type="text" v-model="futureNote" @keyup.enter="addNote">
        <span class="input-group-addon bg-primary text-white" @click="addNote">Add</span>
      </div>
      <ul class="list-group">
        <li class="list-group-item" v-for="note in notes">
          <span v-html="note.value.completed ? `<s>${note.value.content}</s>` : note.value.content"></span>
          <span @click="markComplete(note.id)">(mark complete)</span>
          <span @click="showNote(note.id)">(show)</span>
          <span @click="deleteNote(note.id)">(x)</span>
        </li>
      </ul>
    </div>
  </div>

</body>

</html>
// Khởi tạo một số hằng sử dụng nhiều lần
const dbName = "myDB";
const collection = "notes";

// Mount Vue component vào #app
new Vue({
  el: "#app",
  data: {
    db: null,
    notes: [],
    futureNote: null
  },
  mounted() {
    // Kết nối DB
    var request = window.indexedDB.open(dbName, 1);

    // Nếu thành công. Tiến hành lấy notes về
    request.onsuccess = event => {
      this.db = request.result;
      this.getNotes();
    };

    // Kết nối lần đầu. Tiến hành khởi tạo objectStore với tên collection
    request.onupgradeneeded = event => {
      this.db = event.target.result;
      this.db.createObjectStore(collection, {
        autoIncrement: true
      });
    };
  },
  methods: {
    // Thêm note mới
    addNote() {
      // Tạo transaction với mode readwrite
      var request = this.db
        .transaction(collection, "readwrite")
        .objectStore(collection)
        .add({
          content: this.futureNote,
          completed: false
        });
      this.futureNote = null;
      request.onsuccess = event => {
        // Lấy lại notes sau khi đã thêm giá trị mới
        this.getNotes();
      };
    },
    showNote(key) {
      var objectStore = this.db.transaction(collection).objectStore(collection);
      var request = objectStore.get(key);

      request.onsuccess = function(event) {
        // Giá trị value trong DB chính là event.target.result
        alert(
          `Note detail: ${event.target.result.content}. Completed: ${event
            .target.result.completed}`
        );
      };
    },
    markComplete(key) {
      var objectStore = this.db
        .transaction(collection, "readwrite")
        .objectStore(collection);
      var request = objectStore.get(key);

      request.onsuccess = event => {
        var data = event.target.result;
        data.completed = true;

        // Update dữ liệu mới
        var requestUpdate = objectStore.put(data, key);

        // Lấy dữ liệu mới sau khi update
        requestUpdate.onsuccess = event => {
          this.getNotes();
        };
      };
    },
    getNotes() {
      this.notes = [];
      var objectStore = this.db.transaction(collection).objectStore(collection);

      // Sử dụng cursor để lấy lần lượt dữ liệu
      objectStore.openCursor().onsuccess = event => {
        var cursor = event.target.result;

        if (cursor) {
          // Nếu có cursor. Push dữ liệu và tiếp tục với record tiếp theo
          this.notes.push({
            id: cursor.key,
            value: cursor.value
          });
          cursor.continue();
        }
      };
    },
    // Xóa dữ liệu
    deleteNote(key) {
      var request = this.db
        .transaction(collection, "readwrite")
        .objectStore(collection)
        .delete(key);

      request.onsuccess = event => {
        this.getNotes();
      };
    }
  }
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css

External JavaScript

  1. https://unpkg.com/vue