localStorageGoal: Learn how to use a user interface to build a complex configuration object and save it with localStorage.
← Back to Step 5In Step 4, you learned how to use localStorage to collect data every time a participant made a choice. We saved a list of simple data "packets" representing each trial.
In this step, we'll take it to the next level. Instead of saving a list of actions, we will save a single, complex configuration object. This object acts like a "recipe card" that tells our experiment in Step 6 exactly how to run, including which AI to use, how many trials to run, and how the AI should behave.
localStorage: A Step-by-Step BreakdownThe entire goal of the interactive form in Step 5 is to generate and save one single, well-structured JSON object. This object contains every setting the next part of our experiment needs. Here is an example of what it looks like for the ELPH algorithm:
{
"numTrials": 100,
"feedbackDelay": 1500,
"showProgress": true,
"showAIStrategy": true,
"askParticipantInfo": true,
"aiAlgorithm": "elph",
"stmLength": 3,
"entropyThreshold": 1.5,
"minObservations": 3,
"hypothesisPruning": true
}
To start, our code defines a default rpsConfig object in step5-experiment.js. This ensures that the experiment has a valid configuration to work with, even if nothing has been saved by the user yet. It includes parameters for all potential AI algorithms.
// A global object to hold our default settings
let rpsConfig = {
numTrials: 100,
feedbackDelay: 1500,
showProgress: true,
aiAlgorithm: '',
// ELPH parameters
stmLength: 3,
entropyThreshold: 1.5,
minObservations: 3,
hypothesisPruning: true,
// Biased Random AI parameters
phase1End: 200,
phase2End: 400
};
Just like in Step 4, we check localStorage as soon as the page loads. The loadSavedRPSConfig function looks for an item with the key 'rps_config'. If it finds one, it parses the saved string back into a JavaScript object and uses it to populate the form.
function loadSavedRPSConfig() {
// Look for our specific config in the browser's storage
const savedConfigJSON = localStorage.getItem('rps_config');
// If we found a saved configuration...
if (savedConfigJSON) {
console.log('✅ Found a saved RPS configuration, loading it.');
// ...convert it from a text string back into a usable JavaScript object
const savedConfig = JSON.parse(savedConfigJSON);
// Use the saved data to fill out the form fields
updateFormFromConfig(savedConfig);
} else {
console.log('📝 No saved configuration found, using defaults.');
}
}
When you click the "Save to Local Storage" button, the applyRPSConfiguration function runs. It reads the current values from every input field on the form, builds a new configuration object, and then saves it to localStorage, overwriting any previous version.
function applyRPSConfiguration() {
// 1. Read all the current values from the form into an object
// (This part is done by another function, updateRPSPreview, which
// gathers all `document.getElementById(...)` values)
const currentConfig = buildConfigFromForm(); // Simplified for clarity
try {
// 2. Convert the configuration object into a JSON string
const configJSON = JSON.stringify(currentConfig, null, 2);
// 3. Save the string to localStorage with our specific key
localStorage.setItem('rps_config', configJSON);
console.log('✅ Configuration saved successfully to localStorage.');
showStatus('Configuration saved!', 'success');
} catch (error) {
console.error('❌ Failed to save configuration:', error);
showStatus('Error saving configuration.', 'error');
}
}
config.json FileThe interactive form is a powerful tool for quickly testing settings, but for professional research, a static config.json file is the standard. A file is reliable, easy to share with collaborators, and can be tracked with version control (like Git).
Think of the Step 5 form as a user-friendly "Configuration Generator."
The "Download JSON Config" button is the bridge between the interactive demo and a real project. It takes the exact same configuration object that gets saved to localStorage and lets you download it as a portable .json file. You can then bundle this file with your experiment code to ensure it always runs with the exact same settings.