Hướng dẫn tạo Web App đơn giản trên Blogspot sử dụng HTML và IndexedDB

Note App IndexedDB

📝 Ứng dụng ghi chú (IndexedDB)

1. Giới thiệu

Trong bài viết này, chúng ta sẽ tìm hiểu cách biến một trang Blogspot thành một web app mini bằng cách:

Nhúng HTML + JavaScript trực tiếp vào bài viết
Sử dụng IndexedDB để lưu dữ liệu ngay trên trình duyệt (không cần backend)

Ứng dụng ví dụ: Ghi chú (Note App) đơn giản.

2. IndexedDB là gì?

IndexedDB là một cơ sở dữ liệu NoSQL chạy ngay trong trình duyệt, cho phép:

Lưu dữ liệu lớn hơn localStorage
Lưu dạng object (JSON)
Truy vấn dữ liệu linh hoạt

Phù hợp để làm:

App ghi chú
Todo list
Lưu dữ liệu offline

3. Cách nhúng web app vào Blogspot

Trong Blogspot:

Vào Bài đăng → Tạo bài viết mới
Chuyển sang chế độ HTML view
Dán toàn bộ code HTML + JS vào bài viết

4. Code Web App mẫu (Note App với IndexedDB)

👉 Bạn có thể copy toàn bộ đoạn này vào Blogspot:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Note App IndexedDB</title>
  <style>
    body { font-family: Arial; padding: 20px; }
    input, button { padding: 10px; margin: 5px; }
    .note { padding: 10px; border: 1px solid #ccc; margin-top: 5px; }
  </style>
</head>
<body>

<h2>📝 Ứng dụng ghi chú (IndexedDB)</h2>

<input id="noteInput" placeholder="Nhập ghi chú...">
<button onclick="addNote()">Thêm</button>

<div id="list"></div>

<script>
let db;

// Mở database
const request = indexedDB.open("NoteDB", 1);

request.onupgradeneeded = function(e) {
  db = e.target.result;
  db.createObjectStore("notes", { keyPath: "id", autoIncrement: true });
};

request.onsuccess = function(e) {
  db = e.target.result;
  loadNotes();
};

// Thêm ghi chú
function addNote() {
  const text = document.getElementById("noteInput").value;
  if (!text) return;

  const tx = db.transaction("notes", "readwrite");
  const store = tx.objectStore("notes");

  store.add({ text: text });

  tx.oncomplete = () => {
    document.getElementById("noteInput").value = "";
    loadNotes();
  };
}

// Hiển thị danh sách
function loadNotes() {
  const list = document.getElementById("list");
  list.innerHTML = "";

  const tx = db.transaction("notes", "readonly");
  const store = tx.objectStore("notes");

  store.openCursor().onsuccess = function(e) {
    const cursor = e.target.result;
    if (cursor) {
      const div = document.createElement("div");
      div.className = "note";
      div.innerHTML = cursor.value.text;
      list.appendChild(div);
      cursor.continue();
    }
  };
}
</script>

</body>
</html>