JavaScript講座
(メールマガジン編)
3/20日発行 ヨッシーの”ホームページを作ろう!(JavaScript編)”★Vol.28★
| クッキー |
このクッキーというのは、パソコンにデーターを保存しておくために使うんだ。
よく掲示板などで、一度書き込みをすると次からはメールアドレスやニックネームは初めからフォーム内に書いてあることってあるよね。あれはクッキーを利用しているんだ。
たとえばJavaScriptで作る簡単な個人用カウンターはこのクッキーを利用してつくれるんだよ。
また、一度訪問して名前を記入してもらった後は、次からは訪問のたびに自動的にページ内に訪問者の名前が載るようにも出来るんだ。
最後にこのクッキーをやればJavaScriptの基本はだいたいできたことになるよ。
| ★ クッキーとは? ★ |
クッキーとはなんだろう?
別に詳しいことは知る必要はないけれど、ちょっとくらい知っておきたいよね。
簡単に基本的なことだけ説明するね。
クッキーというのはさっきも言ったように、データーを保存しておくためのものなんだ。
じゃあ、どこに保存しているんだろうね。
JavaScriptというのはブラウザ上で実行するのでサーバーとは全く関係ないんだ。
※サーバーとは電話回線のむこうにあるパソコンのこと。詳しくは基礎知識を見てね。
※サーバー(インターネット)につながなくてもJavaScriptはブラウザだけで実行できるね。
つまり、逆に言えばサーバーにデーターを保存しておくことは出来ないね。
じゃあ残るのは見ている人のパソコンだよね。
そう、見ている人のパソコンの中にデーターを保存するんだ。
つまり、JavaScriptを使って勝手に(?)見ている人のパソコンにデーターを保存させるんだ。
そんなことしてセキュリティは大丈夫なの?っていう感じだよね。
それに、いきなりいつの間にかデスクトップ上に新しいデーターが作られたら嫌だよね。
大丈夫、そのためのクッキーなんだ。
つまり、パソコンの中にはいろいろなフォルダがあるけど、その中にクッキーというフォルダがあるんだ。
そして、JavaScriptでデーターを保存できるのはクッキーという場所だけというふうになっているんだよ。
そこで、JavaScriptではその唯一データを操作できるクッキーというものを使っていろいろなことを実現できるんだ。
◆(クッキーに)データーを書き込む◆
データー →→→ クッキー
◆(クッキーから)データーを読み込む◆
データー ←←← クッキー
でも勝手にファイル操作をされるわけだからちょっと怖いよね。
そこで、セキュリティの関係上次のような制限があるんだ。
1.保存先が制限されている
⇒つまり、これがクッキーのこと
2.一定の書式でしか書き込みできない
3.保存形式はテキスト形式のみである
4.ユーザーに関しての情報は送信されない
特に詳しいことは知る必要はないと思うけれど、一応セキュリティにも対応しているということだけ確認しておこう。
(※どうしてもクッキーが気になる人はブラウザの設定でクッキーを無効にすることもできる)
| ★ クッキーに書き込む ★ |
まず、クッキーに情報を書き込む方法をやってみよう。
クッキーに情報を書き込むための命令は
クッキーに書き込む |
document.cookie = "書き込みたい情報" |
これで、クッキーに情報が書き込まれるんだ。
じゃあ、簡単じゃん!!って思うよね。それが簡単じゃないんだね。
だってこれだけだったら次に情報を取り出すときにどうする?
もしくは他にも情報を入れたいときはどうすればいいだろう。
今、この情報だけしか入っていなかったらいいけど、この前に他のいろんな情報が入っていたら、その中から今の情報だけを取り出すことは無理だよね。
逆に、このあとにいろいろとデータを入れていくとどれを取り出したらいいかがわからないよね。
だから、実はこれは本当に単純に書いただけで、実際には情報の部分には次のような書き方をするんだ。
クッキーに書き込む |
(document.cookie =) "name = 値; expires = 期限;" |
このようにして書くんだ。
つまり、
name = 値;
で、いま保存する値(すうじや文字の情報)にnameという名前を付けて保存しているんだ。
(このnameというのは識別するための名前なのでidやdataなどどんな名前にしてもいいよ)
逆に情報を呼び出すときにはこのnameというのを探して、その横にある(今入れた)情報を取り出すんだ。
(これも、さっきつけた名前を使うのでidとつけた場合はidでデータを取り出す。)
また、
expires = 期限;
というのはこの情報の有効期限なんだ。
クッキーの情報を使わなくなったあとにずっと置いておくのはメモリの無駄遣いだよね。
(それに有効期限があったほうがいいときもあるね)
だから、一定期間が過ぎると情報を自動的に削除してくれる機能があるんだ。
そして、その期間を設定するのがこの部分なんだよ。
| ★ クッキーから読み込む ★ |
次にクッキーからデーターを読み込んでみよう。
これは、
クッキーから読み込む |
変数 = document.cookie; |
のようにするんだ。
これで、クッキー内の情報が変数に入れられるんだ。
この後、さっきも言ったようにその中から自分の必要な情報を取り出してくるという操作が必要になるんだ。
とりあえず、クッキー内のデーターさえ変数に入ればあとは、この変数をいろいろと処理して必要な情報を取り出せるんだよ。