HTTP プロトコルはステートレスプロトコルです。つまり、ウェブサイトに対する各リクエストは独立しているため、単独でデータを保存することはできません。しかし、このシンプルさが、インターネットの初期にこれほど広く普及した理由の 1 つでもあります。

ただし、リクエスト間の情報を Cookie の形式で保存する方法はまだあります。このアプローチにより、セッションを管理し、データをより効率的に管理できるようになります。

Cookie を処理するには、サーバー (php、asp など) とクライアント (javascript) の 2 つの方法があります。このチュートリアルでは、php と javascript で cookie を作成する方法を学びます。

Cookie と php

Cookie の設定
php で Cookie を作成するには、setcookie メソッドを使用する必要があります。いくつかのパラメーターが必要です (必須の最初のパラメーターを除き、他のパラメーターはオプションです)

コードをコピーしますコードは次のとおりです:

setcookie(
 'pageVisits', //cookie name, required T $ Visited, // Cookie の値 
 Time ()+7*24*60*60, // 有効期限、1 週間に設定 
 '/', // Cookie が利用可能 ' // Cookie にバインドされたドメイン名 
)
 

有効期限が 0 に設定されている場合 (デフォルト設定も 0)、ブラウザを再起動すると Cookie は失われます。 

パラメータ「/」は、ドメイン名の下にあるすべてのファイルパス Cookie を使用できることを意味します (もちろん、単一のファイルパスを設定することもできます。たとえば、「/admin/」)。

ここでは指定されていない 2 つの追加パラメーターをこの関数に渡すこともできます。ブール型で指定します。
最初のパラメータは、Cookie が安全な HTTPS 接続でのみ動作することを示し、2 番目のパラメータは、Cookie の動作に JavaScript を使用できないことを示します。

ほとんどの人にとって、必要なのは 4 番目のパラメータのみで、残りは無視します。

Cookieの読み取り
PHPを使用してCookieを読み取るのははるかに簡単です。スクリプトに渡されるすべての Cookie は、$_COOKIE スーパーグローバル配列内にあります。この例では、次のコードを使用して Cookie を読み取ることができます:

コードをコピーコードは次のとおりです:

$visits = (int)$_COOKIE['pageVisits']+1;

echo " あなたはこのサイトを訪問しました: ".$visits." 回";

次のページがロードされるときに、$_COOKIE を使用して setcookie メソッドを使用して設定した Cookie を取得することもできることに注意してください。これに気づいてください。

Cookieの削除
Cookieを削除するには、setcookie関数を使用してCookieの有効期限として過去の時間を設定するだけです。

コードをコピーします

コードは次のとおりです:setcookie(

'pageVisits',

 $visited,
 time()-7*24*60*60, //前の週に設定します, Cookie は削除されます 
 '/',
 'demo.tutorialzine.com'
)

Cookie と jQuery
jQuery で Cookie を使用するには、プラグイン Cookie プラグインが必要です。ティンクッキー
Cookie プラグインを使用すると、非常に直感的に Cookie を設定できます:

コードをコピーします
コードは次のとおりです:

$(document).ready(function(){ // Set a子猫のクッキー、ブラウザの再起動で失われます: $.cookie("kittens","Seven Kittens");

// デモクッキーの設定 (デモで見られるように):

 $.cookie("demoCookie",text ,{有効期限: 7, パス: '/', ドメイン: 'demo.tutorialzine.com'}); 

 // "text" は保存する文字列を保持する変数です 
}); cookies

 Cookie の読み取り さらに簡単には、$.cookie() メソッドを呼び出してそれに Cookie 名を与えるだけです。このメソッドは Cookie の値を返します:

 コードをコピーします

コードは次のとおりです。以下の通り:

 $(document).ready(function(){ 

 // 子猫のクッキーを取得します: 
 var str = $.cookie("kittens"); 

 // str には「7 匹の子猫」が含まれます 
}); 

Cookieの削除
Cookieを削除するには、$.cookie()メソッドを再度使用し、2番目のパラメータをnullに設定するだけです。

