JavaScriptの作成と保存Cookie例_基礎知識-jsチュートリアル-php.cn

JavaScriptの作成と保存Cookie例_基礎知識

May 16, 2016 pm 05:04 PM

Cookie とは何ですか?
Cookie は、訪問者のコンピュータに保存される変数です。この Cookie は、同じコンピュータがブラウザを通じてページを要求するたびに送信されます。 JavaScript を使用して Cookie 値を作成および取得できます。

Cookie の使用シナリオ:

Cookie に名前を付ける
訪問者が初めてページにアクセスするとき、自分の名前を入力できます。名前は Cookie に保存されます。訪問者がサイトに戻ると、「ようこそ John Doe!」のようなウェルカムメッセージが表示されます。名前は Cookie から取得されます。

パスワード Cookie
訪問者が初めてページにアクセスするとき、パスワードを入力することがあります。パスワードは Cookie に保存することもできます。再度サイトにアクセスすると、Cookie からパスワードが取得されます。

日付 Cookie
訪問者が初めて Web サイトにアクセスしたときに、現在の日付を Cookie に保存できます。再度サイトにアクセスすると、「前回の訪問は 2005 年 8 月 11 日火曜日でした!」というようなメッセージが表示されます。日付も Cookie から取得されます。

Cookie の作成と保存

この例では、訪問者の名前を保存する Cookie を作成します。訪問者が初めてサイトを訪問するとき、名前を入力するように求められます。名前は Cookie に保存されます。訪問者が Web サイトに戻ると、ウェルカムメッセージが表示されます。

まず、訪問者の名前を Cookie 変数に保存する関数を作成します。

Cookie の作成は、実際には文字列を綴ることになります:

"username=amosli;expires=Mon, 16 Dec 2013 16:20:04 GMT"
次に、document.cookie= 上記の文字列。

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

function setCookie(c_name,value,expiredays) 
 {
var exdate=new Date()
exdate.setDate(exdate.getDate()expiredays)
document.cookie=c_name "="escape(value) 
((expiredays= =null) ? "" : ";expires=" exdate.toGMTString())
}

上記の関数のパラメータには、Cookie の名前、値、有効期限が保存されます。

上記の関数では、まず日数を有効な日付に変換し、次に Cookie の名前、値、およびその有効期限を document.cookie オブジェクトに保存します。

その後、Cookie が設定されているかどうかを確認する別の関数を作成します。

getCookie() の中心となるのは document.cookie という 1 つの文だけで、残りは文字列の処理です。

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

function getCookie(c_name)
{ 
 if (document.cookie.length>0)
 {
 c_start=document.cookie.indexOf(c_name "=")
/* 
Cookie は文字列のセットです: "username =amosli; __utmc=1 19627022; __utmz=119627022.1387208465.2.2.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=(提供されていません)"
*/
if (c_start!=-1) ){ 
 c_start=c_start c_name.length 1 
 c_end=document.cookie.indexOf(";",c_start)
 if (c_end= =-1) c_end=document.cookie.length
 return unescape(document.cookie.substring(c_start,c_end))
 } 
 }
return ""
}
 

上記の関数は、最初に document.cookie オブジェクトに Cookie があるかどうかを確認します。 document.cookie オブジェクトが特定の Cookie を保存している場合、指定した Cookie が保存されているかどうかを引き続き確認します。必要な Cookie が見つかった場合は値が返され、それ以外の場合は空の文字列が返されます。

最後に、関数を作成する必要があります。この関数の機能は次のとおりです。Cookie が設定されている場合はウェルカムメッセージを表示し、そうでない場合はユーザーに名前の入力を求めるプロンプトボックスを表示します。

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

function checkCookie()
{
username =getCookie('username')
if (username!=null && username!="")
 {alert('またようこそ ' username '!')}
else 
 { 
 username=prompt('名前を入力してください:',"")
 if (username!=null && username!="")
 {
 setCookie('username',username,365 )
 }
 }
}

これがコードのすべてです:

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

<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document .cookie.length>0)
{
c_start=document.cookie.indexOf(c_name "=")
if (c_start!=-1)
{
c_start=c_start c_name.長さ 1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start) ,c_end))
}
}
return ""
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()expiredays)
document.cookie=c_name "= " エスケープ(値)
((expiredays==null) ? "" : ";expires=" exdate.toGMTString())
}

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('またようこそ ' username ' !')}
else
{
username=prompt('名前を入力してください:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>