IndexedDB ã¯ãã¦ã¼ã¶ã¼ã®ãã©ã¦ã¶ã¼å ã«ãã¼ã¿ãæ°¸ç¶çã«ä¿åããææ®µã§ãããããã¯ã¼ã¯ã®ç¶æ ã«ãããããé«åº¦ãªåãåããæ©è½ãæã¤ã¦ã§ãã¢ããªã±ã¼ã·ã§ã³ã使ã§ãã¾ãã®ã§ãã¢ããªã±ã¼ã·ã§ã³ããªã³ã©ã¤ã³ã¨ãªãã©ã¤ã³ã®ä¸¡æ¹ã§åä½ããããã«ãªãã¾ãã
ãã®è¨äºã«ã¤ãã¦ãã®ãã¥ã¼ããªã¢ã«ã§ã¯ãIndexedDB ã®éåæ API ã®ä½¿ãæ¹ãè¦ã¦ããã¾ããIndexedDB ã«ã¤ãã¦è©³ãããªãå ´åã¯ãå§ãã« IndexedDB ã®ä¸»ãªç¹å¾´ã¨åºæ¬ç¨èªããèªã¿ãã ããã
IndexedDB API ã®ãªãã¡ã¬ã³ã¹ããã¥ã¡ã³ãã¨ãã¦ãIndexedDB API ã®è¨äºã¨ãã®ãµãè¨äºãã覧ãã ããããã®è¨äºã§ã¯ãIndexedDB ã§ä½¿ç¨ããããªãã¸ã§ã¯ãã®ç¨®é¡ã¨ãéåæ API ã®ã¡ã½ããã«ã¤ãã¦èª¬æãã¾ã (åæ API ã¯ä»æ§ããåé¤ããã¾ãã)ã
åºæ¬ãã¿ã¼ã³IndexedDB ã§æ¨å¥¨ãããåºæ¬ãã¿ã¼ã³ã¯ã以ä¸ã®ããã«ãªãã¾ãã
ãããã®ä¸»è¦ãªæ¦å¿µãè¸ã¾ãããã¨ã§ãããå ·ä½çãªæç¶ããçè§£ã§ãã¾ãã
ã¹ãã¢ã使ããã³æ§ç¯ãã ãã¼ã¿ãã¼ã¹ãéãããã»ã¹å ¨ä½ã¯ä»¥ä¸ã®ããã«ãã¦å§ãã¾ãã
// ãã¼ã¿ãã¼ã¹ãéã
const request = window.indexedDB.open("MyTestDatabase", 3);
ãããã¾ãã? ãã¼ã¿ãã¼ã¹ãéããã¨ãä»ã®æä½ã¨åæ§ã§ãããããªã¯ã¨ã¹ãããå¿ è¦ã§ãã
ãã¼ã¿ãã¼ã¹ãéããªã¯ã¨ã¹ãã¯ãããã«ã¯ãã¼ã¿ãã¼ã¹ãéããããã©ã³ã¶ã¯ã·ã§ã³ãéå§ãããã¯ãã¾ãããopen()
颿°ãå¼ã³åºãã¨ãçµæ (æå) ã¾ãã¯ã¤ãã³ãã¨ãã¦æ±ãã¨ã©ã¼å¤ãä¼´ã IDBOpenDBRequest
ãªãã¸ã§ã¯ããè¿ãã¾ããIndexedDB ã®ã»ã¨ãã©ã®ä»ã®éåæé¢æ°ãåæ§ã§ãããçµæã¾ãã¯ã¨ã©ã¼ãä¼´ã IDBRequest
ãªãã¸ã§ã¯ããè¿ãã¾ããopen 颿°ã®çµæã¯ IDBDatabase
ã®ã¤ã³ã¹ã¿ã³ã¹ã§ãã
open ã¡ã½ããã®ç¬¬ 2 弿°ã¯ããã¼ã¿ãã¼ã¹ã®ãã¼ã¸ã§ã³ã§ãããã¼ã¿ãã¼ã¹ã®ãã¼ã¸ã§ã³ã¯ããã¼ã¿ãã¼ã¹ã®ã¹ãã¼ããããªãã¡ãã¼ã¿ãã¼ã¹å
ã®ãªãã¸ã§ã¯ãã¹ãã¢ã¨ãã®æ§é ãæ±ºå®ãã¾ãããã¼ã¿ãã¼ã¹ãåå¨ããªãå ´åã« open
æä½ã§ãã¼ã¿ãã¼ã¹ã使ãããã¨ãonupgradeneeded
ã¤ãã³ããçºçãããã®ã¤ãã³ããã³ãã©ã¼ã§ãã¼ã¿ãã¼ã¹ã®ã¹ãã¼ãã使ãããã¨ãã§ãã¾ãããã¼ã¿ãã¼ã¹ãåå¨ããå ´åã«å¾æ¥ããé«ããã¼ã¸ã§ã³çªå·ãæå®ããã¨ãããã« onupgradeneeded
ã¤ãã³ããçºçãã¦ããã®ã¤ãã³ããã³ãã©ã¼ã§æ´æ°ãããã¹ãã¼ããæä¾ãããã¨ãã§ãã¾ãã詳ããã¯ãå¾ã»ã©ãã¼ã¿ãã¼ã¹ã®ãã¼ã¸ã§ã³ã®ä½æã¨æ´æ°ã§èª¬æãã¾ããã¾ãã IDBFactory.open
ã®ãªãã¡ã¬ã³ã¹ãã¼ã¸ãã覧ãã ããã
è¦å: ãã¼ã¸ã§ã³çªå·ã¯ unsigned long long
åã®æ°å¤ã§ãããã¨ã¦ã大ããæ´æ°ã«ãããã¨ãã§ãã¾ããã¾ãæµ®åå°æ°ç¹æ°å¤ã¯ä½¿ç¨ã§ããã使ç¨ããå ´å㯠upgradeneeded
ã¤ãã³ããçºçããããã£ã¨ãè¿ãå°ããªæ°å¤ã«å¤æããã¦ãã©ã³ã¶ã¯ã·ã§ã³ãå§ã¾ãã§ãããããã£ã¦ãä¾ãã°ãã¼ã¸ã§ã³çªå·ã¨ã㦠2.4 ã使ç¨ããªãã§ãã ããã const request = indexedDB.open("MyTestDatabase", 2.4); // è¡ã£ã¦ã¯ããã¾ããããã¼ã¸ã§ã³ã¯ 2 ã«ä¸¸ãããã¾ã
ã»ã¼ãã¹ã¦ã®ãªã¯ã¨ã¹ãçæã«åããã¦å§ãã«è¡ããããã¨ã¯ãæåããã³ã¨ã©ã¼ã®ãã³ãã©ã¼ãçæãããã¨ã§ãããã
request.onerror = (event) => {
// request.error ã«å¯¾ãã¦è¡ããã¨!
};
request.onsuccess = (event) => {
// request.result ã«å¯¾ãã¦è¡ããã¨!
};
2 ã¤ã®é¢æ° onsuccess()
㨠onerror()
ã®ã©ã¡ããå¼ã³åºãããã®ã§ããã? ãã¹ã¦ãæåããã¨æåã¤ãã³ã (ããªãã¡ type
ããããã£ã "success"
ã§ãã DOM ã¤ãã³ã) ããrequest
ã target
ã¨ãã¦çºçãã¾ããã¤ãã³ããçºçãã㨠request
ã® onsuccess()
颿°ããsuccess ã¤ãã³ãã弿°ã¨ãã¦å¼ã³åºããã¾ãã䏿¹ãä½ããã®åé¡ãããå ´åã¯ã¨ã©ã¼ã¤ãã³ã (ããªãã¡ type
ããããã£ã "error"
ã§ãã DOM ã¤ãã³ã) ã request
ã§çºçãã¾ããããã¯ãã¨ã©ã¼ã¤ãã³ãã弿°ã¨ã㦠onerror()
颿°ãå¼ã³åºãã¾ãã
IndexedDB API ã¯å¿ è¦ãªã¨ã©ã¼å¦çãæå°éã«ããããè¨è¨ããã¦ãã¾ãã®ã§ãå¤ãã®ã¨ã©ã¼ã¤ãã³ããè¦ããã¨ã¯ãªãã§ããã (å°ãªãã¨ããAPI ã«æ £ãã¦ããªããã°)ãããããã¼ã¿ãã¼ã¹ãéãå ´åã¯ãã¨ã©ã¼ã¤ãã³ããçºçããä¸è¬çãªç¶æ³ãããã¾ãããã£ã¨ãå¤ãã§ãããåé¡ã¯ããã¼ã¿ãã¼ã¹ã使ãã許å¯ãã¦ã¼ã¶ã¼ãã¦ã§ãã¢ããªã«ä¸ããªãã£ããã¨ã§ããIndexedDB ã®ä¸»è¦ãªè¨è¨ç®æ¨ã®ã²ã¨ã¤ãããªãã©ã¤ã³ã§ä½¿ç¨ããããã«å¤§éã®ãã¼ã¿ãä¿åã§ããããã«ãããã¨ã§ãã(åãã©ã¦ã¶ã¼ã§ã©ãã ãã®éã®ã¹ãã¬ã¼ã¸ãæã¦ããã«ã¤ãã¦ã¯ããã©ã¦ã¶ã¼ã®ã¹ãã¬ã¼ã¸å¶éã¨åé¤åºæºãã¼ã¸å ã®ã©ãã ãã®ãã¼ã¿ãæ ¼ç´ã§ããããã覧ãã ãã)
åºåãããã¯ã¼ã¯ãã³ã³ãã¥ã¼ã¿ã¼ãæ±æãããæªæã®ããã¦ã§ããµã¤ãããã©ã¦ã¶ã¼ã許å¯ããããªããã¨ã¯æããã§ãã®ã§ããã©ã¦ã¶ã¼ã¯ ã¦ã§ãã¢ããªãåãã¦ã¹ãã¬ã¼ã¸ç¨ã« IndexedDB ãéããã¨ããã¨ãã«ãã¦ã¼ã¶ã¼ã¸ããã³ããã表示ãã¾ããã¦ã¼ã¶ã¼ã¯ã¢ã¯ã»ã¹ã許å¯ã¾ãã¯æå¦ã§ãã¾ããã¾ããã©ã¦ã¶ã¼ã®ãã©ã¤ãã·ã¼ã¢ã¼ãã§ã® IndexedDB ã¹ãã¬ã¼ã¸ã¯ãå¿åã®ã»ãã·ã§ã³ãéããã¾ã§ã®éã ãã¡ã¢ãªã¼ä¸ã«åå¨ãã¾ãã
ã¦ã¼ã¶ã¼ããã¼ã¿ãã¼ã¹ä½æã®è¦æ±ã許å¯ãã¦ãæåã³ã¼ã«ããã¯ãå®è¡ããæåã¤ãã³ããåãåã£ãã¨æ³å®ãã¾ããæ¬¡ã¯ä½ãè¡ãã®ã§ãããã? 以ä¸ã®ãªã¯ã¨ã¹ã㯠indexedDB.open()
ã®å¼ã³åºããä¼´ã£ã¦çæããã¦ãããrequest.result
㯠IDBDatabase
ã®ã¤ã³ã¹ã¿ã³ã¹ã§ãã®ã§ã以éã®ããã«ãããä¿åããããã¨ã¯ç¢ºå®ã§ãããã£ã¦ãã³ã¼ãã¯ä»¥ä¸ã®ããã«ãªãã§ãããã
let db;
const request = indexedDB.open("MyTestDatabase");
request.onerror = (event) => {
console.error(
"ãªãç§ã® ã¦ã§ãã¢ããªã§ IndexedDB ã使ããã¦ãããªãã®ã§ãã?!",
);
};
request.onsuccess = (event) => {
db = event.target.result;
};
ã¨ã©ã¼ãå¦çãã
åè¿°ã®ã¨ãããã¨ã©ã¼ã¤ãã³ãã¯ãããªã³ã°ãã¾ããã¨ã©ã¼ã¤ãã³ãã¯ã¨ã©ã¼ãçºçããããªã¯ã¨ã¹ããã¿ã¼ã²ããã«ãã¦ãããã«ãã©ã³ã¶ã¯ã·ã§ã³ãæçµçã«ãã¼ã¿ãã¼ã¹ãªãã¸ã§ã¯ãã¸ãããªã³ã°ãã¾ãããã¹ã¦ã®ãªã¯ã¨ã¹ãã«ã¨ã©ã¼ãã³ãã©ã¼ã追å ãããã¨ãé¿ãããå ´åã¯ã代ããã«ä»¥ä¸ã®ããã«ãã²ã¨ã¤ã®ã¨ã©ã¼ãã³ãã©ã¼ããã¼ã¿ãã¼ã¹ãªãã¸ã§ã¯ãã«è¿½å ãããã¨ãã§ãã¾ãã
db.onerror = (event) => {
// ãã®ãã¼ã¿ãã¼ã¹ã®ãªã¯ã¨ã¹ãã«å¯¾ãããã¹ã¦ã®ã¨ã©ã¼ç¨ã®
// æ±ç¨ã¨ã©ã¼ãã³ãã©ã¼!
console.error(`Database error: ${event.target.error?.message}`);
};
ãã¼ã¿ãã¼ã¹ãéãéã«ããçºçããã¨ã©ã¼ã®ã²ã¨ã¤ã VER_ERR
ã§ããããã¯ãã£ã¹ã¯ã«ä¿åããã¦ãããã¼ã¿ãã¼ã¹ã®ãã¼ã¸ã§ã³ããéããã¨ãã¦ãããã¼ã¸ã§ã³ãã大ãããã¨ã表ãã¾ããããã¯ãå¿
ãã¨ã©ã¼ãã³ãã©ã¼ã§å¦çããªããã°ãªããªãã¨ã©ã¼ã®å®ä¾ã§ãã
æ°ãããã¼ã¿ãã¼ã¹ã使ãããæ¢åã®ãã¼ã¿ãã¼ã¹ã®ãã¼ã¸ã§ã³ãæ´æ°ããããã (ãã¼ã¿ãã¼ã¹ãéãéã«ã徿¥ãã大ããªãã¼ã¸ã§ã³çªå·ãæå®ãã) 㨠onupgradeneeded
ã¤ãã³ããçºçãã¦ãrequest.result
(ããªãã¡ã以ä¸ã®ä¾ã® db
) ã«è¨å®ãã onversionchange
ã¤ãã³ããã³ãã©ã¼ã« IDBVersionChangeEvent ãªãã¸ã§ã¯ããæ¸¡ããã¾ããupgradeneeded
ã¤ãã³ãã®ãã³ãã©ã¼ã§ã¯ããã®ãã¼ã¸ã§ã³ã®ãã¼ã¿ãã¼ã¹ã§å¿
è¦ãªãªãã¸ã§ã¯ãã¹ãã¢ã使ãã¾ãã
// ãã®ã¤ãã³ãã¯ææ°ã®ãã©ã¦ã¶ã¼ã«ã®ã¿å®è£
ããã¦ãã¾ã
request.onupgradeneeded = (event) => {
// IDBDatabase ã¤ã³ã¿ã¼ãã§ã¤ã¹ã«ä¿åãã¾ã
const db = event.target.result;
// ãã®ãã¼ã¿ãã¼ã¹ç¨ã® objectStore ã使ãã¾ã
const objectStore = db.createObjectStore("name", { keyPath: "myKey" });
};
ãã®å ´åããã¼ã¿ãã¼ã¹ã¯æ§ãã¼ã¸ã§ã³ã®ãã¼ã¿ãã¼ã¹ç±æ¥ã®ãªãã¸ã§ã¯ãã¹ãã¢ããã§ã«æã£ã¦ãã¾ãã®ã§ããããã®ãªãã¸ã§ã¯ãã¹ãã¢ãå使ããå¿
è¦ã¯ããã¾ãããæ°ãããªãã¸ã§ã¯ãã¹ãã¢ã使ããããä¸è¦ã«ãªã£ãæ§ãã¼ã¸ã§ã³ã®ãªãã¸ã§ã¯ãã¹ãã¢ãåé¤ãããã¨ã ããå¿
è¦ã§ããæ¢åã®ãªãã¸ã§ã¯ãã¹ãã¢ã夿´ããªããã°ãªããªã (ä¾ãã° keyPath
ã夿´ãã) å ´åã¯ãå¤ããªãã¸ã§ã¯ãã¹ãã¢ãåé¤ãã¦ãããæ°ããªè¨å®ã§å使ããªããã°ãªããã¾ããã(ããã¯ãªãã¸ã§ã¯ãã¹ãã¢å
ã®æ
å ±ãåé¤ãã¾ãã®ã§æ³¨æãã¦ãã ãã! ãã®æ
å ±ãä¿åããªããã°ãªããªãå ´åã¯ããã¼ã¿ãã¼ã¹ãã¢ããã°ã¬ã¼ãããåã«ãã¼ã¿ãèªã¿åºãã¦ãå¥ã®å ´æã«ä¿åãã¦ãã ãã)
æ¢åã®åç§°ã使ç¨ãã¦ãªãã¸ã§ã¯ãã¹ãã¢ã使ãããã¨ãã (ãããã¯ãåå¨ããªãåç§°ã®ãªãã¸ã§ã¯ãã¹ãã¢ãåé¤ãããã¨ãã) ã¨ãã¨ã©ã¼ãçºçãã¾ãã
onupgradeneeded
ã¤ãã³ãããæ£å¸¸ã«æããå ´åã¯ããã¼ã¿ãã¼ã¹ãéããªã¯ã¨ã¹ãã® onsuccess
ãã³ãã©ã¼ãå®è¡ããã¾ãã
次ã«ããã¼ã¿ãã¼ã¹ãæ§ç¯ãã¾ããIndexedDB ã¯ãã¼ãã«ã§ã¯ãªããªãã¸ã§ã¯ãã¹ãã¢ã使ç¨ãã¦ãããã²ã¨ã¤ã®ãã¼ã¿ãã¼ã¹ã«è¤æ°ã®ãªãã¸ã§ã¯ãã¹ãã¢ãå«ãããã¨ãã§ãã¾ããå¤ããªãã¸ã§ã¯ãã¹ãã¢ã¸ä¿åãããã³ã«ãå¤ããã¼ã¨é¢é£ä»ãããã¾ãããªãã¸ã§ã¯ãã¹ãã¢ã§ãã¼ãã¹ã使ç¨ããããã¼ã¸ã§ãã¬ã¼ã¿ã¼ã使ç¨ãããã«å¿ãã¦ããã¼ãä¾çµ¦ããæ¹æ³ãããã¤ãåå¨ãã¾ãã
以ä¸ã®è¡¨ã§ããã¼ãä¾çµ¦ãããã¾ãã¾ãªæ¹æ³ã示ãã¾ãã
ãã¼ãã¹ (keyPath
) ãã¼ã¸ã§ãã¬ã¼ã¿ã¼ (autoIncrement
) 説æ ãªã ãªã ãã®ãªãã¸ã§ã¯ãã¹ãã¢ã¯ãæ°å¤ãæååã¨ãã£ãããªããã£ãå¤ãå«ããã©ã®ãããªç¨®é¡ã®å¤ã§ãä¿æã§ãã¾ããæ°ããªå¤ã®è¿½å ãæããã³ã«ãåå¥ã®ãã¼å¼æ°ãä¾çµ¦ããªããã°ãªãã¾ããã ãã ãªã ãã®ãªãã¸ã§ã¯ãã¹ãã¢ã¯ãJavaScript ãªãã¸ã§ã¯ãã®ã¿ä¿æã§ãã¾ãããªãã¸ã§ã¯ãã¯ãã¼ãã¹ã¨åãåç§°ã®ããããã£ãæããªããã°ãªãã¾ããã ãªã ãã ãã®ãªãã¸ã§ã¯ãã¹ãã¢ã¯ãã©ã®ãããªç¨®é¡ã®å¤ã§ãä¿æã§ãã¾ãããã¼ã¯èªåçã«çæããã¾ããã¾ããç¹å®ã®ãã¼ã使ç¨ãããå ´åã¯åå¥ã®ãã¼å¼æ°ãä¾çµ¦ã§ãã¾ãã ãã ãã ãã®ãªãã¸ã§ã¯ãã¹ãã¢ã¯ãJavaScript ãªãã¸ã§ã¯ãã®ã¿ä¿æã§ãã¾ããé常ã¯ãã¼ãçæããã¦ããªãã¸ã§ã¯ãã§ãã¼ãã¹ã¨åãåç§°ãæã¤ããããã£ã«ãçæããããã¼ã®å¤ãä¿åãã¾ãããã ããã®ãããªããããã£ããã§ã«åå¨ãã¦ããå ´åã¯ãçæãããæ°ããªãã¼ã§ã¯ãªãããã®ããããã£ã®å¤ããã¼ã¨ãã¦ä½¿ç¨ãã¾ãã
ãªãã¸ã§ã¯ãã¹ãã¢ãããªããã£ãã§ã¯ãªããªãã¸ã§ã¯ããä¿æãã¦ããã°ããªãã¸ã§ã¯ãã¹ãã¢ã§ã¤ã³ããã¯ã¹ã使ãããã¨ãã§ãã¾ããã¤ã³ããã¯ã¹ã¯ããªãã¸ã§ã¯ãã®ãã¼ã§ã¯ãªãä¿åããããªãã¸ã§ã¯ãã®ããããã£ã®å¤ã使ç¨ãã¦ããªãã¸ã§ã¯ãã¹ãã¢å ã«ä¿åãããå¤ãæ¤ç´¢ãããã¨ãå¯è½ã«ãã¾ãã
ããã«ã¤ã³ããã¯ã¹ã«ã¯ãä¿åããããã¼ã¿ã«åç´ãªå¶éãå¼·å¶ããæ©è½ãããã¾ããã¤ã³ããã¯ã¹ã使ããéã« unique ãã©ã°ãè¨å®ããã¨ãã¤ã³ããã¯ã¹ã®ãã¼ãã¹ã§åãå¤ãæã¤ãªãã¸ã§ã¯ããè¤æ°ä¿åãããªããã¨ããã¤ã³ããã¯ã¹ãä¿è¨¼ãã¾ãããã£ã¦ä¾ãã°äººã ã®éå£ã®æ å ±ãä¿æãããªãã¸ã§ã¯ãã¹ãã¢ãããå ´åã«ãåãã¡ã¼ã«ã¢ãã¬ã¹ãæã¤äººã 2 人åå¨ããªããã¨ãä¿è¨¼ãããå ´åã¯ããããå¼·å¶ããããã« unique ãã©ã°ãè¨å®ããã¤ã³ããã¯ã¹ã使ç¨ããã¨ããã§ãããã
ããã«ã¯æ··ä¹±ããããããã¾ããã®ã§ãã·ã³ãã«ãªä¾ã§æ¦å¿µã説æããã¹ãã§ããããå§ãã«ãä¾ã§ä½¿ç¨ãã顧客ãã¼ã¿ãããã¤ãå®ç¾©ãã¾ãã
// 顧客ãã¼ã¿ãã©ã®ãããªãã®ãã示ãã¾ã
const customerData = [
{ ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
{ ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" },
];
ãã¡ããã誰ãã®ç¤¾ä¼ä¿éçªå·ã顧客ãã¼ãã«ã®ä¸»ãã¼ã¨ãã¦ä½¿ç¨ããã¹ãã§ã¯ãªãã§ãã (社ä¼ä¿éçªå·ãæã£ã¦ããªã人ããã¾ã)ãå¹´é½¢ã®ä»£ããã«èªçæ¥ãä¿ç®¡ãããã¨ãã§ãã¾ããããããã®ä¸é©åãªé¸æã¯å©ä¾¿æ§ã®ããã«ç¡è¦ãã¦å ã¸é²ã¿ã¾ãããã
次ã«ããã¼ã¿ãä¿åãã IndexedDB ã使ããã¨ãããè¦ã¦ã¿ã¾ãããã
const dbName = "the_name";
const request = indexedDB.open(dbName, 2);
request.onerror = (event) => {
// ã¨ã©ã¼å¦ç
};
request.onupgradeneeded = (event) => {
const db = event.target.result;
// é¡§å®¢ã®æ
å ±ãä¿åãã objectStore ã使ãã¾ãã
// "ssn" ã¯ä¸æã§ãããã¨ãä¿è¨¼ããã¦ãã¾ã - å°ãªãã¨ããããã¯ãªããã¼ãã£ã³ã°ã§
// ãã®ããã«è¨ããã¾ããããªã®ã§ããã¼ãã¹ã¨ãã¦ä½¿ç¨ãã¾ãã
const objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
// 顧客ãååã§æ¤ç´¢ããããã®ã¤ã³ããã¯ã¹ã使ãã¾ãã
// éè¤ããå¯è½æ§ãããã¾ãã®ã§ã䏿ã®ã¤ã³ããã¯ã¹ã¨ãã¦ã¯ä½¿ç¨ã§ãã¾ããã
objectStore.createIndex("name", "name", { unique: false });
// 顧客ãã¡ã¼ã«ã¢ãã¬ã¹ã§æ¤ç´¢ããããã®ã¤ã³ããã¯ã¹ã使ãã¾ãã2 人ã®é¡§å®¢ãåãã¡ã¼ã«ã¢ãã¬ã¹ã
// 使ç¨ããªãããã«ãããã®ã§ã䏿ã®ã¤ã³ããã¯ã¹ã使ç¨ãã¾ãã
objectStore.createIndex("email", "email", { unique: true });
// ãã¼ã¿ã追å ããåã« objectStore ã®ä½æãå®äºãããããã
// transaction oncomplete ã使ç¨ãã¾ãã
objectStore.transaction.oncomplete = (event) => {
// æ°ãã«ä½æãã objectStore ã«å¤ãä¿åãã¾ãã
const customerObjectStore = db
.transaction("customers", "readwrite")
.objectStore("customers");
customerData.forEach((customer) => {
customerObjectStore.add(customer);
});
};
};
å
ã«ç¤ºããããã«ãonupgradeneeded
ã¯ãã¼ã¿ãã¼ã¹ã®æ§é ãå¤ãããã¨ãã§ããå¯ä¸ã®å ´æã§ããããã§ã¯ãªãã¸ã§ã¯ãã¹ãã¢ã®ä½æããã³åé¤ããã¤ã³ããã¯ã¹ã®æ§ç¯ããã³åé¤ãå¯è½ã§ãã
ãªãã¸ã§ã¯ãã¹ãã¢ã¯ createObjectStore()
ã 1 åå¼ã³åºãã¦ä½æãã¾ãããã®ã¡ã½ããã®å¼æ°ã¯ãã¹ãã¢ã®ååã¨å¼æ°ãªãã¸ã§ã¯ãã§ãã弿°ãªãã¸ã§ã¯ãã¯çç¥å¯è½ã§ãããéè¦ãªãªãã·ã§ã³ããããã£ãå®ç¾©ãããã使ããããªãã¸ã§ã¯ãã¹ãã¢ã®åãæ¹è¯ãããã¨ãã§ãã¾ãã®ã§ãã¨ã¦ãéè¦ã§ãããã®ä¾ã§ã¯ "customers" ã¨ããååã®ãªãã¸ã§ã¯ãã¹ãã¢ãè¦æ±ãã¦ãkeyPath
ãå®ç¾©ãã¦ãã¾ããkeyPath
ã¯ãã¹ãã¢å
ã§åã
ã®ãªãã¸ã§ã¯ãã䏿ã«ããããããã£ã§ãããã®ä¾ã§ã¯ã社ä¼ä¿éçªå·ã䏿ã§ãããã¨ãä¿è¨¼ããã¦ãã¾ãã®ã§ "ssn" ã«ãã¦ãã¾ãã"ssn" ã¯ãobjectStore
ã«ä¿åãããã¹ã¦ã®ãªãã¸ã§ã¯ãã«ä¸ããªããã°ãªãã¾ããã
ã¾ããä¿åããããªãã¸ã§ã¯ãã® name
ããããã£ãåç
§ããã"name" ã¨ããååã®ã¤ã³ããã¯ã¹ãè¦æ±ãã¦ãã¾ããcreateObjectStore()
ã¨åæ§ã« createIndex()
ãã使ãããã¤ã³ããã¯ã¹ã®åãæ¹è¯ããããã®çç¥å¯è½ãªå¼æ° options
ãªãã¸ã§ã¯ããæå®ã§ãã¾ããname
ããããã£ãæããªããªãã¸ã§ã¯ãã追å ãããã¨ã¯ã§ãã¾ããããã®ãªãã¸ã§ã¯ã㯠"name" ã¤ã³ããã¯ã¹å
ã«ç¾ãã¾ããã
以ä¸ã§ãªãã¸ã§ã¯ãã¹ãã¢ã«ä¿åããã顧客ãªãã¸ã§ã¯ãããssn
ã使ç¨ãã¦ç´æ¥ãã¾ãã¯ã¤ã³ããã¯ã¹ã使ç¨ãã¦ååããã¨ã«ãã¦ãåãåºããã¨ãã§ãã¾ãããã®ä»çµã¿ã«ã¤ãã¦è©³ããã¯ãã¤ã³ããã¯ã¹ã®ä½¿ç¨ãã覧ãã ããã
ãªãã¸ã§ã¯ãã¹ãã¢ã使ããã¨ãã« autoIncrement
ãã©ã°ãè¨å®ããã¨ããã®ãªãã¸ã§ã¯ãã¹ãã¢ã§ãã¼ã¸ã§ãã¬ã¼ã¿ã¼ã使ç¨ã§ãã¾ããããã©ã«ãã§ããã®ãã©ã°ã¯è¨å®ããã¾ããã
ãã¼ã¸ã§ãã¬ã¼ã¿ã¼ã使ç¨ããã¨ããªãã¸ã§ã¯ãã¹ãã¢ã«å¤ã追å ããã®ã«å¿ãã¦èªåçã«ãã¼ãçæããã¾ãããªãã¸ã§ã¯ãã¹ãã¢ã§ãã¼ã¸ã§ãã¬ã¼ã¿ã¼ãåãã¦ä½æããæç¹ã§ã¯ããã¼ã¸ã§ãã¬ã¼ã¿ã¼ã®å¤ã常㫠1 ã«ãªãã¾ããåºæ¬çã«ãæ°ãã«èªåçæããããã¼ã¯ãåã®ãã¼ãã 1 å¢å ããå¤ã«ãªãã¾ãããã¼ã¿ãã¼ã¹ã®ãã©ã³ã¶ã¯ã·ã§ã³ã䏿¢ããããªã©ããã¼ã¿ãã¼ã¹ã®æä½ãåãæ¶ãããå ´åãé¤ãããã¼ã¸ã§ãã¬ã¼ã¿ã¼ã®ç¾å¨ã®å¤ãæ¸å°ãããã¨ã¯ããã¾ãããå¾ã£ã¦ããªãã¸ã§ã¯ãã¹ãã¢ããã¬ã³ã¼ããåé¤ããããã¹ã¦ã®ã¬ã³ã¼ããã¯ãªã¢ããããã¦ãããªãã¸ã§ã¯ãã¹ãã¢ã®ãã¼ã¸ã§ãã¬ã¼ã¿ã¼ã«ã¯å½±é¿ãããã¾ããã
以ä¸ã®ããã«ããã¼ã¸ã§ãã¬ã¼ã¿ã¼ãæã¤å¥ã®ãªãã¸ã§ã¯ãã¹ãã¢ã使ã§ãã¾ãã
// indexedDB ãéãã¾ãã
const request = indexedDB.open(dbName, 3);
request.onupgradeneeded = (event) => {
const db = event.target.result;
// autoIncrement ãã©ã°ã« true ãè¨å®ããã"names" ã¨ããååã®ãªãã¸ã§ã¯ãã¹ãã¢ã使ãã¾ãã
const objStore = db.createObjectStore("names", { autoIncrement: true });
// "names" ãªãã¸ã§ã¯ãã¹ãã¢ã¯ãã¼ã¸ã§ãã¬ã¼ã¿ã¼ãæã£ã¦ãã¾ãã®ã§ãå¤ name ã®ãã¼ã¯èªåçã«çæããã¾ãã
// 追å ããã¬ã³ã¼ãã¯ä»¥ä¸ã®ããã«ãªãã¾ã:
// ãã¼ : 1 => å¤ : "Bill"
// ãã¼ : 2 => å¤ : "Donna"
customerData.forEach((customer) => {
objStore.add(customer.name);
});
};
ãã¼ã¸ã§ãã¬ã¼ã¿ã¼ã«ã¤ãã¦è©³ããã¯ã"W3C Key Generators" ãã覧ãã ããã
ãã¼ã¿ã®è¿½å ãèªã¿åããå餿°ãããã¼ã¿ãã¼ã¹ã§ä½ããè¡ããããã«ããåã«ããã©ã³ã¶ã¯ã·ã§ã³ãéå§ããªããã°ãªãã¾ããããã©ã³ã¶ã¯ã·ã§ã³ã¯ãã¼ã¿ãã¼ã¹ãªãã¸ã§ã¯ãããçãã¦ããããã©ã³ã¶ã¯ã·ã§ã³ã®å¯¾è±¡ã«ããããªãã¸ã§ã¯ãã¹ãã¢ãæå®ããªããã°ãªãã¾ããããã©ã³ã¶ã¯ã·ã§ã³ã®å
é¨ã§ã¯ããã¼ã¿ãä¿æãã¦ãããªãã¸ã§ã¯ãã¹ãã¢ã¸ã®ã¢ã¯ã»ã¹ãããªã¯ã¨ã¹ãã®å®è¡ãå¯è½ã§ããæ¬¡ã«ããã¼ã¿ãã¼ã¹ã«å¤æ´å¦çãè¡ãã®ãããããã¯ãã¼ã¿ãã¼ã¹ããèªã¿åºãã ãããæ±ºããªããã°ãªãã¾ããããã©ã³ã¶ã¯ã·ã§ã³ã¯ readonly
ãreadwrite
ãversionchange
ã® 3 ã¤ã®ã¢ã¼ãã使ç¨ã§ãã¾ãã
ãã¼ã¿ãã¼ã¹ã®ãã¹ãã¼ãããæ§é ã夿´ãã (ãªãã¸ã§ã¯ãã¹ãã¢ãã¤ã³ããã¯ã¹ã使ã¾ãã¯åé¤ãã) ã«ã¯ããã©ã³ã¶ã¯ã·ã§ã³ã versionchange
ã¢ã¼ãã«ããªããã°ãªãã¾ããããã®ãã©ã³ã¶ã¯ã·ã§ã³ã¯ãversion
ãæå®ã㦠IDBFactory.open
ã¡ã½ãããå¼ã³åºããã¨ã«ãã£ã¦éãã¾ãã
æ¢åã®ãªãã¸ã§ã¯ãã¹ãã¢ããã¬ã³ã¼ããèªã¿åºãã«ã¯ããã©ã³ã¶ã¯ã·ã§ã³ã§ readonly
ã¢ã¼ãã¾ã㯠readwrite
ã¢ã¼ãã使ç¨ã§ãã¾ããæ¢åã®ãªãã¸ã§ã¯ãã¹ãã¢ã«å¤æ´å¦çãè¡ãã«ã¯ããã©ã³ã¶ã¯ã·ã§ã³ã readwrite
ã¢ã¼ãã«ããªããã°ãªãã¾ããããã®ãããªãã©ã³ã¶ã¯ã·ã§ã³ã¯ IDBDatabase.transaction
ã§éãã¾ãããã®ã¡ã½ããã®å¼æ°ã¯ 2 ã¤ãããstoreNames
(ã¢ã¯ã»ã¹ããããªãã¸ã§ã¯ãã¹ãã¢ã®é
åã§å®ç¾©ãããã¹ã³ã¼ã) ã¨ãã©ã³ã¶ã¯ã·ã§ã³ã® mode
(readonly
ã¾ã㯠readwrite
) ã§ããã¾ããã®ã¡ã½ããã¯ãIDBTransaction.objectStore
ã¡ã½ãããæã¤ãã©ã³ã¶ã¯ã·ã§ã³ãªãã¸ã§ã¯ããè¿ãã¾ããobjectStore
ã¡ã½ããã¯ããªãã¸ã§ã¯ãã¹ãã¢ã«ã¢ã¯ã»ã¹ããããã«ä½¿ç¨ã§ãã¾ããããã©ã«ãã§ã¯ãã¢ã¼ããæå®ããªããã° readonly
ã¢ã¼ãã§ãã©ã³ã¶ã¯ã·ã§ã³ãéãã¾ãã
ã¡ã¢: Firefox 40 ã§ãIndexedDB ãã©ã³ã¶ã¯ã·ã§ã³ã¯ããã©ã¼ãã³ã¹ãåä¸ãããããã«ãæ°¸ç¶æ§ã®ä¿è¨¼ãç·©åãã¾ãã (Firefox bug 1112702 ãåç
§)ã以å㯠readwrite
ã¢ã¼ãã®ãã©ã³ã¶ã¯ã·ã§ã³ã§ããã¹ã¦ã®ãã¼ã¿ããã£ã¹ã¯ä¸ã«åæ ãããã¨ãä¿è¨¼ãããå ´åã«éã complete
çºçãã¾ãããFirefox 40 以éã§ã¯ OS ããã¼ã¿ã®æ¸ãè¾¼ã¿ãæç¤ºããæç¹ã§ complete
ãçºçãã¦ãããå®éã«ã¯ãã¼ã¿ããã£ã¹ã¯ä¸ã«åæ ããã¦ããªãå¯è½æ§ãããã¾ããããã«ãã complete
ã¤ãã³ããããæ©ãçºçããããã¾ããããã¼ã¿ããã£ã¹ã¯ä¸ã«åæ ããåã« OS ã®ã¯ã©ãã·ã¥ã黿ºæãçºçããã¨ãã©ã³ã¶ã¯ã·ã§ã³å
¨ä½ã失ãå±éºæ§ãè¥å¹²ããã¾ãããã®ãããªç ´å£çãªäºè±¡ã¯ã¾ãã§ãã®ã§ãã»ã¨ãã©ã®å©ç¨è
ã¯å¿é
ããå¿
è¦ããªãã§ããããä½ããã®çç± (ä¾ãã°ãå¾ã§åè¨ç®ã§ããªãéè¦ãªãã¼ã¿ãä¿åãã) ã§æ°¸ç¶æ§ãä¿è¨¼ããªããã°ãªããªãå ´åã¯ãå®é¨ç (鿍æº) 㪠readwriteflush
ã¢ã¼ã (IDBDatabase.transaction
ãåç
§) ã使ç¨ãã¦ãã©ã³ã¶ã¯ã·ã§ã³ãçæããã¨ãcomplete
ã¤ãã³ããçºçãããåã«ãã£ã¹ã¯ã¸ã®åæ ãå¼·å¶ããããã¨ãã§ãã¾ãã
ãã©ã³ã¶ã¯ã·ã§ã³ã§é©åãªã¹ã³ã¼ãããã³ã¢ã¼ãã使ç¨ããã¨ããã¼ã¿ã¢ã¯ã»ã¹ãé«éåã§ãã¾ãããã³ãã 2 ã¤ç´¹ä»ãã¾ãã
readwrite
ãã©ã³ã¶ã¯ã·ã§ã³ã¢ã¼ãã¯ãå¿
è¦ãªå ´åã«éãæå®ãã¾ããreadonly
ãã©ã³ã¶ã¯ã·ã§ã³ã¯ã¹ã³ã¼ããéãªã£ã¦ãè¤æ°åæã«å®è¡ã§ãã¾ãããreadwrite
ãã©ã³ã¶ã¯ã·ã§ã³ã¯ãªãã¸ã§ã¯ãã¹ãã¢ã«å¯¾ã㦠1 åããå®è¡ã§ãã¾ããã詳ããã¯ãIndexedDB ã®ä¸»ãªç¹å¾´ã¨åºæ¬ç¨èªã®è¨äºã§ ãã©ã³ã¶ã¯ã·ã§ã³ã®å®ç¾©ãã覧ãã ããããã¼ã¿ãã¼ã¹ã使ããããæ¸ãè¾¼ã¿ãè¡ãããã¨èããã§ããããããã¯ä»¥ä¸ã®ããã«ãã¾ãã
var transaction = db.transaction(["customers"], "readwrite");
// ã¡ã¢: å¤ãå®é¨çãªå®è£
ã§ã¯ã"readwrite" ã®ä»£ããã«éæ¨å¥¨ã®å®æ° IDBTransaction.READ_WRITE ã使ç¨ãã¾ãã
// ãã®ãããªå®è£
ããµãã¼ããããå ´åã¯ã以ä¸ã®ããã«è¨è¿°ãã¾ãã
// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);
transaction()
颿°ã¯å¼æ°ã 2 ã¤ãã (ã²ã¨ã¤ã¯çç¥å¯è½)ããã©ã³ã¶ã¯ã·ã§ã³ãªãã¸ã§ã¯ããè¿ãã¾ãã第 1 弿°ã¯ããã©ã³ã¶ã¯ã·ã§ã³ã®å¯¾è±¡ã«ãããªãã¸ã§ã¯ãã¹ãã¢ã®ãªã¹ãã§ãããã©ã³ã¶ã¯ã·ã§ã³ã§ãã¹ã¦ã®ãªãã¸ã§ã¯ãã対象ã«ãããå ´åã¯ç©ºã®é
åãæ¸¡ããã¨ãã§ãã¾ããã仿§æ¸ã§ã¯ç©ºã®é
åã«å¯¾ã㦠InvalidAccessError
ãçæãã¹ãã¨ããã¦ãã¾ãã®ã§ãè¡ããªãããã«ãã¦ãã ããã第 2 弿°ã«ä½ãæå®ããªããã°ãèªã¿åãå°ç¨ã®ãã©ã³ã¶ã¯ã·ã§ã³ã«ãªãã¾ããæ¸ãè¾¼ã¿ãè¡ãããå ´åã¯ã"readwrite"
ãã©ã°ã渡ããªããã°ãªãã¾ããã
以ä¸ã§ãåç¶æéãçè§£ããªããã°ãªããªããã©ã³ã¶ã¯ã·ã§ã³ãã§ãã¾ããããã©ã³ã¶ã¯ã·ã§ã³ã¯ãã¤ãã³ãã«ã¼ãã¨ã¨ã¦ã坿¥ã«çµã³ã¤ãã¦ãã¾ãããã©ã³ã¶ã¯ã·ã§ã³ã使ãã¦ãããã使ç¨ããã«ã¤ãã³ãã«ã¼ãã«æ»ãã¨ããã©ã³ã¶ã¯ã·ã§ã³ãéã¢ã¯ãã£ãç¶æ
ã«ãªãã¾ãããã©ã³ã¶ã¯ã·ã§ã³ãã¢ã¯ãã£ãã«ãç¶ããå¯ä¸ã®æ¹æ³ãããã©ã³ã¶ã¯ã·ã§ã³ã§ãªã¯ã¨ã¹ããè¡ããã¨ã§ãããªã¯ã¨ã¹ããå®äºãã㨠DOM ã¤ãã³ããçºçãã¦ããªã¯ã¨ã¹ããæåããã¨ä»®å®ããã°ãã³ã¼ã«ããã¯ã®å®è¡ä¸ã«ãã©ã³ã¶ã¯ã·ã§ã³ãæ¡å¼µããããã²ã¨ã¤ã®æ©ä¼ãå¾ããã¾ãããã©ã³ã¶ã¯ã·ã§ã³ãæ¡å¼µããã«ã¤ãã³ãã«ã¼ãã¸æ»ãã¨ããã©ã³ã¶ã¯ã·ã§ã³ã¯éã¢ã¯ãã£ãç¶æ
ã«ãªãã¾ããä¿çä¸ã®ãªã¯ã¨ã¹ããããéãããã©ã³ã¶ã¯ã·ã§ã³ã¯ã¢ã¯ãã£ãã§ããç¶ãã¾ãããã©ã³ã¶ã¯ã·ã§ã³ã®åç¶æéã¯ããã·ã³ãã«ã§ãããæ
£ããã¾ã§ã«ã¯å°ã
æéããããã§ããããããã«ããã¤ãã®ä¾ããçè§£ããå©ãã«ãªãã§ããããTRANSACTION_INACTIVE_ERR
ã¨ã©ã¼ã³ã¼ããè¦å§ããå ´åã¯ãä½ããã®èª¤ããããã§ãããã
ãã©ã³ã¶ã¯ã·ã§ã³ã¯ error
ãabort
ãcomplete
ã® 3 種é¡ã® DOM ã¤ãã³ããåãåãå¯è½æ§ãããã¾ããerror
ã¤ãã³ãããããªã³ã°ããæ¹æ³ã«ã¤ãã¦è©±ããã¨ããããã©ã³ã¶ã¯ã·ã§ã³ã¯ãçæãããããããªã¯ã¨ã¹ããç±æ¥ã®ã¨ã©ã¼ã¤ãã³ããåãåãã¾ããããç´°ãããã¤ã³ãã¨ãã¦ãã¨ã©ã¼æã®ããã©ã«ãã®åä½ã¯ãã¨ã©ã¼ãçºçãããã©ã³ã¶ã¯ã·ã§ã³ã䏿¢ããããã¨ã§ããã¨ã©ã¼ã¤ãã³ãã§å§ãã« stopPropagation()
ãå¼ã³åºãã¦ãä»ã®å¦çãè¡ãããã«ã¨ã©ã¼å¶å¾¡ãè¡ããªããã°ããã©ã³ã¶ã¯ã·ã§ã³å
¨ä½ããã¼ã«ããã¯ãã¾ãããã®è¨è¨ã«ãã£ã¦ã¨ã©ã¼å¶å¾¡ãèããããå¼·ãããã¾ãããããç´°ããã¨ã©ã¼å¶å¾¡ãã¨ã¦ãè¤éã«ãªãå ´åã¯ããã¼ã¿ãã¼ã¹ã«å¯¾ãã¦å
æ¬çãªã¨ã©ã¼å¶å¾¡ã追å ãããã¨ãã§ãã¾ããã¨ã©ã¼ã¤ãã³ããå¶å¾¡ããªãå ´åããã©ã³ã¶ã¯ã·ã§ã³ã§ abort()
ãå¼ã³åºããå ´åã¯ããã©ã³ã¶ã¯ã·ã§ã³ããã¼ã«ããã¯ããã¦ãabort
ã¤ãã³ããçºçãã¾ãããã以å¤ã®å ´åã¯ããã¹ã¦ã®ä¿çä¸ã®ãªã¯ã¨ã¹ããå®äºããå¾ã« complete
ã¤ãã³ããçºçãã¾ããå¤ãã®ãã¼ã¿ãã¼ã¹æä½ãè¡ã£ã¦ããå ´åã¯ãåã
ã®ãªã¯ã¨ã¹ãã§ã¯ãªããã©ã³ã¶ã¯ã·ã§ã³ã追跡ããã¨ã確å®ã«å¥å
¨æ§ãä¿é²ãã¾ãã
ãã©ã³ã¶ã¯ã·ã§ã³ã確ä¿ãããããããããªãã¸ã§ã¯ãã¹ãã¢ãåå¾ããªããã°ãªããªãã§ãããããã©ã³ã¶ã¯ã·ã§ã³ã¯ã使æã«æå®ãããªãã¸ã§ã¯ãã¹ãã¢ã ããæä¾ãã¾ããããã¦ãå¿ è¦ãªãã¼ã¿ããã¹ã¦è¿½å ã§ãã¾ãã
// ãã¹ã¦ã®ãã¼ã¿ããã¼ã¿ãã¼ã¹ã«è¿½å ãããã¨ãã«è¡ãå¦ç
transaction.oncomplete = (event) => {
console.log("All done!");
};
transaction.onerror = (event) => {
// ã¨ã©ã¼å¶å¾¡ãå¿ããã«!
};
const objectStore = transaction.objectStore("customers");
customerData.forEach((customer) => {
const request = objectStore.add(customer);
request.onsuccess = (event) => {
// event.target.result === customer.ssn;
};
});
add()
ãå¼ã³åºãã¦çæããããªã¯ã¨ã¹ãã® result
ã¯ã追å ãããå¤ã®ãã¼ã§ãããã£ã¦ãã®ã±ã¼ã¹ã§ã¯ããªãã¸ã§ã¯ãã¹ãã¢ã§ãã¼ãã¹ã¨ã㦠ssn
ããããã£ã使ç¨ãã¦ãã¾ãã®ã§ã追å ããããªãã¸ã§ã¯ãã® ssn
ããããã£ã¨çãããªãã¾ããadd()
颿°ã§ã¯ããã¼ã¿ãã¼ã¹å
ã«åä¸ã®ãã¼ãæã¤ãªãã¸ã§ã¯ããåå¨ããªããã¨ãè¦æ±ãã¾ãã®ã§æ³¨æãã¦ãã ãããæ¢åã®é
ç®ã夿´ãããã¨ããå ´åããæ¢åã®é
ç®ãããããé
æ
®ããªãå ´åã¯ããã¼ã¿ãã¼ã¹å
ã®é
ç®ã®æ´æ°ã®ç¯ã§èª¬æãã¦ãã put()
颿°ã使ç¨ã§ãã¾ãã
ãã¼ã¿ã®åé¤ãããä¼¼ã¦ãã¾ãã
const request = db
.transaction(["customers"], "readwrite")
.objectStore("customers")
.delete("444-44-4444");
request.onsuccess = (event) => {
// åé¤å®äº!
};
ãã¼ã¿ãã¼ã¹ããã®ãã¼ã¿ã®åå¾
ãã¼ã¿ãã¼ã¹ã¯æ
å ±ãæã£ã¦ãã¾ãã®ã§ãããã¤ãã®æ¹æ³ã§ãã¼ã¿ãèªã¿åºããã¨ãã§ãã¾ããã¾ãã¯ãåç´ã« get()
ã使ç¨ãã¾ãã以ä¸ã®ããã«ãå¤ãèªã¿åºãããã«ãã¼ãæä¾ããªããã°ãªãã¾ããã
const transaction = db.transaction(["customers"]);
const objectStore = transaction.objectStore("customers");
const request = objectStore.get("444-44-4444");
request.onerror = (event) => {
// ã¨ã©ã¼å¦ç!
};
request.onsuccess = (event) => {
// request.result ã«å¯¾ãã¦è¡ãå¦ç!
console.log(`Name for SSN 444-44-4444 is ${request.result.name}`);
};
"åç´ã«" èªã¿åºãã«ãå¤ãã®ã³ã¼ããããã¾ãããã¼ã¿ãã¼ã¹ã¬ãã«ã§ã¨ã©ã¼å¦çãè¡ãã¨ããã°ãã³ã¼ããå°ã ç縮ã§ãããã¨ã以ä¸ã«ç¤ºãã¾ãã
db
.transaction("customers")
.objectStore("customers")
.get("444-44-4444").onsuccess = (event) => {
console.log(`Name for SSN 444-44-4444 is ${event.target.result.name}`);
};
ã©ã®ããã«åä½ããããããã¾ãã? ãªãã¸ã§ã¯ãã¹ãã¢ã 1 ã¤ããããã¾ããã®ã§ããã©ã³ã¶ã¯ã·ã§ã³ã§å¿
è¦ã¨ãããªãã¸ã§ã¯ãã¹ãã¢ã®ãªã¹ããæ¸¡ããã«ãåç§°ãæååã§æ¸¡ãã¦ãã¾ããã¾ãããã¼ã¿ãã¼ã¹ããèªã¿åºãã ãã§ãã®ã§ã"readwrite"
ãã©ã³ã¶ã¯ã·ã§ã³ã¯ä¸è¦ã§ããã¢ã¼ããæå®ããã« transaction()
ãå¼ã³åºãã¨ã"readonly"
ãã©ã³ã¶ã¯ã·ã§ã³ã«ãªãã¾ããããã«ç´°ãããã¨ã§ãããå®ã¯ãªã¯ã¨ã¹ããªãã¸ã§ã¯ãã夿°ã«ä¿åãã¦ãã¾ãããDOM ã¤ãã³ãã¯ã¿ã¼ã²ããã¨ãã¦ãªã¯ã¨ã¹ããæã¡ã¾ãã®ã§ãresult
ããããã£ãå¾ãããã«ã¤ãã³ãã使ç¨ã§ãã¾ãã
èªã¿åºãããã¼ã¿ãæ´æ°ã㦠IndexedDB ã«æ¸ãæ»ãæ¹æ³ã¯ãã¨ã¦ãã·ã³ãã«ã§ããå ã»ã©ã®ãµã³ãã«ãå¤å°æ´æ°ãã¾ãããã
const objectStore = db
.transaction(["customers"], "readwrite")
.objectStore("customers");
const request = objectStore.get("444-44-4444");
request.onerror = (event) => {
// ã¨ã©ã¼å¦ç!
};
request.onsuccess = (event) => {
// æ´æ°ããããå¤ãå¤ãåå¾ãã¾ãã
const data = event.target.result;
// ãªãã¸ã§ã¯ãå
ã®å¤ãã叿ããå¤ã«æ´æ°ãã¾ãã
data.age = 42;
// æ´æ°ãããªãã¸ã§ã¯ããããã¼ã¿ãã¼ã¹ã«æ¸ãæ»ãã¾ãã
const requestUpdate = objectStore.put(data);
requestUpdate.onerror = (event) => {
// ã¨ã©ã¼ãçºçããå ´åã®å¦ç
};
requestUpdate.onsuccess = (event) => {
// æå - ãã¼ã¿ãæ´æ°ãã¾ãã!
};
};
ããã§ã¯ objectStore
ã使ãã¦ãssn ã®å¤ (444-44-4444
) ã§ç¹å®ããã顧客ã¬ã³ã¼ãã®åãåºããè¦æ±ãã¦ãã¾ãããªã¯ã¨ã¹ãã®çµæã夿° (data
) ã«ä»£å
¥ãã¦ããã®ãªãã¸ã§ã¯ãã® age
ããããã£ãæ´æ°ãã¾ããããã¦ã顧客ã¬ã³ã¼ãã objectStore
ã«æ¸ãæ»ãã¦åã®å¤ã䏿¸ãããã第 2 ã®ãªã¯ã¨ã¹ã (requestUpdate
) ã使ãã¾ãã
ã¡ã¢: ãã®ã±ã¼ã¹ã§ã¯ãã¼ã¿ãã¼ã¹ããèªã¿åºãã ãã§ãªãæ¸ãè¾¼ã¿ãè¡ãããã®ã§ãreadwrite
ãã©ã³ã¶ã¯ã·ã§ã³ãæå®ãã¾ããã
get()
ã使ç¨ããéã¯ãèªã¿åºããããã¼ãã©ãããç¥ã£ã¦ãããã¨ãå¿
è¦ã§ãããªãã¸ã§ã¯ãã¹ãã¢å
ã®ãã¹ã¦ã®å¤ãæ¸¡ãæ©ãããå ´åã¯ãã«ã¼ã½ã«ã使ç¨ã§ãã¾ãã以ä¸ã®ãããªãã®ã§ãã
const objectStore = db.transaction("customers").objectStore("customers");
objectStore.openCursor().onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
console.log(`Name for SSN ${cursor.key} is ${cursor.value.name}`);
cursor.continue();
} else {
console.log("No more entries!");
}
};
openCursor()
颿°ã¯ã弿°ãããã¤ãããã¾ãã第ä¸ã«ãããã«åå¾ãããã¼ã¬ã³ã¸ãªãã¸ã§ã¯ãã使ç¨ãã¦ãèªã¿åºãã¢ã¤ãã ã®ç¯å²ãå¶éã§ãã¾ãã第äºã«ãå復å¦çãè¡ãããæ¹åãæå®ã§ãã¾ããä¸è¨ã®ä¾ã§ã¯ããã¹ã¦ã®ãªãã¸ã§ã¯ããæé æ¹åã«å復ãã¾ããã«ã¼ã½ã«ã®æåã¤ãã³ãã®ã³ã¼ã«ããã¯ã¯ãããç¹æ®ã§ããã«ã¼ã½ã«ãªãã¸ã§ã¯ãèªä½ã¯ããªã¯ã¨ã¹ãã® result
ã§ã (ä¸è¨ã®ä¾ã§ã¯ç¥è¨æ³ã使ç¨ãã¦ãããevent.target.result
ã«ãªãã¾ã)ãããã¦å®éã®ãã¼ã¨å¤ã¯ãã«ã¼ã½ã«ãªãã¸ã§ã¯ãã® key
ããããã£ã¨ value
ããããã£ã§è¦ã¤ããã¾ããé²ã¿ç¶ãããå ´åã¯ãã«ã¼ã½ã«ã§ continue()
ãå¼ã³åºããªããã°ãªãã¾ããããã¼ã¿ã®çµç«¯ã«éãã (ã¾ãã¯ãopenCursor()
ãªã¯ã¨ã¹ãã«ä¸è´ããé
ç®ãåå¨ããªã) å ´åã¯æåã®ã³ã¼ã«ããã¯ãåãåãã¾ãããresult
ããããã£ã undefined
ã«ãªãã¾ãã
ã«ã¼ã½ã«ããã使ç¨ãããã¿ã¼ã³ã®ã²ã¨ã¤ãã以ä¸ã®ããã«ãªãã¸ã§ã¯ãã¹ãã¢å ã®å ¨ãã¼ã¿ãèªã¿åºãã¦ãé åã«è¿½å ãããã¨ã§ãã
const customers = [];
objectStore.openCursor().onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
customers.push(cursor.value);
cursor.continue();
} else {
console.log(`Got all customers: ${customers}`);
}
};
ã¡ã¢: ãã以å¤ã«ããã®ãããªå¦çãè¡ãããã« getAll()
(ããã³ getAllKeys()
)ãã使ç¨ãããã¨ãã§ãã¾ãã以ä¸ã®ã³ã¼ãã¯ãååºã®ä¾ã¨ã¾ã£ããåããã¨ãè¡ãã¾ãã
objectStore.getAll().onsuccess = (event) => {
console.log(`Got all customers: ${event.target.result}`);
};
ããã¯ãªãã¸ã§ã¯ããæ¨ªçãªæ¹æ³ã§ä½æãããããã«ã¼ã½ã«ã® value
ããããã£ã®æ¤ç´¢ã«é¢ãã¦ããã©ã¼ãã³ã¹ã³ã¹ããçºçãã¾ããä¾ãã° getAll()
ã使ç¨ããã¨ããGecko ã¯ãã¹ã¦ã®ãªãã¸ã§ã¯ããä¸åº¦ã«ä½æããªããã°ãªãã¾ãããä¾ãã°ããããã®ãã¼ãæ¤ç´¢ãããã¨ã«ã®ã¿é¢å¿ãããå ´åã¯ãgetAll()
ãããã«ã¼ã½ã«ã使ç¨ããæ¹ãã¨ã¦ãå¹ççã§ãããªãã¸ã§ã¯ãã¹ãã¢å
ã®å
¨ãã¼ã¿ã®é
åãå¾ããã¨ãã¦ããå ´åã¯ãgetAll()
ã使ç¨ãã¾ãããã
SSN ã¯å人ã䏿ã«èå¥ãã¾ãã®ã§ããã¼ã¨ã㦠SSN ã使ç¨ãã¦é¡§å®¢ãã¼ã¿ãä¿ç®¡ãããã¨ã¯è«ççã§ãã(ãã©ã¤ãã·ã¼ã®è¦³ç¹ã§ããã¢ã¤ãã¢ã§ãããã¯å¥ã®åé¡ã§ããããã®è¨äºã®å¯¾è±¡å¤ã§ã) 䏿¹ãååã§é¡§å®¢ãæ¤ç´¢ããªããã°ãªããªãå ´åã¯ãæ£ãããã®ãè¦ã¤ããã¾ã§ãã¼ã¿ãã¼ã¹å ã®ãã¹ã¦ã® SSN ã«å¯¾ãã¦å復å¦çãè¡ããªããã°ãªãã¾ããããã®æ¹æ³ã«ããæ¤ç´¢ã¯ã¨ã¦ãé ãããã代ããã«ã¤ã³ããã¯ã¹ã使ç¨ããã¨ããã§ãããã
// æåã«ã request.onupgradeneeded ã®ä¸ã«ã¤ã³ããã¯ã¹ãçæããã確èªãã¦ãã ããã
// objectStore.createIndex("name", "name");
// ã¾ã ã§ããã°ã DOMException ãçºçãã¾ãã
const index = objectStore.index("name");
index.get("Donna").onsuccess = (event) => {
console.log(`Donna's SSN is ${event.target.result.ssn}`);
};
"name"
ã¤ã³ããã¯ã¹ã¯ä¸æã§ã¯ãªãã®ã§ãname
ã« "Donna"
ãè¨å®ããã¦ããé
ç®ã¯è¤æ°åå¨ããå¯è½æ§ãããã¾ãããã®å ´åã¯å¸¸ã«ããã¼ã®å¤ããã£ã¨ãå°ãããã®ãåå¾ãã¾ãã
æå®ãã name
ã«è©²å½ãããã¹ã¦ã®é
ç®ã«ã¢ã¯ã»ã¹ããªããã°ãªããªãå ´åã¯ãã«ã¼ã½ã«ã使ç¨ãã¾ããã¤ã³ããã¯ã¹ä¸ã§ã2 種é¡ã®ã«ã¼ã½ã«ãéããã¨ãã§ãã¾ãããã¼ãã«ã«ã¼ã½ã«ã¯ãã¤ã³ããã¯ã¹ã®ããããã£ã¨ããªãã¸ã§ã¯ãã¹ãã¢å
ã®ãªãã¸ã§ã¯ããç´ã¥ãã¾ãããã¼ã«ã¼ã½ã«ã¯ãã¤ã³ããã¯ã¹ã®ããããã£ã¨ããªãã¸ã§ã¯ãã¹ãã¢å
ã«ãªãã¸ã§ã¯ããä¿åããããã«ä½¿ç¨ãããã¼ãç´ã¥ãã¾ãããããã®éãã以ä¸ã«ç¤ºãã¾ãã
// 顧客ã¬ã³ã¼ãã®ãªãã¸ã§ã¯ãå
¨ä½ãå¾ãããã«ããã¼ãã«ã«ã¼ã½ã«ã使ç¨ãã¾ãã
index.openCursor().onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
// cursor.key 㯠"Bill" ã®ãããªååãcursor.value ã¯ãªãã¸ã§ã¯ãå
¨ä½ã§ãã
console.log(
`Name: ${cursor.key}, SSN: ${cursor.value.ssn}, email: ${cursor.value.email}`,
);
cursor.continue();
}
};
// 顧客ã¬ã³ã¼ãã®ãªãã¸ã§ã¯ãã®ãã¼ãå¾ãããã«ããã¼ã«ã¼ã½ã«ã使ç¨ãã¾ãã
index.openKeyCursor().onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
// cursor.key 㯠"Bill" ã®ãããªååãcursor.primaryKey 㯠SSN ã§ãã
// ä¿åããããªãã¸ã§ã¯ãã®ä»ã®é¨åãç´æ¥åå¾ããæ¹æ³ã¯ããã¾ããã
console.log(`Name: ${cursor.key}, SSN: ${cursor.primaryKey}`);
cursor.continue();
}
};
ã«ã¼ã½ã«ã®ç¯å²ãæ¹åãæå®ãã
ã«ã¼ã½ã«ã§åç
§ããå¤ã®ç¯å²ãå¶éãããå ´åã¯ãIDBKeyRange
ãªãã¸ã§ã¯ãã使ç¨ãã¦ãopenCursor()
ã¾ã㯠openKeyCursor()
ã®ç¬¬ 1 弿°ã¨ãã¦æ¸¡ãã¾ããã²ã¨ã¤ã®ãã¼ã®ã¿è¨±å¯ãããã¼ã¬ã³ã¸ãä¸éã¾ãã¯ä¸éã®çæ¹ãæã¤ãã¼ã¬ã³ã¸ããããã¯ä¸éã¨ä¸éã®ä¸¡æ¹ãæã¤ãã¼ã¬ã³ã¸ã使ã§ãã¾ããå¢ç㯠"closed" (ããªãã¡ããã¼ã¬ã³ã¸ã¯æå®ããå¤ãå«ã) ã¾ã㯠"open" (ããªãã¡ããã¼ã¬ã³ã¸ã¯æå®ããå¤ãå«ã¾ãªã) ã®ã©ã¡ãã«ãã§ãã¾ããä½¿ãæ¹ã以ä¸ã«ç¤ºãã¾ãã
// "Donna" ã«ã®ã¿ä¸è´ãã¾ãã
const singleKeyRange = IDBKeyRange.only("Donna");
// "Bill" ããå
ã®ãã¹ã¦ã«ä¸è´ãã¾ãã"Bill" ãå«ã¿ã¾ãã
const lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
// "Bill" ããå
ã®ãã¹ã¦ã«ä¸è´ãã¾ãããã ã "Bill" ã¯å«ã¿ã¾ããã
const lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
// "Donna" ã¾ã§ã®ãã¹ã¦ã«ä¸è´ãã¾ãããã ã "Donna" ã¯å«ã¿ã¾ããã
const upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
// "Bill" ãã "Donna" ã¾ã§ã«ä¸è´ãã¾ãããã ã "Donna" ã¯å«ã¿ã¾ããã
const boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
// ããããã®ãã¼ã¬ã³ã¸ã使ç¨ããã«ã¯ãopenCursor()/openKeyCursor() ã®ç¬¬ 1 弿°ã¨ãã¦æ¸¡ãã¾ãã
index.openCursor(boundKeyRange).onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
// ä¸è´ããå ´åã®å¦çã
cursor.continue();
}
};
æé (ãã¹ã¦ã®ã«ã¼ã½ã«ã®ããã©ã«ãã®æ¹å) ã§ã¯ãªããéé ã«å復å¦çãè¡ãããå ´åãããããããã¾ãããæ¹åã®åãæ¿ãã¯ãopenCursor()
ã®ç¬¬ 2 弿°ã« prev
ãæ¸¡ããã¨ã§å®ç¾ãã¾ãã
objectStore.openCursor(boundKeyRange, "prev").onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
// é
ç®ã«å¯¾ãã¦è¡ãå¦ç
cursor.continue();
}
};
æ¹åãå¤ãããã ãã§è¡¨ç¤ºããçµæã¯å¶éããªãå ´åã¯ã第 1 弿°ã« null
ãæ¸¡ãã¾ãã
objectStore.openCursor(null, "prev").onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
// é
ç®ã«å¯¾ãã¦è¡ãå¦ç
cursor.continue();
}
};
"name"
ã¤ã³ããã¯ã¹ã¯ä¸æã§ã¯ããã¾ããã®ã§ãname
ãåãé
ç®ãè¤æ°åå¨ããå¯è½æ§ãããã¾ãããã¼ã¯å¸¸ã«ä¸æã§ãªããã°ãªããªãããããªãã¸ã§ã¯ãã¹ãã¢ã§ãã®ãããªç¶æ³ã¯çºçã§ããªããã¨ã«æ³¨æãã¦ãã ãããã¤ã³ããã¯ã¹ã«å¯¾ãã¦å復å¦çãè¡ãéã«éè¤ãåãé¤ãããå ´åã¯ãæ¹åã®å¼æ°ã« nextunique
(éåãã§ããã° prevunique
) ãæå®ãã¾ããnextunique
ã¾ã㯠prevunique
ã使ç¨ããã¨ã常ã«ãã¼ãæå°ã®é
ç®ãè¿ãã¾ãã
index.openKeyCursor(null, "nextunique").onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
// é
ç®ã«å¯¾ãã¦è¡ãå¦ç
cursor.continue();
}
};
æå¹ãªæ¹åã®å¼æ°ã«ã¤ãã¦ã¯ããIDBCursor 宿°ããã覧ãã ããã
ã¦ã§ãã¢ããªãå¥ã®ã¿ãã§éããã¦ããã¨ãã«ãã¼ã¸ã§ã³ã夿´ãããã¼ã¿ãã¼ã¹ã®ãã¼ã¸ã§ã³å¤æ´ãå¿
è¦ã§ããå ´åã« ã¦ã§ãã¢ããªã§ãã®ãããªãã¨ãè¡ãã¨ãã¯ãã¦ã¼ã¶ã¼ãå¤ããã¼ã¸ã§ã³ã® ã¦ã§ãã¢ããªãã¿ãã§éãã¦ããå ´åã«å¥ã®ã¿ãã§æ°ãããã¼ã¸ã§ã³ã®ã¢ããªãèªã¿è¾¼ãã ã¨ãã«çºçãããã¨ãèæ
®ããªããã°ãªãã¾ããããã¼ã¿ãã¼ã¹ã®å®éã®ãã¼ã¸ã§ã³ãã大ããªãã¼ã¸ã§ã³ãæå®ã㦠open()
ãå¼ã³åºãã¨ãã¯ããã¼ã¿ãã¼ã¹ã«å¤æ´ãæ½ãåã«ãä»ã«ãã¼ã¿ãã¼ã¹ãéãã¦ãããã®ãæç¤ºçã«è¦æ±ãèªããªããã°ãªãã¾ãã (ããããéãããåèªã¿è¾¼ã¿ããã¾ã§ãonblocked
ã¤ãã³ããçºçãã¾ã)ãä½¿ãæ¹ã以ä¸ã«ç¤ºãã¾ãã
const openReq = mozIndexedDB.open("MyTestDatabase", 2);
openReq.onblocked = (event) => {
// ä»ã®ã¿ãããã¼ã¿ãã¼ã¹ãèªã¿è¾¼ãã§ããå ´åã¯ãå¦çãé²ããåã«
// ããããéããªããã°ãªãã¾ããã
console.log("ãã®ãµã¤ããéãã¦ããä»ã®ã¿ãããã¹ã¦éãã¦ãã ãã!");
};
openReq.onupgradeneeded = (event) => {
// ä»ã®ãã¼ã¿ãã¼ã¹ã¯ãã¹ã¦éãããã¾ããããã¹ã¦ã®å¦çãè¡ãã¾ãã
db.createObjectStore(/* ⦠*/);
useDatabase(db);
};
openReq.onsuccess = (event) => {
const db = event.target.result;
useDatabase(db);
return;
};
function useDatabase(db) {
// å¥ã®ãã¼ã¸ããã¼ã¸ã§ã³å¤æ´ãæ±ããå ´åã«ãéç¥ãããããã«ããããã®ãã³ãã©ã¼ã追å ããããã«ãã¦ãã ããã
// ãã¼ã¿ãã¼ã¹ãéããªããã°ãªãã¾ããããã¼ã¿ãã¼ã¹ãéããã¨ãå¥ã®ãã¼ã¸ããã¼ã¿ãã¼ã¹ãã¢ããã°ã¬ã¼ãã§ãã¾ãã
// ãããè¡ããªããã°ãã¦ã¼ã¶ã¼ãã¿ããéããã¾ã§ãã¼ã¿ãã¼ã¹ã¯ã¢ããã°ã¬ã¼ãããã¾ããã
db.onversionchange = (event) => {
db.close();
console.log(
"æ°ãããã¼ã¸ã§ã³ã®ãã¼ã¸ã使ç¨å¯è½ã«ãªãã¾ãããåèªã¿è¾¼ã¿ãã¦ãã ãã!",
);
};
// ãã¼ã¿ãã¼ã¹ã使ç¨ããå¦ç
}
ãã§ã«éããã¦ããã¢ããªãæ°ãã«ãã¼ã¿ãã¼ã¹ãéããã¨ããã³ã¼ããéå§ããããå¤ããã¼ã¸ã§ã³ã®ãã¼ã¿ãã¼ã¹ã使ç¨ãã¦ããç¶æ³ã«å¯¾å¦ãããããVersionError
ã¨ã©ã¼ããªãã¹ã³ãã¾ãããã
IndexedDB ã¯åä¸çæå ã®ååã使ç¨ãã¾ããããªãã¡ãã¹ãã¢ã¨ãµã¤ãã®çæå (é常ããµã¤ãã®ãã¡ã¤ã³ã¾ãã¯ãµããã¡ã¤ã³) ãç´ã¥ãã¾ãã®ã§ãä»ã®çæå ããã¢ã¯ã»ã¹ãããã¨ã¯ã§ãã¾ããã
ãµã¼ããã¼ãã£ã® window ã³ã³ãã³ã (ä¾ãã° <iframe>
ã®ã³ã³ãã³ã) ã¯ããã©ã¦ã¶ã¼ããµã¼ããã¼ã㣠Cookie ãç¦æ¢ãã¦ããªãéããèªèº«ãåãè¾¼ã¾ãã¦ããçæå
ã® IndexedDB ã¹ãã¢ã«ã¢ã¯ã»ã¹ã§ãã¾ãï¼Firefox bug 1147821 ãã覧ãã ããï¼ã
ãã©ã¦ã¶ã¼ãçµäºããã¨ã (ä¾ãã°ã¦ã¼ã¶ã¼ããçµäºãããéããããã¿ã³ãã¯ãªãã¯ããã¨ã)ããã¼ã¿ãã¼ã¹ãå«ããã£ã¹ã¯ã¯äºæããåé¤ããããããã¼ã¿ãã¼ã¹ã¹ãã¢ã¸ã®ãã¼ããã·ã§ã³ã失ãããããæ¬¡ã®ãã¨ãèµ·ããããã¾ãã
AbortError
ã¨ã¨ãã«ä¸æããã¾ãããã®å¹æã¯åãã©ã³ã¶ã¯ã·ã§ã³ã§ IDBTransaction.abort()
ãå¼ã°ããã®ã¨åçã§ããIDBDatabase
ãªãã¸ã§ã¯ã㯠close
ã¤ãã³ããåãåãã¾ãã IDBDatabase.onclose
ã¤ãã³ããã³ãã©ã¼ã使ã£ã¦ãã®ã¤ãã³ããå¾
ã¡åãã§ãã¾ãããã®çµæããã¼ã¿ãã¼ã¹ãäºæããéãããããã¨ããããã¾ããä¸è¨ã®æåã¯æ°ããããã©ã¦ã¶ã¼ã® Firefox 50ãGoogle Chrome 31 以é (ãããã) ã®ãªãªã¼ã¹ã§å©ç¨ã§ãã¾ãã
ãã®ãã¼ã¸ã§ã³ã®ãã©ã¦ã¶ã¼ã®åã¯ããã©ã³ã¶ã¯ã·ã§ã³ã¯æé»è£¡ã«ä¸æããã close
ã¤ãã³ããçºè¡ããããäºæãã¬ãã¼ã¿ãã¼ã¹ã®åæ¢ãæ¤åºããæ¹æ³ã¯ããã¾ããã§ããã
ã¦ã¼ã¶ã¼ã¯ãã¤ã§ããã©ã¦ã¶ã¼ãçµäºãããã¨ãã§ãã¾ãã®ã§ãç¹å®ã®ãã©ã³ã¶ã¯ã·ã§ã³ãå®äºãããã¨ããã¦ã«ããããå®äºããªãã£ããã¨ãç¥ã£ãããããã¨ã¯ã§ãã¾ããããã®åä½ãæç¤ºãããã¨ãããã¤ãããã¾ãã
第ä¸ã«ããã¼ã¿ãã¼ã¹ã§ãããããã©ã³ã¶ã¯ã·ã§ã³ãçµäºããã¨ãã«ã常ã«ä¸è²«æ§ãããç¶æ ãä¿ã¤ããã«æ³¨æããã¹ãã§ããä¾ãã°ãã¦ã¼ã¶ã¼ãç·¨éå¯è½ãªé ç®ã®ãªã¹ããä¿åãã IndexedDB ã使ç¨ãã¦ããã¨æ³å®ãã¾ãããªãã¸ã§ã¯ãã¹ãã¢ãæ¶å»ãã¦ããæ°ããªãªã¹ããæ¸ãè¾¼ããã¨ã«ãããç·¨éå¾ã®ãªã¹ããä¿åãã¾ãããããã©ã³ã¶ã¯ã·ã§ã³ã§ãªãã¸ã§ã¯ãã¹ãã¢ãæ¶å»ãã¦ãå¥ã®ãã©ã³ã¶ã¯ã·ã§ã³ã§æ°ããªãªã¹ããæ¸ãè¾¼ãã¨ããã°ãæ¶å»ããå¾ãã¤æ¸ãè¾¼ãåã«ãã©ã¦ã¶ã¼ãéããããå±éºæ§ãããããã®å ´åã¯ç©ºã®ãã¼ã¿ãã¼ã¹ãæ®ãã¾ãããããé¿ããããã«ãæ¶å»ã¨æ¸ãè¾¼ã¿ãã²ã¨ã¤ã®ãã©ã³ã¶ã¯ã·ã§ã³ã«çµåãã¾ãããã
第äºã«ããã¼ã¿ãã¼ã¹ã®ãã©ã³ã¶ã¯ã·ã§ã³ã¨ unload
ã¤ãã³ããç´ã¥ããã¹ãã§ã¯ããã¾ããããã©ã¦ã¶ã¼ãéãããã¨ã§ unload
ã¤ãã³ããçºçããå ´åãunload
ã¤ãã³ããã³ãã©ã¼ã§ä½æãããã©ã³ã¶ã¯ã·ã§ã³ã¯å®äºãã¾ããããã©ã¦ã¶ã¼ã®ã»ãã·ã§ã³ã«ããã£ã¦æ
å ±ã管çããããã®ç´æçãªæ¹æ³ã¯ããã©ã¦ã¶ã¼ (ã¾ãã¯ç¹å®ã®ãã¼ã¸) ãéããã¨ãã«æ
å ±ãèªã¿è¾¼ãã§ãã¦ã¼ã¶ã¼ã¨ãã©ã¦ã¶ã¼ã¨ã®å¯¾è©±ã«å¿ãã¦æ´æ°ãã¦ããã©ã¦ã¶ã¼ (ã¾ãã¯ãã¼ã¸) ãéããã¨ãã«ä¿åããæµãã§ããããããããã¯åä½ããªãã§ãããããã¼ã¿ãã¼ã¹ã®ãã©ã³ã¶ã¯ã·ã§ã³ã¯ unload
ã¤ãã³ããã³ãã©ã¼ã§ä½æããã¾ããããããã¯éåæå¦çã§ãã®ã§ãå®è¡ã§ããããã«ãªãåã«ä¸æ¢ãããã§ãããã
å®ã¯é常ã®ãã©ã¦ã¶ã¼çµäºã§ãã£ã¦ããIndexedDB ã®ãã©ã³ã¶ã¯ã·ã§ã³ãå®äºããããä¿è¨¼ããææ®µã¯ããã¾ãããFirefox bug 870645 ãã覧ãã ãããé常ã®çµäºéç¥ã®åé¿çã¨ãã¦ããã©ã³ã¶ã¯ã·ã§ã³ã®ç¶æ³ã追跡ãã¦ãã¢ã³ãã¼ãæã«ãã©ã³ã¶ã¯ã·ã§ã³ãå®äºãã¦ããªããã¨ãã¦ã¼ã¶ã¼ã«è¦åããããã® beforeunload
ã¤ãã³ãã追å ããã¨ããã§ãããã
å°ãªãã¨ã䏿¢éç¥ã¨ IDBDatabase.onclose
ã追å ãããã¨ã§ããã¤èµ·ãã£ãã®ãããããã¾ãã
IndexedDB API ã使ç¨ããå®å ¨ãªä¾ãããã¾ãããã®ä¾ã§ã¯ãåºçç©ãæ ¼ç´ããåå¾ããããã« IndexedDB ã使ç¨ãã¦ãã¾ãã
é¢é£æ å ±å¿ è¦ã«å¿ãã¦ãããå¤ãã®æ å ±ãç¥ãããã®è¨äºéã§ãã
ãªãã¡ã¬ã³ã¹ ãã¥ã¼ããªã¢ã«ã¨ã¬ã¤ã ã©ã¤ãã©ãªã¼RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4