Up until this point, everything has been stored into a specific IndexedDB store with this guide. In this
section lets build some clarity around what's going on under the scenes within IndexedDB itself.
Open Browser Developer Tools (DevTools) and click on the 'Application' tab. On the left of DevTools you
should see a 'Storage' section with 'IndexedDB' as one of the options. If you click into IndexedDB, you
should now see 'javaika-web-persist' which is the database automatically created by the Web Persist
framework. Within this database you should observe 5 separate stores: 'web-general', 'web-interface',
'web-neural', 'web-share', 'web-stream'; everything up to this stage has been stored into 'web-general'.
You have probably noticed that the Javaika platform is not just limited to Web Persist, we offer a suite
of frameworks for specific use-cases within the realm of web development. These other stores are provided
to offer you the ability for separating persistence concerns accross the other frameworks.
This exercise will demonstrate how to persist a JSON object into a different IndexedDB store associated
with a specified filename. Similar to the first exercise, this demo includes a textarea with a default
JSON message and an identifier that serves to identify the JSON object after 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 object returned in the console to inspect its content. Notice this time, however, that
the JSON record is stored within the 'web-interface' store - not 'web-general'; to fetch and delete this
record, the process is similar - specify the IndexedDB store the same way when using the other function
calls described in the previous exercises. Also notice that the name of the persisted JSON file within
IndexedDB is the same as the name specified in this exercise.
<!DOCTYPE html> <!-- Copyright (c) 2026 by Javaika Technologies -->
<html lang = "en-AU"> <!-- Set the primary language to en-AU -->
<head>
<title>Store Options</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),
{storeName: 'web-interface', fileName: 'some-message.json'}
);
});
// 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>