「保存しました」で安心しない。ブラウザ保存とバックアップの違い

この記事の目次開く・閉じる

今回の仕上がり

「星を10個集める。失敗したら再挑戦。」を保存し、再読み込み後に読み戻しました。さらに文字列のmemoを持つJSONを入力欄へ復元。memoが数値のJSONは拒否されました。JSON出力では、ダウンロードされた80バイトのファイル内容も確認しました。

下の画面は、実際に触れる作例です。静止画で動きを再現したものではありません。

作例を別画面で開く → · サンプル一式をダウンロード（ZIP）

有効なJSONを入力欄へ復元した実画面。復元しただけでは保存済みメモを変更しません。タップして拡大できます。

必要なものと、試す順番

ブラウザと、ダウンロード先を確認できるPCがあると試しやすくなります。実験用のメモだけを使ってください。個人情報・パスワード・仕事上の秘密は入力しません。

メモに「星を10個集める。失敗したら再挑戦。」と入れ、「このブラウザに保存」を押します。
ページを再読み込みし、「保存したメモを読む」を押します。表示が初期値に戻っただけで、保存失敗と決めつけないでください。読み戻した内容を確認します。
「JSONをダウンロード」を押し、保存先のmikke-memo-backup.jsonを開きます。versionが1、memoが自分のメモになっているか見ます。
「バックアップを復元する」を開き、ファイルのJSONを貼って「入力欄へ復元」を押します。入力欄を見直し、残したい内容なら保存します。

仕組みを知る

ブラウザ内の保存は、バックアップと同じではない

MDNによると、localStorageはオリジンごとに分かれ、ブラウザのセッションをまたいで保持されます。ただし利用者の設定などでアクセスが拒否されることがあります。プライベート閲覧やサイトデータの削除も考え、自分の大切な記録をこれだけに預けない方が安心です。

この作例は専用キーmikke-quick-checks-memo-v1だけを読み書きします。みっけメディアの閲覧設定を変更するものではありません。保存や読み出しはtry/catchで囲み、失敗時に「保存しました」と表示しないようにしました。

復元は、読む・確かめる・保存するの順番で

JSON.parseで読めることと、アプリが使える形式であることは別です。今回はversionが1、memoが文字列、長さが2000以内という条件も確かめます。memoが123のJSONは文章のメモではないので拒否します。

復元できた内容はまず入力欄へ出します。利用者が確認し、保存ボタンを押すまで保存領域を変えません。誤ったファイルを貼ったときに、保存済みのメモまで消えてしまうのを避けるためです。文字の表示にはtextContentやvalueを使い、復元内容をHTMLとして挿入していません。

コードの要点

const data = JSON.parse(text);
if (!data || data.version !== 1 ||
    typeof data.memo !== "string" || data.memo.length > 2000) {
  throw new Error("format");
}
memo.value = data.memo; // 確認してから別の保存ボタンで保存

JSON.parseと検証をまとめてtry/catchで囲んだ全体コードをZIPに入れました。バックアップファイルは暗号化していない普通のテキストです。

自作のHTML・CSS・JavaScriptはCC0です。ZIP内のREADMEと、共通のサンプル利用条件をご確認ください。

できたかの確認と、よくあるつまずき

再読み込み後、保存した文章を読み戻せる。
ダウンロードしたJSONに、意図した文章が入っている。
不正な形式は拒否され、保存済みの内容が勝手に変わらない。

ここに注意。file:で開いたHTMLのlocalStorageは、ブラウザによって扱いが異なります。保存の作例はサイト上、またはHTTP配信で試してください。

ここに注意。ダウンロード開始の表示は、ファイル保存完了の証拠ではありません。実際の保存先と内容を確認しましょう。

出典と、確認した範囲

作例の確認日：2026年10月3日。個別の条件と未確認範囲は以下の通りです。共通の検証方法も公開しています。

保存・再読み込み・読み戻し、正常と型が違うJSONの復元、出力ファイルの内容を確認しました。容量上限や保存拒否を実際に発生させる試験、端末間同期は未検証です。

MDN：localStorage — 保存単位、継続性、例外とfile:の扱い。

MDN：JSON.parse — JSONの読み取りと構文エラー。

記事一覧へ戻る →