cookieで文字を扱うJavaScript入門

cookieにそのまま文字を書き込むと…

ではまず、cookieにそのまま文字を書き込むとどうなるか試してみましょう。 以下のようなスクリプトをbody内に書き込んだサンプルを作っています。 本来なら変数word1と変数word2は同じはずですが、結果は如何に・・・

<script>

var word1="あいうえお";  //書き込む文字
var word2;               //cookieから読み出した文字
var cook;                //cookieのデータを格納
var cStart,cEnd;         //文字切り取りの位置を格納

if (navigator.cookieEnabled)
{
  //cookieに文字を書き込む
  document.cookie = "moji="+word1+";";
  document.write("書込文字＝"+word1+"<br>");
  
  //cookieを読み込む
  cook = document.cookie + ";";
  cStart= cook.indexOf("moji=",0);
  cEnd  = cook.indexOf(";",cStart);
  word2= cook.substring(cStart+5,cEnd);
  document.write("読込文字＝"+word2);
}
   
</script>

サンプル

書き込んだ文字は「あいうえお」ですが、読み出した文字はどうなっているでしょうか？ 使用しているブラウザによっては一致しているものもありますし、全然違う文字に変わっているものもあります。 このような状況ゆえに、cookieで日本語などの文字を扱う場合は、一工夫する必要があります。 ではどうするか、次の部分で見てみましょう。

cookieではエスケープ文字を使う

cookieで文字を扱うには、エスケープ文字に変換する必要があります。 読み出すときは、エスケープ文字を普通の文字に戻す作業が入ります。

では上のスクリプトを少し変更して、文字を扱えるようにしてみましょう。 変更箇所は赤文字で表しています。たった2箇所変更しているだけです。

<script>

var word1="あいうえお";  //書き込む文字
var word2;               //cookieから読み出した文字
var cook;                //cookieのデータを格納
var cStart,cEnd;         //文字切り取りの位置を格納

if (navigator.cookieEnabled)
{
  //cookieに文字を書き込む
  document.cookie = "moji="+escape(word1)+";";
  document.write("書込文字＝"+word1+"<br>");
  
  //cookieを読み込む
  cook = document.cookie + ";";
  cStart= cook.indexOf("moji=",0);
  cEnd  = cook.indexOf(";",cStart);
  word2= unescape(cook.substring(cStart+5,cEnd));
  document.write("読込文字＝"+word2);
}
  
</script>

サンプル

サンプルをご覧になってみてください。 今度は書き込み文字と読み込み文字が一致していると思います。

このように、cookieで文字を扱う場合は、文字をエスケープ文字に変換する必要があります。 エスケープ文字に変換するのはescape()、 エスケープ文字を元に戻すにはunescape()を使います。

escape()

カッコ内の文字列をエスケープ文字に変換します。

unescape()

カッコ内のエスケープ文字列を、通常の文字に戻します。

上記スクリプトでは、cookieに書き込む時にescape()を使って文字を変換しています。 また読み出した後にunescape()で元に戻してるのが分かると思います。

数値をエスケープ文字にしても問題ありません（というか、変化しません）。 と言うことでcookieにデータを書き込むときは、 エスケープ文字に変換するようにしておけば、 数値・文字どちらにも対応できます。

ここまでで、cookieにデータを書き込んだり読み出したりする方法について見てきました。 次のページでは、cookieを削除する方法について見てみることにしましょう。