二仙ツールは、ブラウザだけで動く小さな無料ツールの集まりです。文章や画像を、利用者の手元で処理することを基本方針にしています。
その特徴の１つが、入力データを長期間保存せず、使っている間だけメモリ上に保持するという設計です。
この記事では、ブラウザがデータを扱う３つの仕組み、「ローカルストレージ」、「Cookie（クッキー）」、「メモリ」の違いをまとめます。データがどこに残り、いつ消えるのか。便利さと安全性にどんな違いがあるのかを、非エンジニアの方にも分かる形で整理します。
ローカルストレージ（localStorage）とは？
ローカルストレージとは、Webサイトのデータをブラウザ内に保存し、ページを閉じた後も利用できる仕組みです。
例えば、あるサイトで画面を「ダークモード」に切り替えたとします。次の日に同じサイトを開いたとき、何もしなくてもダークモードのままだったら便利ですよね。
こうした「前回の設定を覚えておく」用途に使えるのが、ローカルストレージです。
データは基本的に利用者のブラウザ側に保存されます。サイトを開くたびに、サーバーへその設定を問い合わせなくても、ブラウザが保存した値を読み取れるわけです。
どれぐらい保存できるの？
容量の目安は、１つのオリジンにつき約５MiBです（MDNの解説はこちら）。オリジンとは、簡単にいうとWebサイトの保存領域を区切る単位で、ドメインだけでなく通信方式やポート番号も関係します。
５MiBは約524万バイト。5.24メガバイトちょっとの容量なので、わかりやすい事例をあげると、iPhoneなどで撮影した高解像度写真１枚分ぐらいの容量です。
「少ない！」と思われるかもしれませんが、短い設定情報を保存するには十分な大きさです。もっとも、写真や動画を大量に保存するような使い方には向いていません。
メリットは、ブラウザを終了したりPCを再起動したりしても、通常はデータが残ることです。利用者が毎回同じ設定をやり直さずに済みます。
例えば、私の息子（小学校低学年）は最近、ブラウザのタイピングゲームにハマっています。（桃太郎のRPGみたいなやつです）
息子はメールアドレスも持っていないので、完全に無登録の状態（アカウントなし）で、そのブラウザゲームを毎日楽しんでいるのですが、クリアしたゲームの記録はずっと残ったまま、記録されています。
では、そのゲームのアカウントを持っていない息子のゲーム履歴のデータはどこに残っているのか？
その答えがブラウザの「ローカルストレージ」にあります。データは息子の使っているパソコンのブラウザの中の保存領域（ローカルストレージ）に記録されていたのです。
ただ、この「残る」という性質は、扱う情報によってはデメリットになります。
例えば、個人情報や秘密にしたい文章を不用意に保存してしまうと、同じパソコンを使う人に見られたり、不正なプログラムに読み取られたりする危険があります。
ローカルストレージはJavaScriptから読み書きできるため、サイト内で不正なJavaScriptが実行される攻撃（XSS）にも注意が必要です。ログイン用の秘密情報などを安易に入れるべきではありません。（逆に言うと、ゲーム履歴の情報程度なら問題ないということです）
なお「一度保存すると半永久的に残る」と思われがちですが、絶対ではありません。利用者がサイトデータを削除した場合や、ブラウザ側の保存データ管理によって削除される場合があります。もちろん、PCをリセットした場合も消去されます。（ゲーム履歴が消えたら、息子はおそらく泣くことになるでしょう）
また、最近のブラウザに搭載されている「プライベートブラウジング」機能を利用した場合は、プライベートタブを閉じた時点でローカルストレージのデータは消去される仕組みになっています。
便利な設定は覚えてもらい、機密情報は安易に保存しない。そんな使い分けに適しているのが「ローカルストレージ」です。
Cookie（クッキー）とは？
Cookieとは、Webサイトがブラウザに保存する小さなデータで、サーバーとのやり取りにも使われる仕組みです。
例えば「ログイン状態の維持」が最も身近な例だと思います。
会員サイトで毎回IDとパスワードを入力するのは面倒です。そこでログイン済みの利用者を識別する情報をCookieとしてブラウザに持たせる方法が使われます。
一言でいうと、サーバーに見せる会員証のようなものです。ただし、Cookieにパスワードそのものが入るとは限らず、通常はログイン状態と結びつく識別情報などを扱います。
ローカルストレージとの一番の違いは？
Cookieの特徴は、条件に一致するWebサイトへの通信時に、ブラウザがCookieを自動的に添えて送信することです。
一方、ローカルストレージは、保存したデータが通信のたびに自動で送られる仕組みではありません。Cookieがログイン管理に使われる理由の１つです。
ただし、Cookieがどこにでも送られるわけではありません。送信先はドメイン、パス、HTTPSやサイト間の通信に関する設定などで制限されます。
Cookie１個の容量は一般に約４KBです。（MDNの解説はこちら）
保存期間も設定できます。例えば「１週間後に期限切れ」という指定が可能です。一方、有効期限を指定しないものはセッションCookieと呼ばれ、通常はブラウザのセッション終了時に削除されます。
期限を設定しておくことで、ログイン後１週間は再ログインなしで会員ページにアクセスできるが、期限が来ると再ログインが必要になる。という、よくあるログインページの動作が実現できます。
ただし、ブラウザのセッション復元機能によって、再起動後も残る場合があるので注意が必要です。
Cookieは危険なの？
Cookieそのものが危険というわけではありません。設定次第で、機密性の高い情報を扱うための対策もできます。
例えば「HttpOnly」という属性を付けると、JavaScriptからそのCookieを直接読み取れなくなります。「Secure」は、Cookieの送信を原則HTTPS通信に限定するための属性です。
ただしHttpOnlyを付ければ、あらゆる攻撃を防げるわけではありません。悪意のあるJavaScriptがページ内で動いてしまえば、利用者のログイン状態を悪用して操作されるなど、別のリスクは残ります。
また、Cookieには広告やアクセス解析に使われるものもあります。
メモリ上でデータを保持するとは？
メモリ上での保持とは、Webページを使っている間、JavaScriptの変数などにデータを一時的に置いておく仕組みです。
PCやスマートフォンには、作業中の情報を一時的に扱う「メモリ（RAM）」があります。PCを購入するとき、スペック表を見て「メモリが◯ギガバイトだから、このPCは高スペックだ。」と考える人も多いかと思います。
ブラウザも、そのメモリを使って画面の表示や入力内容の処理を行っています。
例えば、Webページの入力欄に文章を打ち込み、その場で文字数を数えるツールがあったとします。入力した文章をローカルストレージやCookieに書き込まなくても、JavaScriptの変数に一時的に保持して処理できます。
言い換えると、使う間だけ机の上に資料を広げ、作業が終わったら片付けるような考え方です。
いつまでデータが残るの？
基本的には、そのページの実行状態が続いている間です。
通常の再読み込みではJavaScriptの状態が初期化されるため、メモリ上にしか置いていない入力データは失われます。タブを閉じてページが終了した場合も、通常はその状態を使い続けることはできません。
これは、前回の設定を覚えておきたい場合には不便です。前述したローカルストレージやCookieとは、明らかに扱いが違います。
一方、扱っているデータを長期間残したくない場合にはメリットになります。これが「メモリ保持」の強みです。
また、ローカルストレージの約５MiBのような決まった保存上限があるわけではありません。利用できる量は利用者が使っているPCやスマホのメモリや、ブラウザの制約に左右されます。もちろん無制限ではなく、大きすぎるデータを扱えば動作が重くなったり、処理に失敗したりします。
ページを移動したら必ず消える？
実は、そうとも限りません。
ブラウザには、前のページに「戻る」ときに素早く前のページを表示するため、ページの状態を一時的に残す「bfcache（バック・フォワードキャッシュ）」という仕組みがあります。
この機能が働くと、JavaScriptの変数を含むページの状態が残り、戻る操作で以前の入力内容が復元される場合があります。
そのため、単に「メモリにしか保存していないから、ページを離れれば確実に消える」とは言えません。
もう１つ気を付けたいのが安全性です。メモリ上のデータであっても、ページ内で不正なJavaScriptが実行されるXSS攻撃などによって、処理中の情報を盗み取られる可能性があります。
メモリ方式の強みは、あらゆる攻撃から守れることではなく、不要になったデータを長期間残さずに済むこと。私はこの点に価値があると考えています。
３つの保存方式を比較して違いを知る
３つの方式は、保存する期間、サーバーとの通信、得意な用途が違います。
いったん表で整理してみます。
| 比較項目 | ローカルストレージ | Cookie | メモリ |
|---|---|---|---|
| 保存容量 | １オリジン約５MiBが目安 | １個約４KBが目安 | 端末・ブラウザの制約による |
| 保存期間 | 通常は終了後も残る | 期限やセッションによる | 基本的にページの実行中だけ |
| 通信時の自動送信 | されない | 条件に応じて送信 | されない |
| 主な用途 | 画面設定など | ログイン管理など | 入力内容の一時処理など |
| 主な弱点 | 長期間残る場合がある | 設定によって送信・漏えいのリスク | 再読み込みで失われやすい |
※容量は一般的な目安であり、ブラウザや保存条件によって異なります。
ここで気を付けたいことがあります。「自動送信されない」は「外部に送信できない」という意味ではありません。
例えばメモリ上に保持している文章でも、Webサイトに送信処理が組み込まれていれば、サーバーへ送ることができます。ローカルストレージのデータも同じです。
つまり、「どこに保存するか」と「外部へ送れるか」は別々の話ということです。
設定を次回も覚えておきたいならローカルストレージ。サーバー側でログインを管理するならCookie。その場で処理して終わるデータならメモリ。このように用途から考えるのが自然だと思います。
なぜ二仙ツールでは入力データを長期間保存しないの？
二仙ツールでは、利用者が入力したデータを必要以上に残したくないため、メモリ上での一時的な保持を基本としています。
私が公開している二仙ツールには、文章を扱うものや、画像を読み込むものなどがあります。こうしたツールで扱うデータには、名前や住所、仕事の内容など、他人には見せたくない情報が含まれる場合もあるはずです。
もちろん、入力内容を保存できれば、次回その続きから作業を再開できて便利です。
それでも私は、「使い終わったデータを、ツール側でいつまでも覚えておく必要があるのか？」と考えています。
１回処理して結果をコピーしたり、必要なファイルを自分で保存したりできれば、入力途中の情報までツールに残しておく必要はない。そういうケースも多いと思うんです。
そこで、二仙ツールでは原則、入力データは保存せず、使い終わったらその場ですぐ消去するように設計しています。
入力内容も送信せず利用者のPC・スマホの中で処理します
そして、もう１つの設計方針が、入力した内容をツールの処理のために外部サーバーへ送らず、ブラウザ内で処理することです。データを長期間保存しないこととは別に、通信の面でもプライバシーに配慮する考え方です。
入力内容を外部のサーバーに送らないとはどういうことか？については「ブラウザだけで処理するってどういうこと？サーバーに送信しない仕組みを解説」に書いています。
これからも二仙ツールでは、できるだけシンプルで、プライバシーに配慮した仕組みで開発をしていきたいと思います。