JavaScript BOM Cookieの使い方

JavaScript Cookie
Cookieは、コンピュータ上の小文書ファイルに格納されているデータです.Webサーバがウェブページをブラウザに送信すると、接続は閉じられ、サーバはユーザのすべての内容を忘れます.Cookieを発明したのは、「ユーザ情報をどうやって覚えますか?」今度ユーザーがこのページを訪問する時、クッキーは彼/彼女の名前を覚えます.Cookieはキーパッドという形で保存されています.

username = John Doe

ブラウザがサーバからウェブページを要求すると、そのページに属するクッキーが要求に追加されます.このように、サーバは必要なデータを取得して、ユーザに関する情報を“記憶”する.ブラウザがローカルCookieサポートを閉じている場合、以下の例は無効です.
JavaScriptを使ってCookieを作成します.
JavaScriptは、document.co okie属性を用いて作成し、cookieを読み取り、削除することができる.JavaScriptを使って、このようにクッキーを作成できます.

document.cookie = "username=John Doe";

有効期限(UTC時間単位)も追加できます.デフォルトでは、ブラウザが閉じているときにクッキーを削除します.

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

pathパラメータを使用して、ブラウザクッキーがどのパスに属しているかを教えてください.デフォルトでは、クッキーは現在のページに属します.

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

JavaScriptを使ってCookieを読む
JavaScriptを使って、cookieはこのように読めます.

var x = document.cookie;

document.co okieは、cookie 1=valueのような文字列のすべてのcookieを返します.cookie 2=値cookie 3=値
JavaScriptを使ってCookieを変更します.
JavaScriptを使って、クッキーを作成するようにクッキーを変更できます.

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

古いクッキーがカバーされています.
JavaScriptを使ってCookieを削除します.
クッキーの削除はとても簡単です.クッキーを削除する場合は、クッキー値を指定する必要はありません.expiresパラメータを転送日に設定するだけで、

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

クッキーパスを定義して、正しいクッキーを削除するようにします.パスが指定されていない場合、いくつかのブラウザはクッキーの削除を許可しません.
Cookie文字列
document.co okie属性は普通の文字列のように見える.しかし事実はそうではない.もしあなたが完全なクッキー文字列をdocument.co okieに書き込んでも、もう一度読んでみると、その名前-値ペアしか見えません.新しいクッキーを設定すると、古いクッキーを上書きしません.新しいクッキーはdocument.co okieに追加されますので、もしdocument.co okieをもう一度読んだら、似たようなものが得られます.cookie 1=value.cookie 2=valueクッキーを指定する値を検索するには、JavaScript関数を作成してクッキー文字列のクッキー値を検索しなければなりません.
JavaScript Cookieの例
以下の例では、ゲスト名を格納するクッキーを作成します.訪問者が初めてホームページに到着する時、彼/彼女に彼/彼女の名前を記入するように要求します.次に名前をクッキーに格納する.今度訪問者が同じページに着いたら、彼/彼女は歓迎のメッセージを受け取ります.この例では、JavaScript関数を3つ作成します.

cookie値を設定するための関数

cookie値を取得する関数

cookie値を検査するための関数

Cookieの機能

を設定します.
まず、関数を作成して、訪問者の名前をクッキー変数に格納します.

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

上記の関数のパラメータはクッキーの名前、クッキーの値、およびクッキーの期限が切れる前の日数です.この関数は、cookiename、cookie値、およびexpires文字列を加算してクッキーを設定します.Cookieの機能を取得した後、指定されたcookieの値を返すためにfunctionを作成します.

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

機能説明:cookienameをパラメータとします.検索するテキスト(cname+“=”)を使って変数(名前)を作成します.cookie文字列を復号して、'$などの特殊な文字を持つクッキーを処理して、番号付けのdocument.co okieをcaという配列に分割します.循環はca配列(i=0;i＜ca.length;i＋)を通して、各値c=ca[i]を読み出す.cookie(c.indexOf=0)が見つかったら、cookieの値(c.substring(name.length,c.length)を返します.クッキーが見つからなかったら、「」に戻ります.最後にCookieの機能を確認して、cookieが設定されているかどうかを確認する関数を作成します.クッキーが設定されていると、挨拶文が表示されます.クッキーが設定されていない場合、ユーザーの名前を尋ねるためのプロンプトボックスが表示され、set Cookie関数を呼び出してユーザ名クッキーを365日間保存します.

function checkCookie() {
  var username = getCookie("username");
  if (username != "") {
   alert("Welcome again " + username);
  } else {
    username = prompt("Please enter your name:", "");
    if (username != "" && username != null) {
      setCookie("username", username, 365);
    }
  }
}

すべてのコードが一緒に実装されます.

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
function checkCookie() {
  var user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
    user = prompt("Please enter your name:", "");
    if (user != "" && user != null) {
      setCookie("username", user, 365);
    }
  }
}

上記の例のcheckCookie()は、ページローディング時にこの関数を実行します.もっと詳しいCookie技術文章