Add browser storage fallback for Firefox/Safari (#1)

IndexedDB-based storage backend with Storage Persistence API for browsers
without File System Access API support. Requests persistent storage on
first save to protect data from automatic eviction. Includes backup
rotation (last 10 saves) and appropriate UI banner.
This commit is contained in:
Alexander Derevianko
2026-05-07 16:19:20 +02:00
committed by GitHub
parent 7e9231f0e6
commit c2e9eaaa7b
3 changed files with 363 additions and 4 deletions
+17 -1
View File
@@ -87,6 +87,12 @@ function App() {
if (mode === 'local') { setIsLoading(false); return; }
if (mode === 'browser') {
if (cancelled) return;
await applyStorageData(mode, () => cancelled);
return;
}
if (mode === 'direct') {
// Try silent reconnect — works if permission is still active from a previous session.
const ok = await Storage.tryAutoConnect();
@@ -528,6 +534,16 @@ function App() {
</div>
)}
{storageMode === 'browser' && (
<div className="banner info" style={{gap:8}}>
<Icon name="folder" size={14}/>
<span>
Data saved in <strong>browser storage</strong> — persists until you clear site data.{' '}
Use <em>Import/Export</em> to back up to a file.
</span>
</div>
)}
{needsConnect && (
<div className="banner info">
<Icon name="folder" size={14}/>
@@ -758,7 +774,7 @@ function ViewChips({ filters, setFilters }) {
// ----- Header -----
function Header({ view, setView, saveState, saveLabel, storageMode, searchValue, onSearch, onOpenImportExport }) {
const modeIcon = storageMode === 'api' ? '⚡' : storageMode === 'direct' ? '📁' : '💾';
const modeIcon = storageMode === 'api' ? '⚡' : storageMode === 'direct' ? '📁' : storageMode === 'browser' ? '🌐' : '💾';
return (
<header className="header">
<div className="brand">