//
'use client';
import { useEffect } from 'react';
export default function SavePrefs(): JSX.Element {
useEffect(() => {
localStorage.setItem('prefs', 'tag:tech');
}, []);
const prefs = localStorage.getItem("prefs")
return <p>Your prefs: {prefs}</p>;
}
// app/components/Draft.tsx
'use client';
import { useEffect } from 'react';
export default function Draft() {
useEffect(() => {
sessionStorage.setItem('draft', 'My awesome post...');
}, []);
const draft = sessionStorage.getItem("draft")
return <p>Draft saved this tab!: { draft }</p>;
}
export function saveDraft(): void {
const dbPromise = indexedDB.open('BlogDrafts', 1);
dbPromise.onupgradeneeded = (event) => {
const db = (event.target as IDBOpenDBRequest).result;
db.createObjectStore('drafts', { keyPath: 'id' });
};
dbPromise.onsuccess = (event) => {
const db = (event.target as IDBOpenDBRequest).result;
const tx = db.transaction('drafts', 'readwrite');
tx.objectStore('drafts').add({ id: 1, text: 'Draft 1...' });
};
}
| Feature | Cookies | Local Storage | Session Storage | IndexedDB |
|---|---|---|---|---|
| Size | 4KB | 5-10MB | 5-10MB | Tens of MBs |
| Lifespan | Custom/Set | Forever | Tab closes | Forever |
| Server Access | Yes (HTTP) | No | No | No |
| Security | HttpOnly, etc. | None | None | None |
| Ease of Use | Medium | Easy | Easy | Hard |
| Blog App Use | Login, prefs | Long-term prefs | Drafts per tab | Offline drafts |