# 참조 : 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}); // 성공시 처리 |
