2022.04.25 - [Front-End 학습/Javascript] - IndexedDB 1. IndexedDB는 비동기적으로 작동 Todo 앱에서 각 할일을 완료 체크하면 해당 할일 HTML Element를 이용해, indexedDB에서 해당 데이터를 검색한 결과를 얻으려고 함. 그렇게 하기 위해 아래와 같이 두 함수를 만듦. // 1. index Key로 DB를 탐색해 결과를 반환하는 함수 function findTaskDB(indexKey, indexValue) { let transaction = db.transaction(["task"], "readwrite"); let taskObjectStore = transaction.objectStore("task"); let indexSearchRequ..
Todo 앱의 할일 목록을 관리하기 위해 Local Storage를 사용했으나, 데이터를 저장할 때마다 JSON.stringify()를 이용해 객체를 문자열로 변환시켜주는 과정이 필요하고, 객체 내부의 객체도 JSON.stringify()로 변환이 가능하나, HTML Element같은 객체는 제대로 변환이 불가능하고, Local Stroage의 용량은 최대 10MB 등의 단점으로 IndexedDB를 사용해보기로 함. ※ JSON.strigify()로 HTML Element 변환 저장이 가능하나 일반적인 객체를 저장하는 것만큼 간단하지 않음 How to JSON.stringify a dom element? 1-1. 데이터베이스 열기 // user-Todo라는 이름의 데이터베이스를 불러옴 let reques..
JavaScript 2022. 5. 1. 19:53
2022.04.25 - [Front-End 학습/Javascript] - IndexedDB 1. IndexedDB는 비동기적으로 작동 Todo 앱에서 각 할일을 완료 체크하면 해당 할일 HTML Element를 이용해, indexedDB에서 해당 데이터를 검색한 결과를 얻으려고 함. 그렇게 하기 위해 아래와 같이 두 함수를 만듦. // 1. index Key로 DB를 탐색해 결과를 반환하는 함수 function findTaskDB(indexKey, indexValue) { let transaction = db.transaction(["task"], "readwrite"); let taskObjectStore = transaction.objectStore("task"); let indexSearchRequ..
JavaScript 2022. 4. 25. 20:08
Todo 앱의 할일 목록을 관리하기 위해 Local Storage를 사용했으나, 데이터를 저장할 때마다 JSON.stringify()를 이용해 객체를 문자열로 변환시켜주는 과정이 필요하고, 객체 내부의 객체도 JSON.stringify()로 변환이 가능하나, HTML Element같은 객체는 제대로 변환이 불가능하고, Local Stroage의 용량은 최대 10MB 등의 단점으로 IndexedDB를 사용해보기로 함. ※ JSON.strigify()로 HTML Element 변환 저장이 가능하나 일반적인 객체를 저장하는 것만큼 간단하지 않음 How to JSON.stringify a dom element? 1-1. 데이터베이스 열기 // user-Todo라는 이름의 데이터베이스를 불러옴 let reques..