- カテゴリー
- ブラウザDB・ストレージ
- 公開日
- 2026.10.05
Contents
はじめに
入力欄に書いたメモは、ページを再読み込みするとどうなるでしょうか。通常、入力欄に表示されている文字はページを開いている間の画面上の状態です。ブラウザー内の保存領域へ書き込めば、再読み込み後にアプリがデータを読み直して表示できます。
この記事では、ブラウザー保存を試してみたい初心者に向けて、短いメモを保存する実験を紹介します。デモで保存・再読み込み・削除を行い、画面上の値と保存されたデータの違いを確かめます。
今回扱う内容・完成物
今回の完成物は、短いメモをブラウザー内に保存し、ページを開いたときに読み直す小さなデモです。データの保存にはOPFS（Origin Private File System）を使います。
メモは使っているブラウザー内に保存されます。
まず予想する
メモを入力して保存したあと、ページを再読み込みしたらどうなると思いますか。
- メモは消える
- メモは同じ欄に戻る
結果を予想したら、次の手順で試してみましょう。
デモを試す
別タブで開きます。この記事の手順を見ながら試せます。
この回の動作確認対象は、WindowsのGoogle ChromeとiPhone 17 Pro MaxのSafariです。iPhoneでの確認はサイト管理者による実機テストの報告に基づきます。コードの作成やソフトのインストールは不要です。デモページを開き、入力欄とボタンが使える状態になってから試してください。
- 実験用メモに、個人情報を含まない短い文を入力します。
- 保存を押します。
- ブラウザーの再読み込みボタンを押します。
- 入力欄に同じ文が戻ったかを確認します。
- 保存データを削除を押し、もう一度再読み込みします。
- 今度は入力欄が空になることを確認します。
削除したメモを戻す機能はありません。 消してよい実験用の文だけを入力してください。削除の対象はこのデモ専用の保存ファイルです。
このデモは入力した文をサーバーへ送信しません。ブラウザー内でも、共有端末では個人情報や他人に見られたくない内容を入力しないでください。
結果を見る
保存後の再読み込みでメモが戻った場合、ページが開いたまま入力欄を保持していたわけではありません。デモが起動時にブラウザーの保存領域を調べ、保存データを読み込んで入力欄へ設定しています。
保存データを削除してから再読み込みすると空欄になるのは、次に読み込むファイルがなくなったためです。入力欄が空であることと、空の内容を保存したファイルが存在することは、保存先では別の状態です。
仕組み：OPFSから読み直す
OPFSは、Webサイトごとにブラウザーが管理する非公開のファイル領域です。通常のファイルとしてエクスプローラーに表示される場所ではなく、WebページはFile System Access APIの一部を通してファイルを読み書きします。MDN: Origin private file system
今回のデモでは、次の流れでデータを扱います。
navigator.storage.getDirectory()で、このサイトのOPFSのルートを取得します。- 実験専用フォルダーとメモ用ファイルを取得します。
- 保存時は書き込み先を開き、文字列を書いて閉じます。
- 次にページを開いたとき、ファイルを読み、その内容を入力欄に表示します。
getDirectory()はセキュアコンテキストで使います。公開サイトではHTTPS、ローカル開発ではlocalhostなどの環境で試してください。利用できるAPIやプライベートブラウズ時の挙動はブラウザーによって異なることがあります。MDN: StorageManager.getDirectory()
必要環境と制約
- OPFSを利用できるブラウザーで、HTTPSまたは
localhostからページを開いてください。 - 保存領域の容量は無制限ではありません。容量上限やデータの扱いはブラウザー・端末・利用状況によって変わります。MDN: Storage quotas and eviction criteria
- ユーザーがサイトデータを削除した場合など、保存したデータが消えることがあります。OPFSをバックアップや重要データの保管先として使わないでください。
- デモは実験専用のファイルだけを削除します。OPFS全体や他のサイトデータは削除しません。
- データを別タブへ同期したり、ファイルとして書き出したりする機能は、この回には含めていません。
動作確認
WindowsのGoogle ChromeでHTTPSの実URLにアクセスし、保存・再読み込み後の復元・削除・削除後の再読み込みを確認しました。日本語と改行、空文字の保存、400文字までの入力、保存データがないときの削除も確認しています。
WordPressの記事プレビューと実URLのデモは、PC表示と幅390px・320pxのスマートフォン相当の表示で確認しました。これはPCブラウザーで画面幅を模擬した確認です。実機では、iPhone 17 Pro MaxのSafariで保存・再読み込み後の復元・削除・削除後の再読み込みを確認できたとの報告を、サイト管理者から受けています。FirefoxおよびmacOSのSafariでの実URLの動作は未確認です。未対応API、保存領域の初期化拒否、保存時エラーの表示はローカルでテスト用に模擬して確認しています。
トラブル対処
OPFSを使えないという案内が表示される
HTTPSまたはlocalhostで開いているか、ブラウザーがOPFSに対応しているかを確認してください。プライベートブラウズや組織のポリシーなどで保存領域を開けない場合もあります。
保存や読み込みに失敗する
ブラウザーのサイトデータ設定、利用可能な容量、プライベートブラウズの設定を確認します。ブラウザーの開発者ツールを使える場合は、コンソールに出る詳細も確認してください。重要なデータをこの保存領域だけに置かないでください。
再読み込み後にメモが戻らない
保存ボタンを押したときに成功メッセージが出たか確認します。別のブラウザープロファイルや別のオリジン（プロトコル・ホスト・ポートの組み合わせ）を開いていないかも確認してください。OPFSはサイトのオリジンごとに分かれています。
まとめ
入力欄に表示される文字は画面上の状態です。保存ボタンを押してOPFSへ書き込み、ページ起動時に読み直す処理があれば、再読み込み後にも同じ文字を表示できます。ただし、ブラウザーの保存領域は永久保存やバックアップを保証するものではありません。
OPFSの詳しい説明や、自分でメモ保存アプリを作る手順は、OPFS入門記事で扱っています。この記事では、まず実際に操作し、結果を観察することに焦点を当てました。
参考リンク
- WHATWG: File System Standard
- MDN: Origin private file system
- MDN:
StorageManager.getDirectory() - MDN: Storage quotas and eviction criteria
実験ナビゲーターのキャラクターは、この企画用にAIで生成したオリジナル素材です。
コメント