User Guide - Web Persist

8. Deleting File objects

This exercise will demonstrate how to delete a File object from IndexedDB. The following demo includes an identifier that serves to identify the File object after it's persisted into IndexedDB. After you click 'Delete File', you should observe logs in the browser console that the File record was deleted; you can expand the object returned in the console to inspect its content.

Under the hood, everything is persisted as a file into IndexedDB; functions from the earlier sections used to persist and retrieve JSON objects are essentially convenience wrappers for dealing with JSON.


                
               <!DOCTYPE html> <!-- Copyright (c) 2026 by Javaika Technologies -->
            
               <html lang = "en-AU"> <!-- Set the primary language to en-AU -->
    
                  <head>

                     <title>Delete File</title> <!-- Set the page title -->
  
                  </head>


                  <body>

                     <!-- Add the UI elements to the page -->

                     <div>

                        <input id = "input-1" size = "35" type = "text" placeholder = "Identifier (ID)">

                     </div>

    
                     <div style = "margin-top: 20px;">

                        <button id = "button-1">Delete File</button>

                     </div>


                     <!-- Include the framework script tag -->
    
                     <script type = "module" src = "https://www.javaika.com/frame/web-persist@main/api.js"></script>
    
    
                     <!-- Run the demo as an ES Module -->

                     <script type = "module">

                        const input1 = document.getElementById('input-1');

                        const button1 = document.getElementById('button-1');
      
      
                        // Listener for button click event.

                        button1.addEventListener('click', () => {
        
                           window.javaika.webPersist.deleteFileRecord(input1.value);
    
                        });


                        // Callback event after json retrieval.

                        document.addEventListener('javaika.webPersist.fileRecordDeleted', function(event) {
  
                           const detail = event.detail; // Initialise.
        
                           console.log("File record was deleted:"); console.log(detail);
        
                        });
     
                     </script>
 
                  </body>
   
               </html>

View Demo Download Demo

Next capability: Specifying storage options involving persistence with IndexedDB