User Guide - Web Persist

3. Demos and Workflow

The demos can be used in two ways depending on your workflow. You can run it instantly on JT by simply clicking 'View Demo', which opens the page directly in your browser with no setup required. Alternatively, if you want to test or modify the demo in your own environment, click 'Download Demo' to save the HTML file locally. You can then upload it to your localhost server and run it there, giving you full control to experiment, debug, and integrate it with your own setup.

To begin, open Browser Developer Tools (DevTools) which is essentially an entire debugging suite built into web browsers; you can typically open it with 'Ctrl + Shift + I'. We will use DevTools to inspect the browser console logs for each demo.

4. Storing JSON objects

This exercise will demonstrate how to store a JSON object. The following demo includes a textarea with a default JSON message which is also editable. Also included is an identifier that defaults to a random UUID, and serves to identify the JSON object when it's persisted into IndexedDB. After you click 'Store Json', you should observe logs in the browser console that the JSON record was stored; you can expand the JSON object returned in the console to inspect its content.


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

                     <title>Store Json</title> <!-- Set the page title -->
  
                  </head>


                  <body>

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

                     <div>

                        <textarea id = "text-area-1" rows = "5" cols = "35" placeholder = "Json message"></textarea>

                     </div>


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

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

                     </div>

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

                        <button id = "button-1">Store Json</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 textArea1 = document.getElementById('text-area-1');

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

      
                        const button1 = document.getElementById('button-1');
      
      
                        const defaultJsonObject = {message: "Hello world", type: "demo"};

                        textArea1.value = JSON.stringify(defaultJsonObject, null, 2);


                        input1.value = crypto.randomUUID(); // Generate random UUID for the identifier.


                        // Listener for button click event.

                        button1.addEventListener('click', () => {
        
                           window.javaika.webPersist.storeJsonRecord(input1.value, JSON.parse(textArea1.value));
    
                        });


                        // Callback event after json storage.

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

View Demo Download Demo

Next capability: Discuss how to fetch the stored JSON record from IndexedDB.