JavaScriptを使うことで、ブラウザ内でデータを永続的に保存し、後でアクセスすることができます。以下では、window.localStorage、window.openDatabase()、window.indexedDB について詳細に解説し、それぞれの使い方や例を紹介します。

• window.localStorage
• window.openDatabase()
• window.indexedDB

window.localStorage

localStorageは、キーと値のペアでデータを保存するための簡単なAPIです。データはブラウザを閉じても維持されます。

主な特徴

• キーと値は文字列で保存される。
• データのサイズ制限は約5MB。
• データはブラウザを閉じても保持される。

基本的な使い方

// データの保存
localStorage.setItem('key', 'value');

// データの取得
const value = localStorage.getItem('key');
console.log(value); // 'value'

// データの削除
localStorage.removeItem('key');

// 全データの削除
localStorage.clear();
    

具体例

例えば、ユーザーがダークモードを選択したかどうかを保存します。

// ダークモードの設定を保存
localStorage.setItem('theme', 'dark');

// 設定の取得
const theme = localStorage.getItem('theme');
if (theme === 'dark') {
    console.log('ダークモードが有効です。');
} else {
    console.log('ライトモードです。');
}
    

window.openDatabase()

openDatabaseは、Web SQL Database APIを利用するためのメソッドです。ただし、このAPIは現在非推奨とされ、新しいプロジェクトではindexedDBを使用することが推奨されています。

主な特徴

• 構造化されたデータをSQL形式で保存可能。
• ブラウザ間での互換性が限定的（現在は主要ブラウザでは非推奨）。

基本的な使い方

// データベースを開く
const db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

// データの挿入
db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "こんにちは")');
});

// データの取得
db.transaction(function (tx) {
    tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
        const len = results.rows.length;
        for (let i = 0; i < len; i++) {
            console.log(results.rows.item(i).log);
        }
    });
});
    

※非推奨のため、移行先としてindexedDBを検討してください。

window.indexedDB

indexedDBは、構造化データを保存するためのモダンなブラウザAPIです。大量のデータを保存し、検索や操作が可能です。

主な特徴

• 非同期で動作し、高速。
• オブジェクトストアを使用して、キーと値のペアを保存。
• ブラウザ間の互換性が高い。

基本的な使い方

// データベースを開く
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function (event) {
    const db = event.target.result;
    db.createObjectStore('myStore', { keyPath: 'id' });
};

request.onsuccess = function (event) {
    const db = event.target.result;
    
    // トランザクションの作成
    const transaction = db.transaction('myStore', 'readwrite');
    const store = transaction.objectStore('myStore');

    // データの追加
    store.add({ id: 1, name: 'John Doe', age: 30 });

    // データの取得
    const getRequest = store.get(1);
    getRequest.onsuccess = function () {
        console.log(getRequest.result); // { id: 1, name: 'John Doe', age: 30 }
    };
};
    

具体例

ユーザー情報を保存し、後で検索する例を考えます。

// データベースを開く
const request = indexedDB.open('userDB', 1);

request.onupgradeneeded = function (event) {
    const db = event.target.result;
    db.createObjectStore('users', { keyPath: 'username' });
};

request.onsuccess = function (event) {
    const db = event.target.result;

    // データの保存
    const transaction = db.transaction('users', 'readwrite');
    const store = transaction.objectStore('users');
    store.add({ username: 'alice', email: 'alice@example.com' });

    // データの取得
    const getRequest = store.get('alice');
    getRequest.onsuccess = function () {
        console.log(getRequest.result); // { username: 'alice', email: 'alice@example.com' }
    };
};
    

必要に応じて、indexedDBのトランザクションやインデックスを活用することで、さらに柔軟なデータ操作が可能です。