JavaScript #8：電卓の履歴をローカルストレージに保存する

公開：」2026.05.09(土) 18:38

※ 記事一覧
← JavaScript #7：電卓に履歴機能を追加する

電卓の履歴をローカルストレージに保存する

1. LocalStorage(ローカルストレージ)

ブラウザにデータを保存するための仕組み
VB.NETでいうところの「設定ファイル（App.config / Settings.settings）」や「簡易的なXML保存」に近い感覚
サーバーやデータベースを用意しなくても、ユーザーのブラウザ内にデータが残り続ける

2. LocalStorageの特徴

・永続性：ブラウザを閉じても、PCを再起動してもデータは消えない
・容量：約5MBまで
・形式：文字列(String)のみ

3. main.js修正

◆ "="ボタンクリックの差異、履歴(historyData配列)を文字列へ変換しLocalStorageに"calculate-history"の名前で保存

　：
} else if (value === '=') {
　：
    if (result !== 'Error') {
        historyData.unshift(`${expression} = ${result}`);
        renderHistory();
        saveHistory();
　：
// ローカルストレージへの保存
function saveHistory() {
    // 配列をJSON文字列に変換して保存
    localStorage.setItem('calculator-history', JSON.stringify(historyData));
}

◆ アプリ起動時にLocalStorageより"calculate-history"のデータを取り出し配列に変換、historyData配列に保存
また、renderHistoryメソッドを呼び出し画面に履歴を描画する

// ローカルストレージからの復元
function loadHistory() {
    const savedData = localStorage.getItem('calculator-history');
    if (savedData) {
        // JSON文字列を配列に戻す
        historyData = JSON.parse(savedData);
        renderHistory();
    }
}

// 起動時に実行
loadHistory();

これで ブラウザでF5キーでリロード しても履歴が消えなくなる

参考(全体ソース)

main.js

import './style.css'
import { calculate, clearDisplay } from './calculatorLogic.js'
 
const display = document.getElementById('display');
const buttons = document.querySelectorAll('#calculator .buttons button');
// 履歴を表示するulノード
const historyList = document.getElementById('history-list');
// 履歴をクリアするボタン
const clearHistoryBtn = document.getElementById('clear-history');

// 履歴を格納するための historyData配列 を追加
let historyData = [];

buttons.forEach(button => {
    button.addEventListener('click', () => {
        const value = button.textContent;
 
        if (value === 'C') {
            display.value = clearDisplay();
        } else if (value === '=') {
            // "="の処理で historyData配列 へ値の追加と liノードの追加
            const expression = display.value;
            const result = calculate(display.value);

            if (result !== 'Error') {
                historyData.unshift(`${expression} = ${result}`);
                renderHistory();
                saveHistory();
            }
            display.value = result;
        } else {
            display.value += value;
        }
    });
});

// 履歴クリア処理
function renderHistory() {
    historyList.innerHTML = '';

    historyData.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        historyList.appendChild(li);
    });
}

//  履歴をクリアボタンにイベント登録
clearHistoryBtn.addEventListener('click', () => {
    historyData = [];
    renderHistory();
});

// ローカルストレージへの保存
function saveHistory() {
    // 配列をJSON文字列に変換して保存
    localStorage.setItem('calculator-history', JSON.stringify(historyData));
}

// ローカルストレージからの復元
function loadHistory() {
    const savedData = localStorage.getItem('calculator-history');
    if (savedData) {
        // JSON文字列を配列に戻す
        historyData = JSON.parse(savedData);
        renderHistory();
    }
}

// 起動時に実行
loadHistory();

---

"JavaScript 学習"