<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="dexie.js"></script>
<script>
var db = new Dexie("schedule_db");
db.version(1).stores({
schedule: '++id,name,key,value,reg_date'
});
/* input部分 */
function saveData(mes){
alert(mes);
db.schedule.add({name: "ver1.0", key: document.getElementById("inputKey").value, value: document.getElementById("inputValue").value, reg_date: getCurrentTime()}).then(function(){
return db.schedule.get('aaa');
}).then(function(){
db.schedule.toArray().then(function(records){
alert(JSON.stringify(records));
}).catch(function(error) {
alert ("Ooops: " + error);
});
drawTable();
}).catch(function(error) {
alert ("Ooops: " + error);
});
}
function getDate(mes){
alert(mes);
db.schedule.get({key: "sss", value: "ccc"}).then (function(records){
if(records == null || records == ''){
alert ("No data found");
}else{
alert (JSON.stringify(records));
console.log(records);
alert(records.reg_date);
}
}).catch(function(error) {
alert ("Ooops: " + error);
});
}
function delItem(mes, id){
alert(mes);
db.schedule.where({id: id}).delete().then (function(records){
drawTable();
}).catch(function(error) {
alert ("Ooops: " + error);
});
}
function getCurrentTime() {
var now = new Date();
var res = "" + now.getFullYear() + "" + padZero(now.getMonth() + 1) +
"" + padZero(now.getDate()) + "_" + padZero(now.getHours()) + ":" +
padZero(now.getMinutes()) + ":" + padZero(now.getSeconds());
return res;
}
function padZero(num) {
var result;
if (num < 10) {
result = "0" + num;
} else {
result = "" + num;
}
return result;
}
</script>
</head>
<body>
<br>
Key<input name="key" value="" id="inputKey"> Value<input name="value" value="" id="inputValue"><button type="button" onclick="saveData('... seving your data into the DB')">Save</button><br>
<br>
<a href="javascript:getDate('
#################
);
if(key2 !== 'name'){
var th = document.createElement('th');
th.textContent = key2;
tr.appendChild(th);
}
}
}
if(i == 1){
table.appendChild(tr);
var tr = document.createElement('tr');
}
for(const key2 in records[key]) {
console.log(records[key][key2]);
if(key2 !== 'name'){
var td = document.createElement('td');
td.textContent = records[key][key2];
tr.appendChild(td);
}
}
table.appendChild(tr);
}
document.getElementById('maintable').appendChild(table);
}).catch(function(error) {
alert ("Ooops: " + error);
}
);
*/
drawTable();
function drawTable(){
//固定出力
var table2 = document.createElement('table');
table2.border = "1";
table2.width = "75%";
//ヘッダー設定
var tr_head = document.createElement('tr');
var th = document.createElement('th');
th.textContent = 'id';
tr_head.appendChild(th);
var th = document.createElement('th');
th.textContent = 'key';
tr_head.appendChild(th);
var th = document.createElement('th');
th.textContent = 'value';
tr_head.appendChild(th);
var th = document.createElement('th');
th.textContent = '';
tr_head.appendChild(th);
//ヘッダー追加
table2.appendChild(tr_head);
db.schedule.toArray().then(function(records){
for(const key in records) {
var tr = document.createElement('tr');
var td = document.createElement('td');
td.textContent = records[key]['id'];
tr.appendChild(td);
var td = document.createElement('td');
td.textContent = records[key]['key'];
tr.appendChild(td);
var td = document.createElement('td');
td.textContent = records[key]['value'];
tr.appendChild(td);
var td = document.createElement('td');
var text_menu = '<a href="javascript:delItem(\\'This will be deleted...\\', ' + records[key]['id'] + ')">Del</a>';
//リンクを追加
td.insertAdjacentHTML('afterbegin', text_menu);
tr.appendChild(td);
//行追加
table2.appendChild(tr);
}
//要素の中身を削除し掃除
document.getElementById('maintable2').textContent = null;
//追加
document.getElementById('maintable2').appendChild(table2);
}).catch(function(error) {
alert ("Ooops: " + error);
}
);
}
</script>
<br>
<br>
----------------<br>
<a href="./indexeddb_dexie_form.html">indexeddb_dexie_form.html</a><br>
<a href="./indexeddb_dexie_form2.html">indexeddb_dexie_form2.html</a><br>
<a href="./indexeddb_dexie_addupdate.html">indexeddb_dexie_addupdate.html</a><br>
<a href="./indexeddb_dexie_putupdate.html">indexeddb_dexie_putupdate.html</a><br>
</body>
</html>
==========
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="dexie.js"></script>
<script>
var db = new Dexie("schedule_db");
db.version(1).stores({
schedule: '++id,key,value,reg_date'
});
/* input部分 */
function saveData(mes){
alert(mes);
db.schedule.add({name: "ver1.0", key: document.getElementById("inputKey").value, value: document.getElementById("inputValue").value, reg_date: getCurrentTime()}).then(function(){
db.schedule.get('2').then(function(records){
alert(JSON.stringify(records));
}).catch(function(error) {
alert ("Ooops: " + error);
});
}).catch(function(error) {
alert ("Ooops2: " + error);
});
}
function getDate(mes){
alert(mes);
//JSON固定で検索
db.schedule.get({key: "sss", value: "ccc"}).then (function(records){
if(records == null || records == ''){
alert ("No data found");
}else{
alert (JSON.stringify(records));
console.log(records);
alert(records.reg_date);
}
}).catch(function(error) {
alert ("Ooops: " + error);
});
}
function getCurrentTime() {
var now = new Date();
var res = "" + now.getFullYear() + "" + padZero(now.getMonth() + 1) +
"" + padZero(now.getDate()) + "_" + padZero(now.getHours()) + ":" +
padZero(now.getMinutes()) + ":" + padZer
#################
... geting the date from your DB')">Get the date stored at localstrage</a><br>
<br>
https://qiita.com/butakoma/items/2c1c956b63fcf956a137<br>
https://qiita.com/sachiko-kame/items/aebd618ef39de982ed7b<br>
https://ja.javascript.info/indexeddb<br>
<a href="https://unpkg.com/dexie@3.0.2/dist/dexie.js">https://unpkg.com/dexie@3.0.2/dist/dexie.js</a><br>
https://b-risk.jp/blog/2020/07/indexeddb_and_dexie/<br>
https://blog.katsubemakito.net/html5/indexeddb1<br>
<br>
<br>
レベル schedule_db > schedule(table?) > json<br>
削除のレベルは表、行、DB？<br>
ローカルではページごとにDBが違う???<br>
ブラウザシャットダウンでデータが消えるがグループポリシーの為？<br>
<br>
stores()で一番最初に来るのが「主キー」<br>
putは追加しあれば更新、addは追加のみで同キーがあればエラー<br>
first()やlimit()やlast()<br>
toArray()ではobjが返るがobjは配列で引数0をつけてアクセス obj[0]<br>
get('aaa')はkey=aaaの値を持つ最初の行、get({key: "sss", value: "ccc"})で条件付可<br>
<br>
JSでAタグリンクを挿入するにはinsertAdjacentHTMLがよい<br>
生成したタグを追加する前に掃除するにはdocument.getElementById('xx').textContent = null;<br>
<br>
<div id ='maintable'></div>
<div id ='maintable2'></div>
<script>
/*
//コンソール出力
db.schedule.toArray().then(function(records){
let i = 0;
for(const key in records) {
i++;
for(const key2 in records[key]) {
if(i == 1){
console.log(key2);
}
console.log(records[key][key2]);
}
}
}).catch(function(error) {
alert ("Ooops: " + error);
}
);
//全出力
var table = document.createElement('table');
table.border = "1";
table.width = "75%";
db.schedule.toArray().then(function(records){
let i = 0;
for(const key in records) {
i++;
var tr = document.createElement('tr');
for(const key2 in records[key]) {
if(i == 1){
console.log(key2
#################
o(now.getSeconds());
return res;
}
function padZero(num) {
var result;
if (num < 10) {
result = "0" + num;
} else {
result = "" + num;
}
return result;
}
</script>
</head>
<body>
<br>
Key<input name="key" value="" id="inputKey"> Value<input name="value" value="" id="inputValue"><button type="button" onclick="saveData('... saving your data into the DB')">Save</button><br>
<br>
<a href="javascript:getDate('... geting the date from your DB')">Get the date stored at localstrage</a><br>
<br>
https://qiita.com/butakoma/items/2c1c956b63fcf956a137<br>
https://qiita.com/sachiko-kame/items/aebd618ef39de982ed7b<br>
https://ja.javascript.info/indexeddb<br>
<a href="https://unpkg.com/dexie@3.0.2/dist/dexie.js">https://unpkg.com/dexie@3.0.2/dist/dexie.js</a><br>
https://b-risk.jp/blog/2020/07/indexeddb_and_dexie/<br>
<br>
<br>
レベル schedule_db > schedule(table?) > json<br>
削除のレベルは表、行、DB？<br>
ローカルではページごとにDBが違う<br>
<br>
putは追加しあれば更新、addは追加のみで同キーがあればエラー<br>
first()やlimit()やlast()<br>
toArray()ではobjが返るがobjは配列で引数0をつけてアクセス obj[0]<br>
<br>
get('aaa')はkey=aaaの値を持つ最初の行、get({key: "sss", value: "ccc"})で条件付可<br>
<br>
<br>
<br>
----------------<br>
<a href="./indexeddb_dexie_form.html">indexeddb_dexie_form.html</a><br>
<a href="./indexeddb_dexie_form2.html">indexeddb_dexie_form2.html</a><br>
<a href="./indexeddb_dexie_addupdate.html">indexeddb_dexie_addupdate.html</a><br>
<a href="./indexeddb_dexie_putupdate.html">indexeddb_dexie_putupdate.html</a><br>
</body>
</html>
================
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="dexie.js"></script>
<script>
var db = new Dexie("schedule_db");
db.version(1).stores({
schedule: '++id,name,key,reg_date'
});
/* リンク部分 */
function setDate(m
#################
es){
alert(mes);
db.schedule.add({name: "sute", site: "pim", reg_date: getCurrentTime()}).then (function(id){
alert(id);
return db.schedule.get(id);
}).then(function (schedule) {
alert ("Date was set at " + schedule.reg_date);
}).catch(function(error) {
alert ("Ooops: " + error);
});
}
function delDate(mes){
alert(mes);
db.schedule.where({name: "sute"}).delete().then (function(){
return db.schedule.toArray();
}).then(function (records) {
if(records == null || records == ''){
alert ("No data found");
}else{
alert (records);
}
}).catch(function(error) {
alert ("Ooops: " + error);
});
}
function getDate(mes){
alert(mes);
db.schedule.where('name').equals('sute').toArray().then (function(records){
if(records == null || records == ''){
alert ("No data found");
}else{
console.log(records);
for (let i in records) {
alert(i + ' item has ' + records[i].reg_date);
}
}
}).catch(function(error) {
alert ("Ooops: " + error);
});
}
function getCurrentTime() {
var now = new Date();
var res = "" + now.getFullYear() + "" + padZero(now.getMonth() + 1) +
"" + padZero(now.getDate()) + "_" + padZero(now.getHours()) + ":" +
padZero(now.getMinutes()) + ":" + padZero(now.getSeconds());
return res;
}
function padZero(num) {
var result;
if (num < 10) {
result = "0" + num;
} else {
result = "" + num;
}
return result;
}
</script>
</head>
<body>
<a href="javascript:setDate('... setting the date into your DB')">Set date for localstrage</a><br>
<a href="javascript:delDate('... deleting the date into your DB')">Delete date for localstrage</a><br>
<a href="javascript:getDate('... geting the date from your DB')">Get the date stored at localstrage</a><br>
キーパスが自動で設定されこのスクリプトはnameがキーパス(一番最初のカラムだから？）<br>
キーパスの値が同じだとAddができない、例name=sute、++id
#################
es){
alert(mes);
db.schedule.add({name: "sute", site: "pim", reg_date: getCurrentTime()}).then (function(id){
alert(id);
return db.schedule.get(id);
}).then(function (schedule) {
alert ("Date was set at " + schedule.reg_date);
}).catch(function(error) {
alert ("Ooops: " + error);
});
}
function delDate(mes){
alert(mes);
db.schedule.where({name: "sute"}).delete().then (function(){
return db.schedule.toArray();
}).then(function (records) {
if(records == null || records == ''){
alert ("No data found");
}else{
alert (records);
}
}).catch(function(error) {
alert ("Ooops: " + error);
});
}
function getDate(mes){
alert(mes);
db.schedule.where('name').equals('sute').toArray().then (function(records){
if(records == null || records == ''){
alert ("No data found");
}else{
console.log(records);
for (let i in records) {
alert(i + ' item has ' + records[i].reg_date);
}
}
}).catch(function(error) {
alert ("Ooops: " + error);
});
}
function getCurrentTime() {
var now = new Date();
var res = "" + now.getFullYear() + "" + padZero(now.getMonth() + 1) +
"" + padZero(now.getDate()) + "_" + padZero(now.getHours()) + ":" +
padZero(now.getMinutes()) + ":" + padZero(now.getSeconds());
return res;
}
function padZero(num) {
var result;
if (num < 10) {
result = "0" + num;
} else {
result = "" + num;
}
return result;
}
</script>
</head>
<body>
<a href="javascript:setDate('... setting the date into your DB')">Set date for localstrage</a><br>
<a href="javascript:delDate('... deleting the date into your DB')">Delete date for localstrage</a><br>
<a href="javascript:getDate('... geting the date from your DB')">Get the date stored at localstrage</a><br>
キーパスが自動で設定されこのスクリプトはnameがキーパス(一番最初のカラムだから？）<br>
キーパスの値が同じだとAddができない、例name=sute、++id
#################
を使う
<br>
<br>
----------------<br>
<a href="./indexeddb_dexie_form.html">indexeddb_dexie_form.html</a><br>
<a href="./indexeddb_dexie_form2.html">indexeddb_dexie_form2.html</a><br>
<a href="./indexeddb_dexie_addupdate.html">indexeddb_dexie_addupdate.html</a><br>
<a href="./indexeddb_dexie_putupdate.html">indexeddb_dexie_putupdate.html</a><br>
</body>
</html>
==================
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="dexie.js"></script>
<script>
var db = new Dexie("schedule_db");
db.version(1).stores({
schedule: 'name,key,reg_date'
});
/* リンク部分 */
function setDate(mes){
alert(mes);
db.schedule.put({name: "sute", site: "pim", reg_date: getCurrentTime()}).then (function(){
return db.schedule.get('sute');
}).then(function (schedule) {
alert ("Date was set at " + schedule.reg_date);
}).catch(function(error) {
alert ("Ooops: " + error);
});
}
function delDate(mes){
alert(mes);
db.schedule.where({name: "sute"}).delete().then (function(){
return db.schedule.toArray();
}).then(function (records) {
if(records == null || records == ''){
alert ("No data found");
}else{
alert (records);
}
}).catch(function(error) {
alert ("Ooops: " + error);
});
}
function getDate(mes){
alert(mes);
db.schedule.where('name').equals('sute').toArray().then (function(records){
if(records == null || records == ''){
alert ("No data found");
}else{
alert (JSON.stringify(records));
console.log(records);
alert(records[0].reg_date);
}
}).catch(function(error) {
alert ("Ooops: " + error);
});
}
function getDateFirst(mes){
alert(mes);
db.schedule.where('name').equals('sute').first().then (function(records){
if(records == null || records == ''){
alert ("No data found");
}else{
alert (records.reg_date);
}
}).catch(function(error) {
alert ("Ooops: " + error);
});
}
function getCurrentTime() {
v
#################
ar now = new Date();
var res = "" + now.getFullYear() + "" + padZero(now.getMonth() + 1) +
"" + padZero(now.getDate()) + "_" + padZero(now.getHours()) + ":" +
padZero(now.getMinutes()) + ":" + padZero(now.getSeconds());
return res;
}
function padZero(num) {
var result;
if (num < 10) {
result = "0" + num;
} else {
result = "" + num;
}
return result;
}
</script>
</head>
<body>
<a href="javascript:setDate('... setting the date into your DB')">Set date for localstrage</a><br>
<a href="javascript:delDate('... deleting the date into your DB')">Delete date for localstrage</a><br>
<a href="javascript:getDate('... geting the date from your DB')">Get the date stored at localstrage</a><br>
クリックしたら日付がアップデートされる
<br>
<br>
----------------<br>
<a href="./indexeddb_dexie_form.html">indexeddb_dexie_form.html</a><br>
<a href="./indexeddb_dexie_form2.html">indexeddb_dexie_form2.html</a><br>
<a href="./indexeddb_dexie_addupdate.html">indexeddb_dexie_addupdate.html</a><br>
<a href="./indexeddb_dexie_putupdate.html">indexeddb_dexie_putupdate.html</a><br>
</body>
</html>
