------indexed_db (HTML5) ......object で web local strageに 保存。 ---- 難しい、jsonやcsvで十分。
https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB#%E5%9F%BA%E6%9C%AC%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3 ......... indexedDB 説明
Indexed Database APIとはCookie や Web Storage と同じ Key-Value形式 で、ユーザーのブラウザー内にデータを永続的に保存するための方法です。 Web SQLデータベースと異なる。
script/data/idata1.html..... (https://www.tohoho-web.com/html5/indexed_db_api.html ... byとほほ ) OK 2024.6.20
https://qiita.com/nk5jp/items/612693f14ab020ca0593 .....qiita OK idata2.html ?????
https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB.....??
https://developer.mozilla.org/ja/docs/Web/API/IDBDatabase/transaction ....マニュアル
https://press.monaca.io/atsushi/24689 .....IndexedDB入門：Webブラウザの高機能データベースを使いこなそう
https://zenn.dev/batton/articles/d42b989587ed5e ..........IndexedDB触ってみた
https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API .....manual
https://developer.mozilla.org/ja/docs/Web/API/IDBIndex ....table hyouji
---------------------------------------------
// IDBTransaction table作成--------------------------------------------
var db;
var activeIndex;
var contacts = [
{ id: 1, fName: 'Brian', lName: 'Damage', jTitle: 'Master of Synergies', company: 'Acme', eMail: 'brian@acme.com', phone: '+441210000000', age: 37 },
{ id: 2, fName: 'Ted', lName: 'Maul', jTitle: 'Chief Reporter', company: 'Brass eye', eMail: 'ted@itsthenews.co.uk', phone: '+442081111111', age: 46 },
{ id: 3, fName: 'Mr', lName: 'Bungle', jTitle: 'Bad Clown', company: 'Stub a Dub', eMail: 'bungle@maiof.com', phone: '+1508888888', age: 50 },
{ id: 4, fName: 'Richard', lName: 'James', jTitle: 'Sound Engineer', company: 'Aphex Twin', eMail: 'richard@drukqs.com', phone: '+1517777777', age: 43 },
{ id: 5, fName: 'Brian', lName: 'Umlaut', jTitle: 'Shredmeister', company: 'Minions of metal', eMail: 'brian@raiseyourhorns.com', phone: '+14086666666', age: 40 },
{ id: 6, fName: 'Jonathan', lName: 'Crane', jTitle: 'Freelance Psychologist', company: 'Arkham', eMail: 'jon@arkham.com', phone: 'n/a', age: 38 },
{ id: 7, fName: 'Julian', lName: 'Day', jTitle: 'Schedule Keeper', company: 'Arkham', eMail: 'julian@arkham.com', phone: 'n/a', age: 43 },
{ id: 8, fName: 'Bolivar', lName: 'Trask', jTitle: 'Head of R&D', company: 'Trask', eMail: 'bolivar@trask.com', phone: '+14095555555', age: 55 },
{ id: 9, fName: 'Cloud', lName: 'Strife', jTitle: 'Weapons Instructor', company: 'Avalanche', eMail: 'cloud@avalanche.com', phone: '+17083333333', age: 24 },
{ id: 10, fName: 'Bilbo', lName: 'Bagshot', jTitle: 'Comic Shop Owner', company: 'Fantasy Bazaar', eMail: 'bilbo@fantasybazaar.co.uk', phone: '+12084444444', age: 43 }
];
// all the variables we need for the app
var tableEntry = document.querySelector('tbody');
window.onload = function() {
// In the following line, you should include the prefixes of implementations you want to test.
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
// DON'T use "var indexedDB = ..." if you're not in a function.
// Moreover, you may need references to some window.IDB* objects:
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
// (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)
var DBOpenRequest = window.indexedDB.open('contactsList', 1);
DBOpenRequest.onsuccess = function(event) {
db = DBOpenRequest.result;
populateData();
};
DBOpenRequest.onupgradeneeded = function(event) {
var db = event.target.result;
db.onerror = function(event) {
console.log('Error loading database.');
};
var objectStore = db.createObjectStore('contactsList', { keyPath: 'id' });
objectStore.createIndex('lName', 'lName', { unique: false });
objectStore.createIndex('fName', 'fName', { unique: false });
objectStore.createIndex('jTitle', 'jTitle', { unique: false });
objectStore.createIndex('company', 'company', { unique: false });
objectStore.createIndex('eMail', 'eMail', { unique: true });
objectStore.createIndex('phone', 'phone', { unique: false });
objectStore.createIndex('age', 'age', { unique: false });
};
function populateData() {
var transaction = db.transaction(['contactsList'], 'readwrite');
var objectStore = transaction.objectStore('contactsList');
for(i = 0; i < contacts.length ; i++) {
var request = objectStore.put(contacts[i]);
};
transaction.oncomplete = function() {
displayDataByKey();
};
};
var thControls = document.querySelectorAll('th');
for(i = 0; i < thControls.length; i++) {
var activeThead = thControls[i];
activeThead.onclick = function(e) {
activeIndex = e.target.innerHTML;
if(activeIndex == 'ID') {
displayDataByKey();
} else {
if(activeIndex == "Last name") {
displayDataByIndex('lName');
} else if(activeIndex == "First name") {
displayDataByIndex('fName');
} else if(activeIndex == "Job title") {
displayDataByIndex('jTitle');
} else if(activeIndex == "Company") {
displayDataByIndex('company');
} else if(activeIndex == "E-mail") {
displayDataByIndex('eMail');
} else if(activeIndex == "Phone") {
displayDataByIndex('phone');
} else if(activeIndex == "Age") {
displayDataByIndex('age');
}
}
}
}
function displayDataByKey() {
tableEntry.innerHTML = '';
var transaction = db.transaction(['contactsList'], 'readonly');
var objectStore = transaction.objectStore('contactsList');
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if(cursor) {
var tableRow = document.createElement('tr');
tableRow.innerHTML = '| ' + cursor.value.id + ' | '
+ '' + cursor.value.lName + ' | '
+ '' + cursor.value.fName + ' | '
+ '' + cursor.value.jTitle + ' | '
+ '' + cursor.value.company + ' | '
+ '' + cursor.value.eMail + ' | '
+ '' + cursor.value.phone + ' | '
+ '' + cursor.value.age + ' | ';
tableEntry.appendChild(tableRow);
cursor.continue();
} else {
console.log('Entries all displayed.');
}
};
};
function displayDataByIndex(activeIndex) {
tableEntry.innerHTML = '';
var transaction = db.transaction(['contactsList'], 'readonly');
var objectStore = transaction.objectStore('contactsList');
var myIndex = objectStore.index(activeIndex);
console.log(myIndex.name);
console.log(myIndex.objectStore);
console.log(myIndex.keyPath);
console.log(myIndex.multiEntry);
console.log(myIndex.unique);
var countRequest = myIndex.count();
countRequest.onsuccess = function() {
console.log(countRequest.result);
}
if(activeIndex == 'fName') {
var getRequest = myIndex.get('Mr');
getRequest.onsuccess = function() {
console.log(getRequest.result);
}
}
if(activeIndex == 'lName') {
var getKeyRequest = myIndex.getKey('Bungle');
getKeyRequest.onsuccess = function() {
console.log(getKeyRequest.result);
}
}
myIndex.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if(cursor) {
var tableRow = document.createElement('tr');
tableRow.innerHTML = '' + cursor.value.id + ' | '
+ '' + cursor.value.lName + ' | '
+ '' + cursor.value.fName + ' | '
+ '' + cursor.value.jTitle + ' | '
+ '' + cursor.value.company + ' | '
+ '' + cursor.value.eMail + ' | '
+ '' + cursor.value.phone + ' | '
+ '' + cursor.value.age + ' | ';
tableEntry.appendChild(tableRow);
cursor.continue();
} else {
console.log('Entries all displayed.');
}
};
};
};