📍indexedDB
데이터를 서버에 저장하는 것이 아닌 클라이언트 단에 저장하는 방식 중 하나이다. 클라이언트 단에 데이터를 저장하는 방식은 indexedDB 외에 쿠키, 로컬스토리지 등이 있다.
📍indexedDB 특징
아래 내용은 indexedDB의 특징이이자 쿠키, 로컬스토리지와 비교했을때 차이점이다.
- 비동기적으로 작동한다. -> 그래서 처리속도가 빠르다.
- 비교적 큰 용량의 구조화된 데이터를 저장할 수 있다.
📍indexedDB 사용법 예시
- Database 생성(open)
<html>
<body>
<script>
const dbReq = indexedDB.open('opentutorials',1);
let db;
dbReq.addEventListener('success', function(event){
db = event.target.result;
});
dbReq.addEventListener('error', function(event){
const error = event.target.error;
console.log('error', error.name);
});
- Object Store 생성(create)
dbReq.addEventListener('upgradeneeded', function(event){
db = event.target.result;
let oldVersion = event.oldVersion;
if(oldVersion < 1){
db.createObjectStore('topics', {keyPath:'id', autoIncrement:true});
}
});
</script>
- Transaction을 시작하고 데이터 생성, 조회(원하는 값/전체 리스트), 수정, 삭제 등의 작업을 요청
<input type="button" value="add" onclick="
let store = db.transaction('topics', 'readwrite').objectStore('topics');
let addReq = store.add({
title:prompt('title?'),
body:prompt('body?')
});
addReq.addEventListener('success', function(event){
console.log(event);
});
">
<input type="button" value="get" onclick="
let id = Number(prompt('?id'));
let store = db.transaction('topics', 'readonly').objectStore('topics');
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();
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?')
});
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?')));
deleteReq.addEventListener('success', function(event){
console.log(event);
});
">
</body>
</html>예제코드 출처: 생활코딩 '웹브라우저에 데이터를 저장하기 - IndexedDB'
프론트엔드를 공부하면서 서버 없이 데이터를 저장할 수 있는 방법이 궁금했는데, 잘 공부해두면 유용하게 쓸 수 있을 것 같다.
수련 중🧘🏼♀️