JSクッキーを用いてユーザ登録情報を保存する操作例


この例は、JSがクッキーを使用してユーザ登録情報を保存することを説明する。皆さんに参考にしてあげます。具体的には以下の通りです。
通常はcookieとsessionは、ウェブ開発において情報を格納するためのオブジェクトであり、sessionはサーバのメモリに存在し、cookieはクライアントが存在するので、jsはcookieを直接操作して情報の記憶と読み取りを行うことができる。
js cookieを格納する一般的な書き方:document.cookie="userName=admin";、複数のキーの場合:document.cookie="userName=admin; userPass=123";以下はjs操作クッキー保存ユーザの登録情報です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>     </title>
<script language="javascript" type="text/javascript">
function addCookie(name,value,days,path){  /**    cookie**/
  var name = escape(name);
  var value = escape(value);
  var expires = new Date();
  expires.setTime(expires.getTime() + days * 3600000 * 24);
  //path=/,  cookie         ,path=/temp,  cookie   temp     
  path = path == "" ? "" : ";path=" + path;
  //GMT(Greenwich Mean Time)       ,       ,      UTC
  //  days      
  var _expires = (typeof days) == "string" ? "" : ";expires=" + expires.toUTCString();
  document.cookie = name + "=" + value + _expires + path;
}
function getCookieValue(name){ /**  cookie  ,  cookie     **/
  //            key  value
  var name = escape(name);
  // cookie  ,         cookie
  var allcookies = document.cookie;
  //    name cookie     
  name += "=";
  var pos = allcookies.indexOf(name);
  //           cookie,          
  if (pos != -1){                       //  pos  -1     "version="  
    var start = pos + name.length;         //cookie      
    var end = allcookies.indexOf(";",start);    // cookie            ";"   , cookie      
    if (end == -1) end = allcookies.length;    //  end  -1  cookie       cookie
    var value = allcookies.substring(start,end); //  cookie  
    return (value);              //    
  }else{ //    ,      
    return "";
  }
}
function deleteCookie(name,path){  /**  cookie  ,  cookie,         **/
  var name = escape(name);
  var expires = new Date(0);
  path = path == "" ? "" : ";path=" + path;
  document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;
}
/**    ,          cookie 。         ,   cookie**/
window.onload = function(){
  var userNameValue = getCookieValue("userName");
  document.getElementById("txtUserName").value = userNameValue;
  var userPassValue = getCookieValue("userPass");
  document.getElementById("txtUserPass").value = userPassValue;
}
function userLogin(){  /**    ,              **/
  //      
  var userName = document.getElementById("txtUserName").value;
  if(userName == ''){
    alert("      。");
    return;
  }
  var userPass = document.getElementById("txtUserPass").value;
  if(userPass == ''){
    alert("     。");
    return;
  }
  var objChk = document.getElementById("chkRememberPass");
  if(objChk.checked){
    //  cookie
    addCookie("userName",userName,7,"/");
    addCookie("userPass",userPass,7,"/");
    alert("         。");
    window.location.href = "http://www.baidu.com";
  }else{
    alert("      。");
    window.location.href = "http://www.baidu.com";
  }
}
</script>
</head>
<body>
<center>
  <table width="400px" height="180px" cellpadding="0" cellspacing="0" border="1" style="margin-top:100px;">
    <tr>
      <td align="center" colspan="2">    XXX    </td>
    </tr>
    <tr>
      <td align="right">
        <label>   :</label>
      </td>
      <td align="left">
        <input type="text" id="txtUserName" name="txtUserName" style="width:160px; margin-left:10px;" />
      </td>
    </tr>
    <tr>
      <td align="right">
        <label>   :</label>
      </td>
      <td align="left">
        <input type="password" id="txtUserPass" name="txtUserPass" style="width:160px; margin-left:10px;" />
      </td>
    </tr>
    <tr>
      <td align="center" colspan="2">
        <span style="font-size:12px; color:blue; vertical-align:middle;">      </span>
        <input type="checkbox" id="chkRememberPass" name="chkRememberPass" style="vertical-align:middle;" />
      </td>
    </tr>
    <tr>
      <td align="center" colspan="2">
        <input type="submit" id="subLogin" name="subLogin" value="   " onclick="userLogin()"/>
        <input type="reset" id="resetLogin" name="resetLogin" value="   " />
      </td>
    </tr>
  </table>
</center>
</body>
</html>

もっと多くのJavaScriptに関する内容に興味がある読者は、当駅のテーマを見ることができます。「JavaScriptデータ構造とアルゴリズム技術のまとめ」、「JavaScriptはアルゴリズムと技術の総括を遍歴します。」、「JavaScript検索アルゴリズムのテクニックのまとめ」、「JavaScriptアニメーションの特効と技巧のまとめ」、「JavaScriptエラーとデバッグテクニックのまとめ」および「JavaScript数学演算の使い方のまとめ
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。