sohotcall

IndexedDB example

May 13th, 2020 (edited)
1,558
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //<h1>Test IndexedDB</h1>
  2. //name <input name=name /><br/>
  3. //<button type=button name=add>Add</button>
  4. //<button type=button name=indexGet>IndexGet</button><br/>
  5. //key <input name=key /><br/>
  6. //<button type=button name=put>Put</button>
  7. //<button type=button name=delete>Delete</button>
  8. //<button type=button name=get>Get</button><br/>
  9. //<button type=button name=openCursor>OpenCursor</button>
  10. //<table border=1></table>
  11. //<script>
  12. if ( ! ( 'indexedDB' in window ) )
  13.     console.log( "ERROR: Upgrade your browser!" )
  14. let db
  15. const CURRENT_VERSION = 4
  16. let res = window.indexedDB.open( 'idb-test', CURRENT_VERSION )
  17. res.onupgradeneeded = ( event ) => { // req.onsuccess will automatically run after this
  18.     let db = event.currentTarget.result
  19.     if ( db.objectStoreNames.contains( 'organism' ) ){
  20.         console.log( "deleteObjectStore organism" )
  21.         db.deleteObjectStore( 'organism' )
  22.     }
  23.     if ( ! db.objectStoreNames.contains( 'organism' ) ){
  24.         console.log( "createObjectStore organism" )
  25.         let tbl = db.createObjectStore( 'organism', { keyPath : "key", autoIncrement : true } )
  26.         tbl.createIndex( 'name', 'name', { unique:false } ) // if you need indexing
  27.     }
  28.     console.log( "DB upgraded to version " + CURRENT_VERSION )
  29. }
  30. res.onerror = ( event ) => { console.log( "ERROR: Stupid user not allow IndexedDB." ) }
  31. res.onsuccess = ( event ) => {
  32.     console.log( "IndexedDB is ready." )
  33.     db = event.target.result
  34.     db.onerror = ( event ) => { console.log( "ERROR: DB error: " + event.target.errorCode ) }
  35. }
  36. function add( row, cb ){ // callback cb(key) onsuccess
  37.     console.log( "Add row..." );
  38.     let res = db.transaction( "organism", "readwrite" ).objectStore( "organism" ).add( row )
  39.     res.onsuccess = ( event ) => { console.log( "Add row success." ); cb( event.target.result ); }
  40.     res.onerror = ( event ) => { console.log( "Add row failed." ) }
  41. }
  42. document.querySelector( '[name=add]' ).addEventListener( "click", () => {
  43.     add( {
  44.         name: document.querySelector('[name=name]').value,
  45.     }, ( key ) => {
  46.         document.querySelector('[name=key]').value = + key
  47.     } );
  48. }, false );
  49. function put( row, cb ){ // callback cb() onsuccess
  50.     console.log( "Put row..." )
  51.     let res = db.transaction( "organism", "readwrite" ).objectStore( "organism" ).put( row )
  52.     res.onsuccess = ( event ) => { console.log( "Put row success." ); cb(); }
  53.     res.onerror = ( event ) => { console.log( "Put row failed." ) }
  54. }
  55. document.querySelector( '[name=put]' ).addEventListener( "click", () => {
  56.     put( {
  57.         key: + document.querySelector('[name=key]').value,
  58.         name: document.querySelector('[name=name]').value,
  59.     }, () => {} )
  60. }, false )
  61. function del( key, cb ){ // callback cb() onsuccess. Btw, "delete" is a javascript operator
  62.     console.log( "Delete item..." )
  63.     let res = db.transaction( "organism", "readwrite" ).objectStore( "organism" ).delete( key )
  64.     res.onsuccess = ( event ) => { console.log( "Delete item success." ); cb(); }
  65.     res.onerror = ( event ) => { console.log( "Delete item failed." ) }
  66. }
  67. document.querySelector( '[name=delete]' ).addEventListener( "click", () => {
  68.     del( + document.querySelector( '[name=key]' ).value, () => {} )
  69. }, false )
  70. function get( key, cb ){ // callback cb(object|undefined) onsuccess
  71.     console.log( "Get item..." );
  72.     let res = db.transaction( "organism" ).objectStore( "organism" ).get( key )
  73.     res.onsuccess = ( event ) => { console.log( "Get item success." ); cb( event.target.result ); }
  74.     res.onerror = ( event ) => { console.log( "Get item failed." ) }
  75. }
  76. document.querySelector( '[name=get]' ).addEventListener( "click", () => {
  77.     get( + document.querySelector( '[name=key]' ).value, ( row ) => {
  78.         document.querySelector( '[name=name]' ).value = row.name
  79.     } )
  80. }, false )
  81. function indexGet( index, value, cb ){ // callback cb(object|undefined) onsuccess
  82.     console.log( "IndexGet item..." );
  83.     let res = db.transaction( "organism" ).objectStore( "organism" ).index( index ).get( value )
  84.     res.onsuccess = ( event ) => { console.log( "IndexGet item success." ); cb( event.target.result ); }
  85.     res.onerror = ( event ) => { console.log( "IndexGet item failed." ) }
  86. }
  87. document.querySelector( '[name=indexGet]' ).addEventListener( "click", () => {
  88.     indexGet( "name", document.querySelector( '[name=name]' ).value, ( row ) => {
  89.         document.querySelector( '[name=key]' ).value = row.key
  90.     } )
  91. }, false )
  92. function openCursor( cb ){ // callback cb(array) onsuccess
  93.     console.log( "OpenCursor items..." )
  94.     let res = db.transaction( "organism" ).objectStore( "organism" ).openCursor( )
  95.     let table = []
  96.     res.onsuccess = ( event ) => {
  97.         let cursor = event.target.result
  98.         if ( cursor ){
  99.             table.push( cursor.value )
  100.             cursor.continue()
  101.         } else {
  102.             console.log( "OpenCursor items success." )
  103.             console.log( table )
  104.             cb( table )
  105.         }
  106.     }
  107.     res.onerror = ( event ) => { console.log( "OpenCursor items failed." ) }
  108. }
  109. document.querySelector( '[name=openCursor]' ).addEventListener( "click", () => {
  110.     openCursor( ( table ) => {
  111.         let innerHTML = "<tbody>"
  112.         table.forEach( ( row ) => {
  113.             innerHTML += "<tr><td>" + row.key + "<td>" + row.name
  114.         } )
  115.         document.querySelector( 'table' ).innerHTML = innerHTML
  116.     })
  117. }, false )
  118. //</script>
  119.  
RAW Paste Data