Overview
The backup utilities module provides functions for managing application data backups. It handles exporting localStorage data to JSON files and restoring from backup files.
Storage Keys
The backup system tracks the following localStorage keys:
const STORAGE_KEYS = [
"better-home-widget-settings",
"better-home-todos",
"better-home-todo-sort",
"better-home-todo-filters",
"better-home-quick-links",
"mood-calendar-2026-data",
"mood-calendar-show-numbers",
"vite-ui-theme",
] as const;
Types
BackupData
interface BackupData {
[key: string]: unknown;
}
Functions
createBackup
function createBackup(): BackupData
BackupData - An object containing all current application data
Example:
import { createBackup, downloadBackup } from "@/lib/backup-utils";
function BackupButton() {
const handleDownloadBackup = () => {
const backup = createBackup();
downloadBackup(backup);
};
return <button onClick={handleDownloadBackup}>Download Backup</button>;
}
The function automatically parses JSON values and preserves raw strings for non-JSON data.
downloadBackup
function downloadBackup(backup: BackupData): void
backup - The backup data to download
Behavior:
- Creates a blob with formatted JSON (2-space indentation)
- Generates filename:
better-home-backup-YYYY-MM-DD.json
- Triggers browser download and cleans up resources
Example:
const backup = createBackup();
downloadBackup(backup);
// Downloads: better-home-backup-2026-03-03.json
restoreBackup
function restoreBackup(backup: BackupData): void
backup - The backup data to restore
Behavior:
- Writes all backup entries to localStorage
- Preserves theme value as raw string
- Stringifies all other values as JSON
This function overwrites existing localStorage data. Consider prompting users before restoring.
import { parseBackupFile, restoreBackup } from "@/lib/backup-utils";
function RestoreButton() {
const handleUploadBackup = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (!file) return;
parseBackupFile(file, (backup) => {
restoreBackup(backup);
window.location.reload();
});
event.target.value = "";
};
return <input type="file" accept=".json" onChange={handleUploadBackup} />;
}
parseBackupFile
function parseBackupFile(
file: File,
onSuccess: (backup: BackupData) => void
): void
file - The File object to parseonSuccess - Callback invoked with parsed backup data
Behavior:
- Reads file as text using FileReader API
- Parses JSON content
- Silently fails on invalid JSON
Example:
parseBackupFile(file, (backup) => {
console.log("Backup loaded:", backup);
restoreBackup(backup);
});
Complete Example
Here’s a complete backup/restore implementation:
import {
createBackup,
downloadBackup,
parseBackupFile,
restoreBackup,
} from "@/lib/backup-utils";
function BackupManager() {
const handleDownload = () => {
const backup = createBackup();
downloadBackup(backup);
};
const handleRestore = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (!file) return;
parseBackupFile(file, (backup) => {
restoreBackup(backup);
window.location.reload();
});
event.target.value = "";
};
return (
<div>
<button onClick={handleDownload}>Download Backup</button>
<input type="file" accept=".json" onChange={handleRestore} />
</div>
);
}