IndexDB란?

• 브라우저에 객체를 저장할 수 있다.
• 트랜잭션(Transaction)을 지원한다.
• IndexedDB는 자바스크립트 기반의 객체 지향 데이터베이스입니다.
• 자바스크립트의 객체, 파일, blobs 등을 저장할 수 있다.

⇒ Index를 지원하기 때문에 많은 양의 구조화된 데이터를 다룰 때 적합하다

IndexedDB 작업순서

1. 데이터베이스 열기
2. 데이터베이스에 ObjectStore 생성
3. Transaction 시작 - 데이터 추가, 검색 작업 요청
4. index 마다 DOM 이벤트 수신해서 작업
5. 결과 수행

데이터베이스 열기

let request = indexDB.open(name, version)

• name : 문자열, 데이터베이스 이름
• version : 기본적으로 양의 정수 버전 1

ObjectStore란?

데이터를 담은 공간이며 여러개의 Key-Value 값으로 형성
ObjectStore의 이름은 고유해야 함

ObjectStor 생성하기 - .createObjectStore()

• .createObjectStore(tableName) 함수를 이용해서 userStore라는 이름으로 ObjectStore를 생성하고 users 라는 테이블을 만듫
• {keyPath: ‘id’} 로 “id”를 제공하는 데 필요한 인덱스 필드의 이름을 지정

// 첫번째 인자 값은 store 이름, keyPath 'id'
// 해당 아이디에 관해 찾을때 유용
database.createObjectStore('store name', {keyPath: 'id'})

// 연속된 숫자를 만들어 각 객체에 저장
// 숫자를 객체랑 상관없이 따로 저장
database.createObjectStore('store name', {autoIncrement: true})

// 숫자를 객체 프로퍼티 아이디에 저장
// 특정한 키에 해당하는 값을 모두 인덱싱하고 싶을 때 유용
database.createObjectStore('store name', {keyPath: 'id',
autoIncrement: true})

ObjectStore 생성하기 - .onupgradeneeded()

• .onupgradeneeded()으로 데이터베이스가 업그레이드 될 때 ObjectStore 생성 또는 수정 가능

onRequest.onupgradeneeded = () => {
	const database = onRequest.result
	const objectStore = database.createObjectStore('store name',
	{keyPath: 'id'})
}

Transaction - 데이터 추가, 읽기, 수정, 제거(CRUD)

모든 데이터 읽기 및 쓰기는 Transaction 내에서 수행됨

const trasaction = database.transation("objectStore Name",
'Transaction Mode')

• objectStore Name: 객체 저장소 이름
• Trasaction Mode: readonly, readwrite, versionchange

// users 테이블에서 transaction을 instance화
const transction = database.transaction('user', 'readwrite').objectStore('user')

1. 트랙잭션은 데이터베이스 객체 단위로 작동하므로 트랙잭션을 사용할 객체 저장소를 지정해줘야 함
2. readwrite 모드 사용 : 이미 존재하는 objectStore의 데이터를 읽고 다시 쓸 때

create, read, update, and delete (CRUD)

const todos = database.createObjectStore('todos', {autoIncrement: true})
function addTods() {
	const todo = {
		title: "todo1",
		text: "no.1 thing to do"
	}

	//todos ObjectStore에 readwrite(읽기, 쓰기) 권한으로 Transaction 시작하기
	const transaction = database.transaction("todos", 'readwrite')
	//objectStore() 함수로 todos 테이블 선택
	const todos = transaction.objectStore("todos")
	//원하는 객체 (todo)를 테이블에 추가
	todos.add(todo)
}

사용자 데이터 예시(Create)

var users = [ {
	id: 1,
	name: “Pete”,
	age: 35,
},
{
	id: 2,
	name: “Mark”,
	age: 23,
}];

//Add User Data
dbPromise.then(function(db) {
	const transaction = db.transaction(‘users’, 'readwrite')
	const store = transaction.objectStore(‘users’,{keyPath: ‘id’})
	store.add( { id: 3, name: ‘Frank’, age: 23} )
	return transaction.complete
}

⬇️ 추가된 내용 ⬇️

var users = [ {
	id: 1,
	name: “Pete”,
	age: 35,
},
{
	id: 2,
	name: “Mark”,
	age: 23,
},
{
	id: 3,
	name: “Frank”,
	age: 23
}];

사용자 데이터 읽기(Read)

objectStore.get(key)

// Get Data
dbPromise.then(function(db) {
	const transaction = db.transaction([‘users’], 'readwrite')
	const store = transaction.objectStore(‘users’)
return store.get(‘Frank’) //{ id: 3, name: ‘Frank’ , age: 23}

objectStore.getAll()

//Get all the Data
return store.getAll()  
// { id: 1, name: “Pete”, age: 35 }, {id: 2, name: “Mark”, age: 23 }, { id: 3, name: “Frank”, age: 23}

사용자 데이터 수정(Update)

//Update User Data
dbPromise.then(function(db) {
	const transaction = 
	db.transaction([‘users’], 
	'readwrite')
const store = 
	transaction.objectStore(‘users’)
	return store.put(‘Frank’)
}

사용자 데이터 삭제(Delete)

//Delete Data
dbPromise.then(function(db) {
	const transaction = db.transaction([‘users’], 'readwrite')
	const store = transaction.objectStore(‘users’)
	store.delete(‘Frank’)
	return transaction.complete;
}