【5分でわかる】JavaScriptのローカルストレージ入門 - ブラウザにデータを保存する仕組み

2025年8月1日

•

JavaScript

こんにちは、とまだです。

JavaScriptを学習していて、「データを保存したいけど、データベースは難しそう...」と思ったことはありませんか？

私も最初は同じでした。しかし、実はブラウザにはローカルストレージという便利な仕組みがあって、ブラウザを閉じても、タスクが消えないようにする機能が使えるんです。

今回は、このローカルストレージを使って、誰でも簡単にデータを保存・読み込みできる方法を、日記帳に例えながら解説していきます。

ローカルストレージとは？日記帳で理解する基本概念

ローカルストレージって聞くと難しそうですよね。

でも実は、ブラウザに備え付けられた日記帳のようなものなんです。

普通の日記帳を想像してみてください。

何かを書き込める
後で読み返せる
破らない限りずっと残る

ローカルストレージはブラウザにデータを保存する仕組みのことです。ユーザーがブラウザを閉じても保存したデータは消えずに再起動後も保持されます。

なぜローカルストレージが便利なのか

「変数にデータを入れておけばいいんじゃない？」

そう思うかもしれません。

でも、変数には大きな弱点があります。ページを再読み込みするとリセットされます。

例えば、TODOアプリを作った場合を考えてみましょう。

変数だけの場合：

let tasks = ["買い物", "勉強", "運動"];
// ページを更新すると... 全部消える！

ローカルストレージを使う場合：

// データを保存
localStorage.setItem('tasks', JSON.stringify(["買い物", "勉強", "運動"]));
// ページを更新しても... データは残ってる！

つまり、ページをリロードしてもデータが保持されますという特徴があるんです。

ローカルストレージの3つの基本操作

ローカルストレージの使い方は、たった3つの操作を覚えるだけです。

1. データを保存する（書き込む）

ローカルストレージにデータを保存するにはlocalStorage.setItem()を使います。

// 文字列を保存
localStorage.setItem('username', 'とまだ');

// 数値を保存（文字列として保存される）
localStorage.setItem('score', '100');

// 日付を保存
localStorage.setItem('lastLogin', '2025-07-23');

日記帳にペンで書くように、setItemでデータを保存します。

ポイントは、localStorage.setItem()にはキーと値をセットで指定しますということです。

2. データを取得する（読み出す）

ローカルストレージに保存したデータを取得するにはlocalStorage.getItem()を使います。

// 保存したデータを取得
const username = localStorage.getItem('username');
console.log(username); // "とまだ"

const score = localStorage.getItem('score');
console.log(score); // "100"

日記帳を開いて読むように、getItemでデータを取り出します。

3. データを削除する（消す）

不要になったデータは削除できます。

// 特定のデータを削除
localStorage.removeItem('username');

// すべてのデータを削除
localStorage.clear();

localStorage.removeItem()はローカルストレージのデータを削除します。

日記帳の1ページを破るように、特定のデータだけ消すこともできます。

実践！TODOリストでローカルストレージを使ってみよう

では、実際にTODOリストを作りながら、ローカルストレージの使い方を体験してみましょう。

シンプルなTODOリストの実装

<!DOCTYPE html>
<html>
<head>
    <title>TODOリスト</title>
</head>
<body>
    <h1>今日のTODO</h1>
    <input type="text" id="taskInput" placeholder="タスクを入力">
    <button onclick="addTask()">追加</button>
    <ul id="taskList"></ul>

    <script>
        // ページ読み込み時にタスクを表示
        window.onload = function() {
            displayTasks();
        };

        // タスクを追加
        function addTask() {
            const input = document.getElementById('taskInput');
            const task = input.value.trim();

            if (task === '') {
                alert('タスクを入力してください');
                return;
            }

            // 既存のタスクを取得
            let tasks = JSON.parse(localStorage.getItem('tasks') || '[]');

            // 新しいタスクを追加
            tasks.push(task);

            // ローカルストレージに保存
            localStorage.setItem('tasks', JSON.stringify(tasks));

            // 入力欄をクリア
            input.value = '';

            // タスクを再表示
            displayTasks();
        }

        // タスクを表示
        function displayTasks() {
            const taskList = document.getElementById('taskList');
            const tasks = JSON.parse(localStorage.getItem('tasks') || '[]');

            // リストをクリア
            taskList.innerHTML = '';

            // タスクを1つずつ表示
            tasks.forEach((task, index) => {
                const li = document.createElement('li');
                li.innerHTML = `
                    ${task}
                    <button onclick="deleteTask(${index})">削除</button>
                `;
                taskList.appendChild(li);
            });
        }

        // タスクを削除
        function deleteTask(index) {
            let tasks = JSON.parse(localStorage.getItem('tasks') || '[]');
            tasks.splice(index, 1);
            localStorage.setItem('tasks', JSON.stringify(tasks));
            displayTasks();
        }
    </script>
