Skip to content

Instantly share code, notes, and snippets.

@SeonHyungJo
Created June 7, 2019 05:04
Show Gist options
  • Save SeonHyungJo/86208de50046347cdf762f7a32daf5cb to your computer and use it in GitHub Desktop.
Save SeonHyungJo/86208de50046347cdf762f7a32daf5cb to your computer and use it in GitHub Desktop.
indexedDB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="name" placeholder="Name"><br />
<input type="email" id="email" placeholder="Email"><br />
<button id="addButton">Add Data</button>
</body>
<script>
let idbSupported = false
if ("indexedDB" in window) {
idbSupported = true;
}
if (idbSupported) {
// indexedDB 열기
var openRequest = indexedDB.open("test", 3);
openRequest.onupgradeneeded = function (e) {
console.log("running onupgradeneeded");
var thisDB = e.target.result;
// firstOS이라는 저장소가 없으면
if (!thisDB.objectStoreNames.contains("firstOS")) {
// 저장소를 만들어줌
thisDB.createObjectStore("firstOS", { autoIncrement:true });
}
if (!thisDB.objectStoreNames.contains("secondOS")) {
thisDB.createObjectStore("secondOS");
}
}
openRequest.onsuccess = function (e) {
console.log("Success!");
// 나중에 데이터를 추가하는데 사용되는 db
db = e.target.result;
console.log(e.target)
// 이벤트 등록
document.querySelector("#addButton").addEventListener("click", addPerson, false);
}
openRequest.onerror = function (e) {
console.log("Error");
console.dir(e);
}
}
function addPerson(e) {
var name = document.querySelector("#name").value;
var email = document.querySelector("#email").value;
console.log("About to add " + name + "/" + email);
//people 테이블에 데이터 add 선언..
var transaction = db.transaction(["firstOS"], "readwrite");
var store = transaction.objectStore("firstOS");
//Define a person
var person = {
name: name,
email: email,
created: new Date()
}
//Perform the add
// (data, key)a
var request = store.add(person);
request.onerror = function (e) {
console.warn("Error", e.target.error.name);
//some type of error handler
}
request.onsuccess = function (e) {
console.log("Woot! Did it");
}
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment