브라우저를 나가기 전까지 실시간 데이터들이 저장
되어야 한다는 요구사항이 있었다.(23/5/9) 지금 와서 생각하니까 전역 상태 관리 라이브러리를 사용해도 되잖아..
export function createIndexedDB() {
/* indexedDB를 지원하지 않는 브라우저면 경고창을 생성 */
if (!window.indexedDB) {
window.alert("browser doesn't support IndexedDB");
} else {
let db;
/* realTimeData라는 저장소를 생성했다.*/
let request = window.indexedDB.open("realTimeData");
request.onupgradeneeded = function (event) {
let db = event.target.result;
let objectStore = db.createObjectStore("data", { keyPath: "id" });
};
request.onerror = function (event) {
console.error("indexedDB not created");
};
}
}
export function writeIndexedDB(data) {
let request = window.indexedDB.open("realTimeData");
request.onerror = (event) => {
console.error(event.target.errorCode);
};
request.onsuccess = (event) => {
let db = event.target.result;
let tx = db.transaction(["data"], "readwrite");
tx.onerror = (event) => {
console.error("tx error");
};
let objectStore = tx.objectStore("data");
data.map((item) => {
objectStore.add(item);
});
};
}
export function selectIndexDB() {
return new Promise(function (resolve, reject) {
let returnList = [];
let request = window.indexedDB.open("realTimeData");
request.onerror = (event) => {
reject(event.target.errorCode);
};
request.onsuccess = (event) => {
let db = event.target.result;
let tx = db.transaction(["data"], "readwrite");
tx.onerror = (event) => {
reject("tx error");
};
let store = tx.objectStore("data");
let req = store.getAll();
req.onsuccess = function (event) {
let temp = event.target.result;
temp.map((item) => {
returnList.push(item.val[0]);
});
resolve(returnList);
};
};
});
}
selectIndexedDB().then((res) => {...});
window.addEventListener("unload", () => {deleteIndexedDB()}
)/* indexDB 데이터베이스를 통째로 삭제하는 func */
export function deleteIndexedDB() {
let req = indexedDB.deleteDatabase("realTimeData");
}
/* 실시간 데이터가 500개 이상이 되면 제일 오래된 값부터 지워나가는 func */
export function deleteRecordIndexedDB() {
let request = window.indexedDB.open("realTimeData");
request.onerror = (event) => {
console.error(event.target.errorCode);
};
request.onsuccess = (event) => {
let db = event.target.result;
let tx = db.transaction(["data"], "readwrite");
tx.onerror = (event) => {
console.error("tx error");
};
let store = tx.objectStore("data");
let req = store.getAll();
req.onsuccess = function (event) {
let temp = event.target.result;
if (temp.length > 501) {
store.delete(temp[0].id);
}
};
};
}
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
https://velog.io/@xcv3549/IndexedDB%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90