こんにちは、まいまいです。駆け出しプログラマとして日々努力しております。4月にプログラマになってから3ヶ月が経過しましたが、忙しいですね。
今日はindexedDBについてサンプルコードを書いてみました。cookieは4KBだし、保存量少ないなぁと考えていたときに、indexedDBに出会った次第です。ブラウザ上で大量のデータを保存できるなんて、もう最初にアクセスしたら以後ずっとオフラインでもサービスを使える、なんてサービスが始まりそうな予感です。
indexedDBの簡単な特徴
indexedDBの特徴を簡単にまとめてみました。もっと深い情報は、MDNのページでに行くと参照することができます。とても読みやすかったのでおすすめです。
ブラウザ側にデータを保存する
MySQLやPostgreSQLの名前で有名なDBといえば、バックエンド側にありますが、indexedDBはブラウザ側にデータが保存されます。感覚としては大容量のcookieです。保存できるデータ容量はユーザのHDDの環境に依存し、最大でHDDの50%分のデータ保存領域を割り当てられるみたいです。100GBのHDDがあれば、50GBまで保存できますので、とんでもない保存容量ですね。
また、同じくブラウザ側にデータを保存できる技術として、WebStorageと呼ばれる技術がありますが、あちらは5MBまでデータを保存できます。やはりindexedDBの方が、圧倒的に容量は大きいですね。
DB処理は非同期で行われる
DBへのアクセス・処理は非同期で行われます。Ajaxを使っているような感覚です。非同期なので、何らかの処理の間にindexedDBの処理を挟むときは気をつけなければなりません。例えば、indexedDBから値を取ってそれを操作するような処理を書いた時、値を取得する前に処理が進んでしまう、なんてことが起こりえます。
SQLは使わない
indexedDBの操作はSQLではなく、JavaScriptで行います。そのため、DB操作に慣れている人からすると、最初はやりにくいかもしれません。また、保存形式は「キー:値」なので、どちらかというとJSONを保存している感覚に近いかもしれません。
indexedDBのサンプルコード
indexedDBのサンプルコードを書いてみました。コピペでそのまま使うことができます。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <title>indexedDB動かしてみた</title> </head> <body> <input type="text" id="food" placeholder="食べ物"> <input type="text" id="price" placeholder="値段"> <button id="save">データ保存</button> <button id="get">データ取得</button> <button id="delDb">データベース削除</button> </body> <script> $(function(){ var dbName = 'sample'; var storeName = 'food'; $('#save').on('click', save); $('#get').on('click', get); $('#delDb').on('click', delDb); function save(){ let openReq = indexedDB.open(dbName); //DBに接続(なければ自動作成) openReq.onupgradeneeded = function(event){ //onupgradeneededはDBを作成したときに呼ばれる(他の場合もある。) let db = event.target.result; //オブジェクトストア(テーブル)の作成 db.createObjectStore(storeName, {keyPath: 'food'}); } openReq.onsuccess = function(event){ //DB作成or接続が成功した時 console.log('DBへの接続が成功しました'); let db = event.target.result; //ここからオブジェクトストアに情報を{キー: 値・・・}の形で入れる処理。 let data = {'food': $('#food').val(), 'price': $('#price').val()}; let trans = db.transaction(storeName, "readwrite"); let store = trans.objectStore(storeName); let putReq = store.put(data); putReq.onsuccess = function(){ console.log('正常にデータが追加されました。'); } putReq.onerror = function(){ console.log('データの追加に失敗しました。'); } } openReq.onerror = function(){ console.log('DBへの接続に失敗しました。'); } } function get(){ let openReq = indexedDB.open(dbName); openReq.onupgradeneeded = function(event){ let db = event.target.result; db.createObjectStore(storeName, {keyPath: 'food'}); alert('データが存在しません'); db.close(); } openReq.onsuccess = function(event){ let db = event.target.result; //ここから取り出し処理。 let trans = db.transaction(storeName); let store = trans.objectStore(storeName); //カーソルはストア内を1行ずつ読み出していくイメージ(多分) let getCursor = store.openCursor(); getCursor.onsuccess = function(event){ let cursor = event.target.result; let name, price; //ここから取得 if(cursor){ $('#food').val(cursor.key); $('#price').val(cursor.value.name); cursor.continue(); } } getCursor.onerror = function(){ console.log('データの取得に失敗しました。'); } } openReq.onerror = function(){ console.log('DBへの接続に失敗したか、DBが存在しません。'); } } function delDb(){ let deleteReq = indexedDB.deleteDatabase(dbName); deleteReq.onsuccess = function(){ console.log('DBを削除しました。'); } deleteReq.onerror = function(){ console.log('DBの削除に失敗しました。'); } } }); </script> </html>
まとめ
indexedDBの特徴やサンプルコードをご紹介しました。ブラウザ側で数百GBを保存するindexedDBを利用することで、cookieやWebStorageを使ったサイトとはまた違ったサイトが作れるかもしれません。自分ももっと使いこなせるようになりたいと思います。
最後までお読みいただきありがとうございました。