Created
June 7, 2019 05:04
-
-
Save SeonHyungJo/86208de50046347cdf762f7a32daf5cb to your computer and use it in GitHub Desktop.
indexedDB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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