データベース以外でチェックボックスの状態を保存：ローカルストレージとCookieの利用比較

記事内に広告を含みます

この記事には広告を含む場合があります。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

はじめに
データの保存場所と選択肢
選択肢の比較と最適な選択
ローカルストレージは具体的にどこに保存されるのか
応用テクニック
1. LaravelのLivewireでローカルストレージを操作する
2. チェックボックスの状態をJSON形式で保存する
まとめと次のステップ

はじめに

チェックボックスの選択状態を保存しておき、再描画時に同じ選択状態を提供することは、ユーザーエクスペリエンスを向上させるために重要です。

セッションへ保存する方法が一番シンプルで簡単ですがログオフすると（セッション消すと）クリアされます。

今回は再ログイン後も前回と同じチェックボックスの選択肢状態を再現させます。

チェックボックスの状態の保存場所としてはデータベース、ローカルストレージやCookieなどの選択肢があります。本記事では、これらの方法を比較し、最適な保存方法を探ります。

データの保存場所と選択肢

セッションを使用する

チェックボックスの選択状態をセッションに保存することができます。しかし前述のように一般的にはログオフしたらクリアされてしまいますので、今回の場合は適切ではありません。

データベースを使用する

チェックボックスの選択状態をデータベースに保存することも考えられます。データベースを使用することで、大量のデータを効率的に管理することができます。

チェックボックスの状態を保存するテーブルを画面毎に作るのは適切ではありません。画面毎に同じようなテーブルが増えてしまうからです。

テーブル構成は汎用的に作りましょう。たとえば以下のようなテーブル構成です。

例えば、ユーザーごとに複数のチェックボックスの選択状態を管理する場合を考えます。

usersテーブル:
- id (主キー)
- name
- email
- password
- remember_token
- created_at
- updated_at
checkbox_statesテーブル:
- id (主キー)
- user_id (外部キー：usersテーブルのidカラム)
- checkbox_name (チェックボックスの識別子や名前など)
- is_checked (チェックボックスの選択状態を示すフラグ)

このテーブル構造では、usersテーブルにユーザーの基本情報を保存し、checkbox_statesテーブルには各ユーザーのチェックボックスの選択状態を保存します。checkbox_statesテーブルのis_checkedカラムは、チェックボックスが選択されているかどうかを示すフラグです。

このテーブル構造であればcheckbox_name が一意であればどんな画面にも応用できて柔軟性が高くなります。

しかし、ユーザ数とチェックボックス数の掛け算で、テーブルレコード数が増えてしまうという点がデメリットとしてあります。

データベースは永続的なデータ保存に適していますが、リアルタイムの操作には適さない場合もあります。そのため、ブラウザ側にデータを保存する方法が求められます。ここで注目すべきなのが、次に紹介するCookieとローカルストレージです。

Cookieへ保存する

CookieはWebサーバがWebブラウザにコンテンツを送信する際に制御情報の一部として一緒に送信する短いデータです。ブラウザは受け取ったデータをPCやスマホに保存します。ブラウザは受信したCookieを所定の期限までストレージ上で永続的に保管します。そして保存後は、同じWebサーバへリクエストを送る際に前回受け取ったCookieの内容をすべて送信します。

Cookieの中身はテキストなので、チェックボックスの選択状態をテキスト形式で保存しておけば、Cookieから取得することが可能となります。

Cookieもブラウザにデータを保存する方法の一つですが、一般的に小さいデータの保存に適しています。

実はチェックボックスの選択状態の保存先として、私はCookieを利用しようと最初に試みました。

うまく実現できたのですが、チェックボックスの量が増えたときに

「Your browser sent a request that this server could not understand.Size of a request header field exceeds server limit.」というエラーがブラウザに表示されるようになりました。

このエラーは、リクエストヘッダーのフィールドのサイズがサーバーの制限を超えた場合に表示されます。これは通常、Cookieのサイズが大きすぎるために発生します。クッキーはブラウザとサーバー間で情報をやり取りするための小さなデータの塊ですが、制限を超えるとこのようなエラーが発生します。サイズ上限は一般的に8KBから16KB程度のようです。

そのため、チェックボックスの数が増えると保存するテキストサイズが増えて上記のエラーが発生します。

チェックボックスの数は今後の仕様変更で増えていくことを考えると、チェックボックスの状態保存の場所としてCookieは適さないことがわかりました。

ローカルストレージへ保存する

ローカルストレージはブラウザにデータを保存するための仕組みです。セッションと異なりブラウザを閉じてもデータが保持されます。

そしてローカルストレージはブラウザにデータを保存するため、セッションやCookieよりも大容量であり、常にリクエストとレスポンスに情報が送受信されるCookieとは異なり、必要な時に読み書きするため、サーバーへの負荷も軽減できます。

ローカルストレージを使用して、チェックボックスの選択状態を保存することが可能です。

JavaScriptを使って簡単にデータを読み書きすることができます。以下にローカルストレージを使ったチェックボックスの状態保存の実装例を示します。

HTML

// ローカルストレージにデータを保存する
function saveToLocalStorage(key, value) {
    localStorage.setItem(key, value);
}

