Last active
September 15, 2023 07:33
-
-
Save egoing/22b86994518b69e7ed938371ca7f8972 to your computer and use it in GitHub Desktop.
indexedDB 예제 - https://bit.ly/indexeddb-html
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> | |
| <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); | |
| }); | |
| dbReq.addEventListener('upgradeneeded', function(event){ | |
| db = event.target.result; | |
| let oldVersion = event.oldVersion; | |
| if(oldVersion < 1){ | |
| db.createObjectStore('topics', {keyPath:'id', autoIncrement:true}); | |
| } | |
| }); | |
| </script> | |
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment