const defaultSettings = {
theme: 'dark',
lastFilter: null,
filterValues: {
brightness: 0,
contrast: 1,
saturation: 0,
},
recentFiles: [],
};
function saveSettings(settings) {
localStorage.setItem(
'pixelcraft-settings',
JSON.stringify(settings)
);
}
function loadSettings() {
const stored = localStorage.getItem('pixelcraft-settings');
if (stored) {
try {
return JSON.parse(stored);
} catch (e) {
console.warn('Corrupted settings, using defaults');
return { ...defaultSettings };
}
}
return { ...defaultSettings };
}
brightnessSlider.addEventListener('input', (e) => {
const value = parseInt(e.target.value);
settings.filterValues.brightness = value;
saveSettings(settings);
});
Every slider move, every toggle, every preference change → save immediately. No "Save" button needed — the app just remembers.
const settings = loadSettings();
brightnessSlider.value = settings.filterValues.brightness;
brightnessValue.textContent = settings.filterValues.brightness;
On page load, read stored settings and apply to every UI control. The app picks up exactly where the user left off.
Add a "Clear All Data" button in the settings panel that calls localStorage.removeItem('pixelcraft-settings').
Track recently opened files — metadata only: name, date, thumbnail hash. Never store actual image data in localStorage (5MB limit!).
git switch -c feature/PIXELCRAFT-014-persistence
git add src/scripts/
git commit -m "Persist settings with localStorage (PIXELCRAFT-014)"
git push origin feature/PIXELCRAFT-014-persistence
# PR → Review → Merge → Close ticket ✅
Serialization and persistence.
RAM is volatile — data dies when the process ends. Storage is persistent — data survives. The bridge is serialization: converting live objects into a storable format. Deserialization is the reverse.