きになるノート気になったことを中心に調べたメモ

このサイトは、ほんの入り口です

ここにあるのは、だれかが実際に調べ、考え、作ってきたことを集めたメモです。気になったら、ページの下の「参考にした情報源」から、もとの本や記事、それを生み出した人たちに、直接ふれてみてください。このメモには書ききれないおもしろさが、そこにあります。

パソコンは、どうやって「まえの せってい」を おぼえて いるの？

パソコンは、どうやって「前の設定」を覚えているのか ── クッキーとlocalStorageのしくみ

パソコンは、どうやって「前の設定」を覚えているのか ── クッキーとlocalStorageのしくみ

分野：技術

サイトを ひらくと、まえに えらんだ ボタンの ままに なって いる ことが あります。

だれかが、どこかに メモして いるのでしょうか。

この きじでは、その「見えない メモちょう」の しょうたいを さがして いきます。

サイトを開くと、前に選んだボタンのままになっていることがあります。

誰かが、どこかにメモしているのでしょうか。

この記事では、その「見えないメモ帳」の正体を探っていきます。

サイトを開くと、前に選んだボタンの状態を覚えてくれていることがある。誰がどこにメモしているのだろうか。

1994年、アメリカのルー・モントゥーリが「クッキー」というしくみを発明した。それから15年ほどたって、もっと多くの情報を保存できる「localStorage」というしくみも登場した。見えないデジタルのメモ帳は、実はパソコンの中に、小さなファイルとして本当に存在している。その正体をたどる。

読み方を切り替えられます。画面の上にある「よみかた」のボタンで、小学校低学年むけ・小学校高学年むけ・中学生むけの3つの書き方に切り替わります。むずかしいと思ったら、いつでもやさしい方に戻ってください。選んだ読み方はブラウザが覚えているので、次に別の記事を開いたときも同じ読み方で始まります。

2. クッキーの しくみ

2. クッキーのしくみ

2. クッキーのしくみと制限

クッキーは、サイトを 見る たびに、じどうで やりとりされます。この サイトの「よみかた」ボタンも、にた しくみで、まえに えらんだ ものを おぼえて おけます。

ただし、クッキーに ためて おける じょうほうは、あまり おおくは ありません。絵本えほん いっさつぶんも 入らない くらいの、小さな メモちょうです。

クッキーは、そのサイトのページを見るたびに、ブラウザからサーバーへ自動的に送られます。サーバー側はこのクッキーを受け取るので、「あ、これは前にも来た人だ」と分かります。

小さなメモ帳

ただし、クッキー1つに保存できる情報の量は、仕様上の目安で4096バイト（約4キロバイト）しかありません［2］。小さなメモに、必要な情報だけを書いておくイメージです。

クッキーは、そのサイトへの通信のたびに、ブラウザからサーバーへ自動的に送信される。サーバー側は、送られてきたクッキーの中身を見て、「これは前にも来た利用者だ」と判断できる［2］。

小さなメモ帳

ただし、クッキー1つに保存できる情報の量は、仕様上の目安で4096バイト（約4キロバイト）に制限されている［2］。通信のたびに送信される性質上、あまり大きな情報を保存する用途には向いていない。

3. もっと おおく おぼえられる しくみ

3. もっと多く覚えられる「localStorage」

3. 2000年代に登場した「localStorage」

クッキーが うまれてから 15年ほど あと、もっと たくさんの じょうほうを おぼえて おける「localStorage （ローカルストレージ）」と いう しくみも つくられました ［2］。

localStorageに しまった メモは、サーバーには おくられず、その パソコンの中に のこります。ちょうど、じぶんの つくえの ひきだしに メモを しまって おくのに にて います。クッキーと ちがって、この メモは、サイトに まいかい おくられる ことは ありません。

クッキーが生まれてから15年ほどあと、もっとたくさんの情報を覚えておける「localStorage（ローカルストレージ）」というしくみも作られました［2］。

サーバーには送られない

localStorageに保存した情報は、クッキーとちがって、通信のたびにサーバーへ送られることはありません。その代わり、保存できる量はクッキーよりずっと多く、ブラウザによって5〜10メガバイトほどになります［2］。このサイトの「よみかた」ボタンの記憶も、このlocalStorageを使っています。

WHATWGとW3Cという団体が、より多くの情報を保存できる「Web Storage」というしくみの使い方を決める作業を2005年ごろに始めた。2009年ごろには主要なブラウザへの実装も進み、その中の1つが「localStorage」だ［2］。

サーバーには送られない

localStorageに保存した情報は、クッキーとちがって、通信のたびにサーバーへ自動送信されることはない。その代わり、保存できる量はクッキーよりずっと多く、ブラウザにもよるが5〜10メガバイトほどになる［2］。このサイトの「よみかた」ボタンの記憶にも、このlocalStorageが使われている。

4. その メモちょうは、どこに あるの？

4. そのメモ帳は、どこにあるのか

4. デジタルのメモ帳の、本当の置き場所

クッキーも localStorageも、じつは くうきの ように 見えない ところに あるのでは ありません。

