indexedDB 공부 기록
<!DOCTYPE html>
<html>
<body>
<script>
const dbReq = indexedDB.open("tutorial", 2);
// open명령어 사용(이름,버전)
let db;
dbReq.addEventListener("success", function (event) {
db = event.target.result;
});
dbReq.addEventListener("error", function (event) {
//error handling 가능 모든 명령어에서 사용 가능
const error = event.target.error;
console.log("error", error.name);
});
dbReq.addEventListener("upgradeneeded", function (event) {
// 버전이 변화가 있을 때에만 실행되는 코드 upgradeneeded
db = event.target.result;
let oldVersion = event.oldVersion;
// 초기 값 0
if (oldVersion < 1) {
db.createObjectStore("topics", {
keyPath: "id",
autoIncrement: true,
});
}
// { keyPath: "id", autoIncrement: true }
// id를 식별자, key값으로 사용하겠다는 선언
// autoINcrement id가 중복되지 않도록 차근차근 증가시켜준다.
// topics 이름 선언한 것을 아래 하단에서 transaction에서 불러서 사용
if (oldVersion < 2) {
db.createObjectStore("topics2", {
keyPath: "id",
autoIncrement: true,
});
}
//if문을 순차적으로 나열하는 것으로 재방문/첫방문 케이스를 나눠서 기능 작동이 가능해짐
//upgradeneeded는 version이 달라질 때 최초 한 번만 실행되기 때문에 케이스 구분 가능
});
</script>
<input
type="button"
value="add"
onclick="
let store = db.transaction('topics', 'readwrite').objectStore('topics');
// transaction 첫번째 인자는 위에서 선언된 objectStore
// transaction 두번째 인자 readwrite 데이터를 입력, 쓰기
// objectStore안에 저장하고자 하는 store이름 선언
let addReq = store.add({
title:prompt('title?'),
body:prompt('body?')
});
//add함수로 objectStore에 추가
//안쪽에 원하는 형태의 데이터 형태 지정
addReq.addEventListener('success', function(event){
// console.log(event.target.result);
//이후 원하는 작업을 이쪽 함수에서 선언할 수 있음
});
"
/>
<input
type="button"
value="get"
onclick="
let id = Number(prompt('?id'));
let store = db.transaction('topics', 'readonly').objectStore('topics');
//readonly 읽기만 가능
let getReq = store.get(id);
getReq.addEventListener('success', function(event){
console.log(event.target.result);
});
"
/>
<input
type="button"
value="list"
onclick="
let store = db.transaction('topics', 'readonly').objectStore('topics');
let getAllReq = store.getAll();
//모든 데이터를 불러오는 함수 getAll
//데이터가 많아지면 cursor를 이용해서 불러와야함: 데이터를 쪼개서 가져오는 개념
getAllReq.addEventListener('success', function(event){
console.log(event.target.result);
});
"
/>
<input
type="button"
value="update"
onclick="
let store = db.transaction('topics', 'readwrite').objectStore('topics');
let putReq = store.put({
id:Number(prompt('id?')),
title:prompt('title?'),
body:prompt('body?')
});
//put 수정 함수
putReq.addEventListener('success',function(event){
console.log(event);
});
"
/>
<input
type="button"
value="delete"
onclick="
let store = db.transaction('topics', 'readwrite').objectStore('topics');
let deleteReq = store.delete(Number(prompt('id?')));
//delete 삭제 함수
deleteReq.addEventListener('success', function(event){
console.log(event);
});
"
/>
</body>
</html>
success,upgradeneeded,error 속성
transaction 사용(개체)
성실하게 살자 좀