This exercise will demonstrate how to retrieve 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 'Fetch File', you should observe logs in the browser console that the File record was fetched; you can expand the File 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 File object.
<!DOCTYPE html> <!-- Copyright (c) 2026 by Javaika Technologies -->
<html lang = "en-AU"> <!-- Set the primary language to en-AU -->
<head>
<title>Fetch 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">Fetch 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.fetchFileRecord(input1.value);
});
// Callback event after json retrieval.
document.addEventListener('javaika.webPersist.fileRecordFetched', function(event) {
const detail = event.detail; // Initialise.
console.log("File record was fetched:"); console.log(detail);
});
</script>
</body>
</html>
Next capability: Discuss how to delete File records from IndexedDB