JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IndexedDB Matrix Test - Property Counts vs. String Lengths</title>
</head>
<body>
<h1>IndexedDB Matrix Test</h1>
<p>
For the <a href="https://rxdb.info/" target="_blank">RxDB</a> website we tested how bug the maximum object size is that you can store inside of IndexedDB.
</p>
<button id="startTest">Start Test</button>
<div id="status"></div>
<script>
// Define the test matrix:
// - How many additional properties (besides "id") each object should have.
const testPropsAmount = [10, 50, 100, 500, 1000, 10000, 100000, 1000000];
// - The length of the random string for each property value.
const testPropsContentSize = testPropsAmount;
// Database details
const DB_NAME = "JsonMatrixTestDB";
const DB_VERSION = 1;
const STORE_NAME = "MatrixStore";
/**
* Utility function to generate a random string of a given length.
*/
function generateRandomString(length) {
const chars =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
let result = "";
for (let i = 0; i < length; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
return result;
}
/**
* Generates an object that has:
* - an "id" property (random string),
* - `numProps` additional random properties,
* each of which has a random string value of length `strLen`.
*/
function generateJsonObject(numProps, strLen) {
const obj = {};
// Always include an "id" property with a random string
obj.id = generateRandomString(12);
// Add the remaining number of properties
for (let i = 0; i < numProps; i++) {
const propName = "prop_" + i + "_" + generateRandomString(4);
// Each property is a random string of length = strLen
...