IndexedDBのget(), add(), count()のサンプル

<h1>IndexedDBのget(), add(), count()のサンプル</h1>
<div>
  <input type="text" id="userName" value=""> <button id="addUserBtn">ユーザー追加</button>
  <hr>
  <input type="number" id="userId" value="" min="1"> <button id="userIdBtn">ユーザーID検索</button>
  <p id="result"></p>
</div>

const DB_NAME = 'UserDatabase'
const STORE_NAME = 'users'
const request = indexedDB.open(DB_NAME)

request.onsuccess = (event) => {
  const db = event.target.result
  const transaction = db.transaction(STORE_NAME, 'readonly')
  const store = transaction.objectStore(STORE_NAME)
  const countRequest = store.count()

  countRequest.onsuccess = () => {
    const userName = document.getElementById('userName')
    const addUserBtn = document.getElementById('addUserBtn')
    const userId = document.getElementById('userId')
    const userIdBtn = document.getElementById('userIdBtn')
    const result = document.getElementById('result')
    let id = countRequest.result

    addUserBtn.addEventListener('click', () => {
      if (!userName.value) return
      addUser(db, { id: ++id, name: userName.value })
      userName.value = ''
    })

    userIdBtn.addEventListener('click', () => {
      if (!userId.value) return
      getUser(db, parseInt(userId.value))
    })
  }
}

request.onupgradeneeded = (event) => {
  const db = event.target.result

  if (!db.objectStoreNames.contains(STORE_NAME)) {
    const objectStore = db.createObjectStore(STORE_NAME, { keyPath: 'id' })
    objectStore.createIndex('name', 'name', { unique: false })
    objectStore.createIndex('age', 'age', { unique: false })
    console.log('オブジェクトストアが作成されました')
  }
}

function addUser(db, user) {
  const transaction = db.transaction(STORE_NAME, 'readwrite')
  const store = transaction.objectStore(STORE_NAME)
  const getRequest = store.get(user.id)

  getRequest.onsuccess = () => {
    if (getRequest.result) {
      console.log('同じIDのユーザーがすでに存在します:', getRequest.result)
    } else {
      const addRequest = store.add(user)

      addRequest.onsuccess = () => {
        console.log('ユーザーが追加されました:', user)
      }
    }
  }
}

function getUser(db, id) {
  const transaction = db.transaction(STORE_NAME, 'readonly')
  const store = transaction.objectStore(STORE_NAME)
  const request = store.get(id)
  const result = document.getElementById('result')

  request.onsuccess = () => {
    result.textContent = request.result?.name ?? `id: ${id} のユーザーは存在しません`
  }
}

元記事を表示する