Indexed DB

# 참조 : https://www.youtube.com/watch?v=mHJDtDM_wHc 

# 참조 : https://seomal.com/map/1/231

 

1) 용량

Cookie는 수KB 만 저장 가능

Local Storage 는 수MB 저장 가능

IndexedDB (Web DB) 는 Chrome 은 디스크 80%, Firefox 는 50%, Safari 는 1GB 저장 가능

 

2) 서버 전송 여부

Cookie 는 자동 포함되서 전송되고, 나머지는 자동 전송안되고 프론트에서 수작업으로 보내야 함.

 

3) 저장 가능 타입

Cookie / LocalStorage 문자열만 저장되나, Indexed DB 는 DB 이므로 다양한 포맷 저장 가능

 

4) 동작주의

웹서버 필요. (Visual Studio Code 에서는 Live Server 설치후, html 오른쪽 클릭 메뉴에서 "Open with Live Server" 선택

ffile:/// 로는 보안때문인지 실행이 안됨 .

 

5) 구조

DB	Indexed DB
Database	Database
Table(Entity)	Object Store
Row(Attribue, Tuple)	Object

 

6) 명령

#1.Database 신규/기존 오픈 요청	const databaseopenrequest = indexedDB.open('myservicedatabase', 1) * 1 은 개발자(회사)가 정하는 임의의 버전이다. 이유인즉슨, DB 자체는 클라이언트의 브라우저에 있다. 그러다보니 서버에서 클라이언트의 DB 내용을 변경하고자 할 경우, indexedDB.open 에서 이 버전을 2 로 바꾼 뒤 사용자가 브라우저로 접속하면, 아래 "#3.Database 버전 업그레이드" Event 가 발생한다.
#2.Database 신규/기존 오픈 성공 후, db instance 돌려받기	databaseopenrequest.addEventListener('success',     function(event)     {         databaseinstance = event.target.result;     } ); databaseopenrequest.addEventListener('error',     function(event)     {     } ); * 여기서 databaseinstance 가 실제 database instance 이다.
#3.Database 버전 업그레이드	databaseopenrequest.addEventListener('upgradeneeded',     function(event)     {         databaseinstance = event.target.result;         if (event.oldVersion < 1) // *2         {             databaseinstance.createObjectStore('boardmaster_tbl', {keyPath:'boardmasterid', autoIncrement:true});         }         if (event.oldVersion < 2) // *2         {             databaseinstance.createObjectStore('boarddetail_tbl', {keyPath:'boarddetailid', autoIncrement:true});         }     } ); *1 event.oldVersion == 0 이면 최초 생성. *2 고민사항) 버전 1부터 n까지 차근 차근 올라간 사람은 괜찮은데, 신규 회원이 갑자기 버전 10부터 접근시 처리도 고민해야 할 듯.
#4. Insert - prompt 로 입력받은 값 넣기	let boardmaster_tbl = databaseinstance.transaction('boardmaster_tbl', 'readwrite').objectStore('boardmaster_tbl); let insertrequest = boardmaster_tbl.add({title:promot('enter title'), body:prompt('enter body')); insertrequest.addEventListener('success', function(event) {event.target.result}); // 성공시 처리
#5. Select	let boardmaster_tbl = databaseinstance.transaction('boardmaster_tbl', 'readonly').objectStore('boardmaster_tbl); let selectrequest = boardmaster_tbl.get(prompt('enter id')); selectrequest.addEventListener('success', function(event) {event.target.result}); // 성공시 처리
#6. Select All	let boardmaster_tbl = databaseinstance.transaction('boardmaster_tbl', 'readonly').objectStore('boardmaster_tbl); let selectrequest = boardmaster_tbl.getAll(); selectrequest.addEventListener('success', function(event) {event.target.result}); // 성공시 처리 * 주의 : 데이타 많아지면  IDBCursor 사용 필요 ( 별도로 알아볼것 )
#7. Update	let boardmaster_tbl = databaseinstance.transaction('boardmaster_tbl', 'readwrite').objectStore('boardmaster_tbl); let updaterequest = boardmaster_tbl.put({id:Number(prompt('enter id')),title:promot('enter title'), body:prompt('enter body')); updaterequest.addEventListener('success', function(event) {event.target.result}); // 성공시 처리
#8. Delete	let boardmaster_tbl = databaseinstance.transaction('boardmaster_tbl', 'readwrite').objectStore('boardmaster_tbl); let updaterequest = boardmaster_tbl.delete(Number(prompt('enter id'))); updaterequest.addEventListener('success', function(event) {event.target.result}); // 성공시 처리