indexeddb
2021.02.07 20:03
로메오의 블로그 :: [Chrome] IndexedDB 사용하기 (tistory.com)
아래는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>IndexedDB</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
companyName: <input type="text" id="companyName"><br>
production: <input type="text" id="production"><br>
<button id="submit">입력</button>
<button id="clearAll">모두삭제</button>
<ul id="lists"></ul>
<script>
const DATABASE = 'MyDatabase';
const DB_VERSION = 1;
const DB_STORE_NAME = 'company';
var db;
openDB = () => {
// DB 생성
var req = indexedDB.open(DATABASE, DB_VERSION);
// DB 생성 성공
req.onsuccess = function (evt) {
db = this.result;
getAllData();
};
// DB 생성 오류
req.onerror = function (evt) {
console.error("indexedDB : ", evt.target.errorCode);
};
// DB 마그레이션
req.onupgradeneeded = function (evt) {
console.log("indexedDB.onupgradeneeded");
var store = evt.currentTarget.result.createObjectStore(DB_STORE_NAME,
{ keyPath: 'id', autoIncrement: true });
store.createIndex('company', 'company', { unique: true });
store.createIndex('production', 'production', { unique: false });
};
}
openDB()
// Store를 반환한다.
getObjectStore = (store_name, mode) => {
return db.transaction(store_name, mode).objectStore(store_name);
}
// 데이터 입력하기
$('#submit').on('click', () => {
const companyName = $('#companyName').val()
const production = $('#production').val()
if (!companyName) {
return alert('company name은 필수입니다.')
}
if (!production) {
return alert('production은 필수입니다.')
}
// 입력한 데이터를 추가한다.
let store = getObjectStore(DB_STORE_NAME, 'readwrite');
let req
const obj = {
company: companyName,
production: production
};
try {
req = store.add(obj);
} catch (e) { }
req.onsuccess = function (evt) {
console.log("입력 되었습니다.");
};
req.onerror = function () {
console.error(this.error);
};
})
// 모든 데이터를 가지고 온다.
getAllData = () => {
// get
store = getObjectStore(DB_STORE_NAME, 'readonly');
let req = store.openCursor();
let strBuffer = []
req.onsuccess = evt => {
const cursor = evt.target.result;
if (cursor) {
req = store.get(cursor.key);
req.onsuccess = function (evt) {
const value = evt.target.result;
strBuffer.push('<li>')
strBuffer.push(value.company + ' (' + value.production + ')')
strBuffer.push(' [<a href="#" data-delete="' + value.id + '">삭제</a>]')
strBuffer.push('</li>')
console.log(value)
}
cursor.continue();
}
$('#lists').html(strBuffer.join(''))
// 데이터를 삭제한다.
$('[data-delete]').on('click', evt => {
const id = $(evt.currentTarget).attr('data-delete')
store = getObjectStore(DB_STORE_NAME, 'readwrite');
store.delete(id)
.onsuccess = event => {
console.log('deleted')
}
})
}
}
// 데이터를 모두 삭제한다.
$('#clearAll').on('click', () => {
// clear
var store = getObjectStore(DB_STORE_NAME, 'readwrite');
var req = store.clear();
req.onsuccess = function (evt) {
console.log('clear')
};
req.onerror = function (evt) {
console.log('error')
};
})
</script>
</body>
</html>| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 1716 |
이건 비밀글이얍
 | J | 2004.04.23 | 2 |
| 1715 |
아저씨에게
[1] | ^&^ | 2004.04.25 | 3 |
| 1714 |
아저씨~
[1] | ^&^ | 2004.05.15 | 5 |
| 1713 | 다시 이곳으로... | WHRIA | 2024.03.02 | 6 |
| 1712 | 모든 연구 자료를 정리. 이것으로 마무리 짓기로. | WHRIA | 2024.03.03 | 14 |
| 1711 | MedicalPhoto MSVC 2015 와 최신 boost 로... | WHRIA | 2016.08.26 | 17 |
| 1710 | Visual Studio 설치후 Excel 2002 (XP) 종료시 에러 문제 | WHRIA | 2015.11.20 | 21 |
| 1709 | headless PC 를 위한 dummy plug in 을 구입해서 달다. | WHRIA | 2015.11.22 | 21 |
| 1708 | XP shutdown 시 강제종료 시키기 | WHRIA | 2016.08.16 | 21 |
| 1707 | XE 에 tinymce 에디터를 달다. | WHRIA | 2015.11.22 | 22 |
| 1706 |
USB 에뮬레이션 램디스트 imdisk
 | WHRIA | 2016.09.02 | 27 |
| 1705 | 학술저널 받는법 | WHRIA | 2015.11.30 | 28 |
| 1704 | imbalanced dataset | WHRIA | 2018.12.26 | 28 |
| 1703 | raid monitor | WHRIA | 2019.12.15 | 31 |
| 1702 | 지급명세서 | WHRIA | 2015.10.14 | 32 |
Storage - Apache Cordova