パソコンの中の、ブラウザ せんようの ばしょに、 ほぞんされて います ［3］。ブラウザに よって ほぞんの しかたは ちがいます。

クッキーもlocalStorageも、置いてある場所はパソコンの中です。

パソコンの中の、ブラウザ専用の場所に保存されています［3］。ブラウザによって、保存のしかたはちがいますが、データベースなどの形で整理されていることが多いです。

クッキーもlocalStorageも、置いてある場所はパソコンの中だ。

パソコンの中の、ブラウザ専用の場所に、実際にデータとして保存されている［3］。保存場所や形式はブラウザによって異なるが、多くのブラウザでは、SQLiteなどのデータベース形式でこれらの情報を管理している［3］。「見えないデジタルのメモ帳」は、比喩ではなく、パソコンのどこかに本当に置いてあるメモ帳だったのだ。

じぶんでも やって みる

自分でも調べてみたくなったら

自分でも調べてみたくなったら

じぶんでも、このサイトの「よみかた」きのうを たしかめて みましょう。

あんぜんな ばしょで できる こと

  • この きじで「よみかた」を きりかえてから、べつの ページに 行って みる。 もどっても おなじ よみかたに なって いるか たしかめて みましょう。
  • 大人と いっしょに、じぶんの つかって いる ブラウザの せっていで、クッキーが どのくらい たまって いるか 見せて もらう。
メモの すすめ

きょう 出て きた ことばを 1つだけ ノートに 書いて おきましょう。「クッキーは 1994年に うまれた」だけで じゅうぶんです。

自分でも、このサイトの「よみかた」機能を確かめてみましょう。

今日できること

  • この記事で「よみかた」を切りかえてから、別のページに行ってみる。戻っても同じ読みかたになっているか確かめてみましょう。
  • 大人といっしょに、自分の使っているブラウザの設定で、クッキーがどのくらいたまっているか見せてもらう。
メモのすすめ

気になった言葉を1つだけ書いておくと、あとで調べる入口になります。「マジッククッキーって、もともと何のことだったの？」だけでも十分です。

読み方の設定は、ブラウザの中のどこに記録されているのだろうか。開発者ツールを開けば、その答えを自分で確かめられる。

手を動かして確かめる

  • この記事で「よみかた」を切りかえたあと、ブラウザを再起動してから同じページを開いてみる。設定が保存されたままか確かめてみましょう。
  • 自分の使っているブラウザの開発者ツールで、Application（またはストレージ）タブを開いてみる。大人といっしょに、Cookieやローカルストレージの中身をのぞいてみましょう。

一次情報にあたる

WHATWGのHTML仕様には、Web Storageの技術的な定義が詳しくまとめられている。

メモのすすめ

気になった数字や言葉を1つだけノートに記録しておきましょう。「クッキーは4キロバイトまで」という一文でもかまいません。

しらべた もとの じょうほう

参考にした情報源

参考にした情報源と、その使い方

この記事は、下にあげた公開情報をもとに書いています。文章や図を無断で転載してはいません。もっと正確に知りたいときは、必ず下の出典にあたってください。リンク先の内容や、リンク先で起きたことについて、当サイトは責任を負いません。

出典について：Wikipedia、MDN Web Docs（ブラウザ標準技術の公式解説）、技術解説記事を使っています。

  1. Web Storage API - MDN Web Docs。 https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API （localStorage・sessionStorageの技術的なしくみ、クッキーとの保存容量・送信方法の違いについての公式解説）
  2. ブラウザストレージの種類とその役割：Cookie、localStorage、IndexedDBなどの概要と特徴 - 株式会社一創。 https://www.issoh.co.jp/tech/details/9666/ （クッキーやlocalStorageが、パソコン内のブラウザ専用フォルダにSQLiteなどのデータベース形式で実際に保存されていることについての解説）

なおした ところ

更新履歴

更新履歴（改版の記録）

  • 　初版を公開。
  • 　upper・juniorの一部の言い回しを見直し（理由：文の言い回しの見直し。事実・出典は変更なし）。
  • 　低学年むけで、モントゥーリを「がくしゃ」と書いていたのを、ネットスケープ社で働いていた人に直しました。また、クッキーなどの保存場所・形式はブラウザによって異なることが分かるよう、「保存」の章の言い回しを直しました（先生の目での読み直しによる）。さらに、低学年むけで「ほかの人に見せに行く」という言い方をやめ、サイトに毎回送られないことが分かる書き方に直しました。中学生むけでは、WHATWGとW3Cの紹介を、専門用語を減らした言い方に直しました（事実・出典は変更なし）。さらに、高学年むけの「買い物かご」の文を、何が消えるのかが分かる言い方に直し、低学年むけでは「よみかた」ボタンとlocalStorageの文の指すものを分かりやすくし、中学生むけでは最後の問いかけを、開発者ツールで確かめる活動につながる形に直しました（事実・出典は変更なし）。

このサイトでは、公開した記事の本文は原則として書き直しません。誤りが見つかったときや、内容が古くなったときだけ手を入れ、その理由をこの欄に残します。