こんにちは、まいまいです。駆け出しプログラマとして日々努力しております。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を使ったサイトとはまた違ったサイトが作れるかもしれません。自分ももっと使いこなせるようになりたいと思います。
最後までお読みいただきありがとうございました。