// ローカルストレージからデータを取得する
function getFromLocalStorage(key) {
    return localStorage.getItem(key);
}

// チェックボックスの状態をローカルストレージに保存する
saveToLocalStorage('checkbox_state', 'checked');

選択肢の比較と最適な選択

ローカルストレージとCookieを比較すると、ローカルストレージはデータの容量が大きく、JavaScriptで直接操作できるという利点があります。一方、Cookieはサイズ制限があるものの、サーバーにデータを送信する際にも利用されるため、一定の用途には適しています。データの保存量やセキュリティなどを考慮し、最適な保存方法を選択しましょう。

私の場合はローカルストレージへの保存が最適だと判断し、採用しました。

ローカルストレージは具体的にどこに保存されるのか

ローカルストレージはブラウザ内に保存されるため、パソコンのCドライブや他のファイルシステム上の場所に直接保存されるわけではありません。ブラウザはローカルストレージをウェブアプリケーションのための専用領域として確保し、データをそこに保存します。

具体的には、各ブラウザごとに異なる場所にローカルストレージが保存されますが、一般的には次のような場所に保存されることがあります。

Windows:
- Google Chrome: %LocalAppData%\Google\Chrome\User Data\Default\Local Storage
- Mozilla Firefox: %AppData%\Mozilla\Firefox\Profiles\<profile>\storage
- Microsoft Edge: %LocalAppData%\Microsoft\Edge\User Data\Default\Local Storage
macOS:
- Google Chrome: ~/Library/Application Support/Google/Chrome/Default/Local Storage
- Safari: ~/Library/Safari/LocalStorage
- Mozilla Firefox: ~/Library/Application Support/Firefox/Profiles/<profile>/storage
Linux:
- Google Chrome: ~/.config/google-chrome/Default/Local Storage
- Mozilla Firefox: ~/.mozilla/firefox/<profile>/storage

上記のパスは一般的な場所ですが、実際の保存場所はブラウザのバージョンや設定によって異なる場合があります。また、プロファイル（ユーザーごとの設定やデータを保持するディレクトリ）に保存されることが一般的です。

ブラウザのローカルストレージはウェブアプリケーションから直接アクセスすることはできず、ブラウザの開発者ツールや特殊な手段を用いて閲覧することが可能です。

応用テクニック

LaravelのLivewireでローカルストレージを操作する

JavaScriptをLivewireコンポーネントに組み込む: この段階では、JavaScriptの関数やイベントリスナーをLivewireコンポーネントのビュー（Bladeファイル）に組み込みます。具体的には、@livewireScriptsディレクティブを使用してJavaScriptを読み込むことができます。

HTML

<!-- Livewireコンポーネントのビュー -->
@livewire('your-livewire-component')

<!-- JavaScript -->
@livewireScripts
<script>
    // ローカルストレージにデータを保存する関数
    function saveToLocalStorage(key, value) {
        localStorage.setItem(key, value);
    }

    // ローカルストレージからデータを取得する関数
    function getFromLocalStorage(key) {
        return localStorage.getItem(key);
    }
</script>

LivewireコンポーネントでJavaScriptを実行する: LivewireコンポーネントのPHPファイルで、JavaScriptを実行するためのメソッドやアクションを定義します。これにより、LivewireコンポーネントからJavaScriptを呼び出すことができます。

php

?php

namespace App\Http\Livewire;

use Livewire\Component;

class YourLivewireComponent extends Component
{
    public function saveToLocalStorage($key, $value)
    {
        $this->dispatchBrowserEvent('save-to-local-storage', ['key' => $key, 'value' => $value]);
    }

    public function getFromLocalStorage($key)
    {
        $this->dispatchBrowserEvent('get-from-local-storage', ['key' => $key]);
    }

    public function render()
    {
        return view('livewire.your-livewire-component');
    }
}

JavaScriptイベントをLivewireコンポーネントで処理する: LivewireコンポーネントのJavaScriptセクションで、ブラウザイベントを処理するJavaScriptを記述します。具体的には、Livewireのイベントをリッスンし、そのイベントに対応するJavaScriptの処理を定義します。

javascript

// LivewireコンポーネントのJavaScriptセクション
document.addEventListener('DOMContentLoaded', function () {
    Livewire.on('save-to-local-storage', ({ key, value }) => {
        saveToLocalStorage(key, value);
    });

    Livewire.on('get-from-local-storage', ({ key }) => {
        let value = getFromLocalStorage(key);
        // Livewireで処理する（例: プロパティにセットするなど）
        Livewire.emit('local-storage-value', value);
    });
});

以上の流れで、実際にローカルストレージにデータを保存する場合は、次のような手順になります。

ユーザーのアクションや特定のイベント（例: ボタンクリックなど）が発生すると、Livewireコンポーネント内のメソッドでJavaScriptを実行するように指示します（例: saveToLocalStorageメソッドを呼び出す）。
saveToLocalStorageメソッドが実行されると、対応するJavaScriptの処理が実行されます（save-to-local-storageイベントが発生）。
JavaScriptの処理では、実際にローカルストレージにデータを保存します。

つまり、Livewire側でメソッドを呼び出すことで、JavaScriptの処理が実行され、最終的にローカルストレージにデータが保存される流れとなります。