JavaScript クッキーログイン

JavaScript クッキー

JavaScript Cookie

Cookieはユーザーを識別するために使用されます。

<html>
<mate chatset="utf-8">
<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.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 ""
}
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())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else 
  {
  username=prompt('请输入姓名:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>

Cookie とは何ですか?

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

クッキーの例:

名前クッキー 訪問者が初めてページにアクセスするとき、自分の名前を記入することがあります。名前は Cookie に保存されます。訪問者がサイトに戻ると、「ようこそ John Doe!」のようなウェルカム メッセージが表示されます。名前は Cookie から取得されます。パスワード Cookie 訪問者が初めてページにアクセスするとき、パスワードを入力することがあります。パスワードは Cookie に保存することもできます。再度サイトにアクセスすると、Cookie からパスワードが取得されます。日付 Cookie 訪問者が初めて Web サイトを訪問したとき、現在の日付を Cookie に保存できます。再度サイトにアクセスすると、「前回の訪問は 2005 年 8 月 11 日火曜日でした!」というようなメッセージが表示されます。日付も Cookie から取得されます。

Cookieの作成と保存

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

まず、訪問者の名前を 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 が設定されているかどうかを確認する別の関数を作成する必要があります:

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.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('Welcome again '+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.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 ""
}
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())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else 
  {
  username=prompt('请输入姓名:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>


<html> <mate chatset="utf-8"> <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.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 "" } 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()) } function checkCookie() { username=getCookie('username') if (username!=null && username!="") {alert('Welcome again '+username+'!')} else { username=prompt('请输入姓名:',"") if (username!=null && username!="") { setCookie('username',username,365) } } } </script> </head> <body onLoad="checkCookie()"> </body> </html>
コースウェア