コードをコピーしますコードは次のとおりです:

 $(document).ready(function(){ 

 // 子猫の Cookie を削除します: 
 var str = $.cookie("kittens", null); 
 Re // もうキッターは不要です 


 完全な例: 

Demo.php

コードをコピーします:

// データまたは HTML がページに印刷される前に必ず Cookie を設定します
$visited = (int)$_COOKIE['pageVisits'] + 1;
setcookie( 'pageVisits', // の名前Cookie、必須
$visited, // Cookie の値
time()+7*24*60*60, // 有効期限、将来 1 週間に設定
'/', // フォルダーパス、 Cookie は、サイトのすべてのフォルダー内のすべてのスクリプトで使用できます
'demo.tutorialzine.com')。 // Cookie がロックされるドメイン
?>

MicroTut: jQuery と PHP を使用した Cookie の取得と設定 |チュートリアルジンのデモ

MicroTut: jQuery と PHP を使用した Cookie の取得と設定

戻るチュートリアルへ »

上記の数字は、このページ (PHP Cookie) にアクセスした回数を示します。リロードしてテストします。

上のフィールドにテキストを入力し、[保存] をクリックします。ページのリロードの間に jQuery Cookie を使用して保存されます。

jquery.cookie.js

复制代金代金如下:

/**
 * Cookie プラグイン
 *
 * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
 * MIT および GPL ライセンスに基づくデュアル ライセンス: 
 * http://www.opensource.org/licenses/mit-license.php 
 * http://www.gnu.org/licenses/gpl.html
 *
 */
/**
 * 指定された名前と値、およびその他のオプションのパラメーターを使用して Cookie を作成します。
 *
 * @example $.cookie('the_cookie', 'the_value');
 * @desc Cookie の値を設定します。
 * @example $.cookie('the_cookie', 'the_value', { 有効期限: 7, パス: '/', ドメイン: 'jquery.com', secure: true });
 * @desc 利用可能なすべてのオプションを使用して Cookie を作成します。
 * @example $.cookie('the_cookie', 'the_value');
 * @desc セッション Cookie を作成します。
 * @example $.cookie('the_cookie', null);
 * @desc null を渡して Cookie を削除します価値として。 Cookie が設定されたときに使用したのと同じパスとドメインを使用する必要があることに注意してください
 * 
 *
 * @param String name Cookie の名前
 * @param String value Cookie の値
 * @param オブジェクト オプション オプションの Cookie 属性を提供するキーと値のペアを含むオブジェクト リテラル。
 * @option Number|Date Expires 今後の有効期限を日単位で指定する整数、または Date オブジェクト。
 * 負の値の場合指定されている場合 (過去の日付など)、Cookie は削除されます。
 * null に設定するか省略すると、Cookie はセッション Cookie となり、ブラウザの終了時に保持されません
 * 
 * @オプション文字列path クッキーのパス属性の値 (デフォルト: クッキーを作成したページのパス)。
 * @option String ドメイン クッキーのドメイン属性の値 (デフォルト: クッキーを作成したページのドメイン)。 * @option Boolean secure true の場合、Cookie のセキュア属性が設定され、Cookie の送信には安全なプロトコル (HTTPS など) が必要です
 * @type unknown
 *
 * @name $.cookie
 * @ cat Plugins/Cookie
 * @author Klaus Hartl/klaus.hartl@stilbuero.de
 */
/**
 * 指定された名前の Cookie の値を取得します。
 *
 * @example $.cookie('the_cookie');
 * @desc Cookie の値を取得します。
 *
 * @param String name の名前cookie.
 * @return cookie の値
 * @type String
 *
 * @name $.cookie
 * @cat Plugins/Cookie
 * @author Klaus Hartl/klaus.hartl@stilbuero.de
 */
jQuery.cookie = function(name, value, options) {
 if (typeof value != ' unknown') { // 指定された名前と値、cookie を設定します
 options = options || {};
 if (value === null) {
 value = '';
 options.expires = -1;
 }
 varexpires = '';
 if (options.expires && options.expires の == 'number' || options.expires.toUTCString)) {
 var date;
 if (typeof options.expires == 'number') {
 date = new Date();
 date.setTime(date. getTime() + (options.expires * 24 * 60 * 60 * 1000));
 } else {
 date = options.expires;
 }
 期限切れ = ';期限切れ=' + date.toUTCString(); //expires 属性を使用します。max-age は IE ではサポートされていません
 }
 // 注意: options.path と options.domain を括弧で囲む必要があります
 // 次の式では、そうでない場合は未定義と評価されます
 // パック版では何らかの理由で...
 var path = options.path ? '; path=' + (options.path) : '';
 var ドメイン = options.domain ? ';ドメイン=' + (オプション.ドメイン) : '';
 var secure = options.secure ? '; secure' : '';
 document.cookie = [name, '=', encodeURIComponent(value), Expires, path, domain, secure].join('');
 } else { // 指定された名前のみ、Cookie を取得
 var cookieValue = null;
 if (document.cookie && document.cookie != '') {
 var cookies = document.cookie.split(';');
 for (var i = 0; i < cookies. length; i++) {
 var cookie = jQuery.trim(cookies[i]);
 // この Cookie 文字列は希望する名前で始まりますか?
 if (cookie.substring(0, name.length + 1) == (name + '=')) {
 cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
 Break;
 }
 } 
 }
 cookieValue;
 }
};

スタイル。 css

复制代打代打如下:

*{
 margin:0;
 padding:0;
}
body{
 /* デフォルトのテキスト色、背景、フォントスタックの設定 */
 color :#555555;
 font-size:0.825em;
 background: #fcfcfc;
 font-family:Arial、Helvetica、sans-serif;
}
.section{
 margin:0 auto 60px;
 text-align:center ;
 width:600px;
}
.counter{
 color:#79CEF1;
 font-size:180px;
}
.jq-text{
 display:none;
 color:#79CEF1;
 font-size:80px ;
}
p{
 font-size:11px;
 padding:0 200px;
}
form{
 margin-bottom:15px;
}
input[type=text]{
 border:1px Solid #BBBBBB;
 color:#444444;
 font-family:Arial,Verdana,Helvetica,sans-serif;
 font-size:14px;
 letter-spacing:1px;
 padding:2px 4px;
}
/* 以下のスタイルはデモ ページのスタイルに必要: */
h1{
 background:#F4F4F4;
 border-bottom:1px Solid #EEEEEE;
 font-size:20px;
 font-weight:normal;
 margin-bottom:15px ;
 padding:15px;
 text-align:center;
}
h2 {
 font-size:12px;
 font-weight:normal;
 padding-right:40px;
 position:relative;
 right:0;
 text-align:right;
 text-transform:uppercase;
 top:-48px;
}
a, a:visited {
 color:#0196e3;
 text-decoration:none;
 outline:none;
}
a :hover{
 text-decoration:underline;
}
.clear{
 clear:both;
}
h1,h2,p.tutInfo{
 font-family:"Myriad Pro",Arial,Helvetica,sans-serif; 
}

結論:
Cookieの使用に関しては、一部の機密情報(ユーザー名、パスワードなど)をCookieに保存しないように注意する必要があります。
Cookieは各ページが読み込まれるときにヘッダーとともに渡されるためです。ページにアクセスすると、犯罪者によって簡単に傍受される可能性があります。
ただし、適切な予防措置を講じれば、この簡単なテクニックで大量のインタラクションを実現できます。