Storage API: ブラウザにデータ保存

Cookie より簡単・大容量。テーマやトークンを保存。

localStorage
永続保存。ブラウザを閉じても残る。
sessionStorage
タブを閉じると消える。
容量
通常 5MB 以上。Cookie より大きい。

Storage API

学校のロッカー (School Locker)

`localStorage` は「自分のロッカー」です。学校（ブラウザ）から帰っても、次の日学校に来れば中身はそのまま保存されています。`sessionStorage` は「買い物カゴ」です。店（タブ）を出ると、中身は空っぽになります。

Cookie は毎回サーバーに送信されますが、Storage API はブラウザ内だけに保存されます。容量も大きく（約5MB）、サーバーへの通信量を減らせるため、テーマ設定や一時データの保存に最適です。

localStorage & sessionStorage
// localStorage: 永続保存
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');
localStorage.removeItem('theme');
localStorage.clear();


// sessionStorage: タブを閉じると消える
sessionStorage.setItem('token', 'abc123');


// オブジェクトを保存
const user = { name: 'Alice', age: 30 };
localStorage.setItem('user', JSON.stringify(user));
const saved = JSON.parse(localStorage.getItem('user'));
Bad
// ❌ Bad: Cookie でデータ保存
document.cookie = "theme=dark; expires=...";
// 制限: 4KB, 手動パース必要
Good
// ✅ Good: localStorage
localStorage.setItem('theme', 'dark');
// 5MB+, シンプル API

高度な使い方

Storage Events, Expiry
// ストレージイベント（他タブと同期）
window.addEventListener('storage', (e) => {
    console.log('Key:', e.key);
    console.log('Old:', e.oldValue);
    console.log('New:', e.newValue);
});


// 有効期限付きストレージ
function setWithExpiry(key, value, ttl) {
    const item = {
        value,
        expiry: Date.now() + ttl,
    };
    localStorage.setItem(key, JSON.stringify(item));
}


function getWithExpiry(key) {
    const item = JSON.parse(localStorage.getItem(key));
    if (!item || Date.now() > item.expiry) {
        localStorage.removeItem(key);
        return null;
    }
    return item.value;
}
Tip: 機密データは保存しない。XSS で読み取られる可能性。

合格ライン

☐ localStorage と sessionStorage の違いを説明できる
☐ JSON.stringify/parse でオブジェクトを保存できる

演習課題

課題1: localStorage
localStorage でデータを保存・取得してください。
課題2: JSON
JSON.stringify/parse でオブジェクトを保存してください。