</body>
</html>

このコードのポイントは、配列を保存する時にJSON.stringify()を使い、取り出す時にJSON.parse()を使うことです。

なぜなら、ローカルストレージに配列を保存するには、配列をJSON文字列に変換してから、localStorage.setItem()メソッドを使用しますからです。

ローカルストレージの注意点とベストプラクティス

1. 容量制限がある

ローカルストレージは5MBまでデータを保存できます。

これは文字にすると約500万文字。普通の使い方なら十分ですが、画像データなどは向いていません。

2. 文字列しか保存できない

オブジェクトや配列を保存したい場合は、必ずJSON形式に変換する必要があります。

// オブジェクトを保存する場合
const user = {
    name: 'とまだ',
    age: 30,
    skills: ['JavaScript', 'React', 'Node.js']
};

// JSON文字列に変換して保存
localStorage.setItem('user', JSON.stringify(user));

// 取り出す時はパースする
const savedUser = JSON.parse(localStorage.getItem('user'));

3. セキュリティに注意

ユーザーの個人情報など、機密性の高い情報には使わないようにしましょう。

パスワードやクレジットカード情報などは、絶対にローカルストレージに保存してはいけません。

4. エラーハンドリングを忘れずに

ローカルストレージが使えない環境もあるので、エラー処理を入れておきましょう。

try {
    localStorage.setItem('test', 'value');
} catch (e) {
    console.error('ローカルストレージが使用できません:', e);
    // 代替処理
}

ローカルストレージの実用的な活用例

ユーザー設定の保存

ユーザーの設定（例：テーマの選択、言語設定など）を保存することで、次回アクセス時に同じ設定を適用できます。

// ダークモードの設定を保存
function toggleDarkMode() {
    const isDark = document.body.classList.toggle('dark-mode');
    localStorage.setItem('darkMode', isDark);
}

// ページ読み込み時に設定を復元
window.onload = function() {
    const isDark = localStorage.getItem('darkMode') === 'true';
    if (isDark) {
        document.body.classList.add('dark-mode');
    }
};

フォームの一時保存

入力途中のフォームデータを自動保存して、誤ってページを離れても復元できるようにします。

// 入力内容を自動保存
document.getElementById('message').addEventListener('input', function(e) {
    localStorage.setItem('draft', e.target.value);
});

// ページ読み込み時に下書きを復元
window.onload = function() {
    const draft = localStorage.getItem('draft');
    if (draft) {
        document.getElementById('message').value = draft;
    }
};

よくある質問と解決方法

Q1: ローカルストレージのデータはいつまで残る？

A: ユーザーが明示的に削除しない限り、永続的に保存されます。

ブラウザのキャッシュクリアやプライベートブラウジングでは削除される可能性があります。

Q2: 他のサイトからデータを見られる？

A: いいえ。データストアはドメインごと（ブラウザーに読み込まれるウェブアドレスが別個のものごと）に用意されています。

example.comのデータをexample2.comから見ることはできません。

Q3: ブラウザでデータを確認する方法は？

A: デベロッパーツールで確認できます。

「デベロッパーツール」（右クリック➡検証）➡「アプリケーション」（隠れている場合は「>>」を押します)を選択します。

そして、「ストレージ」➡「ローカルストレージ」➡「現在のページ」を確認すると、保存されているデータが見られます。

まとめ：ローカルストレージで広がる可能性

JavaScriptのローカルストレージは、ブラウザに備わった便利な日記帳のようなものです。

今日学んだポイントをまとめると：

setItemでデータを保存
getItemでデータを取得
removeItemでデータを削除
配列やオブジェクトはJSON.stringifyとJSON.parseを使う
セキュリティに注意して使う

ローカルストレージを使えば、データベースなしでも簡単なWebアプリが作れます。

もっと本格的にJavaScriptを学びたい方は、Learning Next Schoolでステップバイステップで学習できます。JavaScriptの基礎から応用まで、練習問題を解きながら確実に身につけられますよ。

さあ、今すぐブラウザの開発者ツールを開いて、最初のデータを保存してみましょう！

きっと、Webアプリ開発の新しい扉が開くはずです。

共有:

著者について

とまだ

フルスタックエンジニア

Learning Next の創設者。Ruby on Rails と React を中心に、プログラミング教育に情熱を注いでいます。初心者が楽しく学べる環境作りを目指しています。

著者の詳細を見る →

カテゴリ: