This exercise will demonstrate how to retrieve a JSON object from IndexedDB. The following demo includes an identifier that serves to identify the JSON object after it's persisted into IndexedDB. After you click 'Fetch Json', you should observe logs in the browser console that the JSON record was fetched; you can expand the JSON object returned in the console to inspect its content. For the purpose of proving persistence, it's best to close the browser tab completely and re-open the demo. Use the UUID from the previous page in this demo to fetch the stored JSON object.
<!DOCTYPE html> <!-- Copyright (c) 2026 by Javaika Technologies -->
<html lang = "en-AU"> <!-- Set the primary language to en-AU -->
<head>
<title>Fetch Json</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">Fetch 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 input1 = document.getElementById('input-1');
const button1 = document.getElementById('button-1');
// Listener for button click event.
button1.addEventListener('click', () => {
window.javaika.webPersist.fetchJsonRecord(input1.value);
});
// Callback event after json retrieval.
document.addEventListener('javaika.webPersist.jsonRecordFetched', function(event) {
const detail = event.detail; // Initialise.
console.log("Json record was fetched:"); console.log(detail);
});
</script>
</body>
</html>
Next capability: Discuss how to store files into IndexedDB.