javascript_javascriptスキルにおけるCookieの設定・取得方法例を詳しく解説-jsチュートリアル-php.cn

javascript_javascriptスキルにおけるCookieの設定・取得方法例を詳しく解説

WBOY

リリース： 2016-05-16 15:21:36

オリジナル

1295 人が閲覧しました

この記事の例では、JavaScript で Cookie を設定および取得する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

1. Cookie を設定します

function setCookie(cookieName,cookieValue,cookieExpires,cookiePath)
{
  cookieValue = escape(cookieValue);//编码latin-1
  if(cookieExpires=="")
  {
    var nowDate = new Date();
    nowDate.setMonth(nowDate.getMonth()+6);
    cookieExpires = nowDate.toGMTString();
  }
  if(cookiePath!="")
  {
    cookiePath = ";Path="+cookiePath;
  }
  document.cookie= cookieName+"="+cookieValue+";expires="+cookieExpires+cookiePath;
}

ログイン後にコピー

2. クッキーを取得します

function getCookieValue(cookieName)
{
  var cookieValue = document.cookie;
  var cookieStartAt = cookieValue.indexOf(""+cookieName+"=");
  if(cookieStartAt==-1)
  {
    cookieStartAt = cookieValue.indexOf(cookieName+"=");
  }
  if(cookieStartAt==-1)
  {
    cookieValue = null;
  }
  else
  {
    cookieStartAt = cookieValue.indexOf("=",cookieStartAt)+1;
    cookieEndAt = cookieValue.indexOf(";",cookieStartAt);
    if(cookieEndAt==-1)
    {
      cookieEndAt = cookieValue.length;
    }
    cookieValue = unescape(cookieValue.substring(cookieStartAt,cookieEndAt));//解码latin-1
  }
  return cookieValue;
}

ログイン後にコピー

例:

<!doctype html>
<html>
<head>
<title>cookie</title>
<meta charset="utf-8">
<script language="javascript" type="text/javascript">
  //获取cookie
   function getCookieValue(cookieName)
  {
    var cookieValue = document.cookie;
    var cookieStartAt = cookieValue.indexOf(""+cookieName+"=");
    if(cookieStartAt==-1)
    {
      cookieStartAt = cookieValue.indexOf(cookieName+"=");
    }
    if(cookieStartAt==-1)
    {
      cookieValue = null;
    }
    else
    {
      cookieStartAt = cookieValue.indexOf("=",cookieStartAt)+1;
      cookieEndAt = cookieValue.indexOf(";",cookieStartAt);
      if(cookieEndAt==-1)
      {
        cookieEndAt = cookieValue.length;
      }
      cookieValue = unescape(cookieValue.substring(cookieStartAt,cookieEndAt));//解码latin-1
    }
    return cookieValue;
  }
  //设置cookie
  function setCookie(cookieName,cookieValue,cookieExpires,cookiePath)
  {
    cookieValue = escape(cookieValue);//编码latin-1
    if(cookieExpires=="")
    {
      var nowDate = new Date();
      nowDate.setMonth(nowDate.getMonth()+6);
      cookieExpires = nowDate.toGMTString();
    }
    if(cookiePath!="")
    {
      cookiePath = ";Path="+cookiePath;
    }
    document.cookie= cookieName+"="+cookieValue+";expires="+cookieExpires+cookiePath;
  }
  //页面加载时间处理函数
  function window_onload()
  {
    var userNameElem = document.getElementById("userName");//用户名输入框对象
    var passwordElem = document.getElementById("password");//密码输入框对象
    var currUserElem = document.getElementById("currUser");//复选框对象
    var currUser = getCookieValue("currUser");
    if(currUser!=null)
    {
      userNameElem.value=currUser;
      currUserElem.checked = true;
    }
    if(userNameElem.value!="")
    {
      passwordElem.focus();//密码输入框获得焦点
    }
    else
    {
      currUserElem.focus();//用户名输入框获得焦点
    }
  }
  //表单提交处理
  function login()
  {
    var userNameElem = document.getElementById("userName");
    var passwordElem = document.getElementById("password");
    var currUserElem = document.getElementById("currUser");
    if(userNameElem.value=="" || passwordElem.value=="")
    {
      alert("用户名或密码不能为空！");
      if(userNameElem.value=="")
      {
        userNameElem.focus();//用户名输入框获得焦点
      }
      else
      {
        passwordElem.focus();//密码输入框获得焦点
      }
      return false;
    }
    if(currUserElem.checked)
    {
      setCookie("currUser",userNameElem.value,"","");//设置cookie
    }
    else
    {
      var nowDate = new Date();//当前日期
      nowDate.setMonth(nowDate.getMonth()-2);//将cookie的过期时间设置为之前的某个日期
      cookieExpires = nowDate.toGMTString();//过期时间的格式必须是GMT日期的格式
      setCookie("userName","",cookieExpires,"");//删除一个cookie只要将过期时间设置为过去的一个时间即可
    }
    return true;
  }
</script>
<style type="text/css">
  div{
    font-size:12px;
  }
</style>
</head>
<body onload="window_onload()">
<div>
<form id="loginForm" onsubmit="return login()">
用户名：<input type="text" id="userName"><br>
密 码：<input type="password" id="password">
<input type="checkbox" id="currUser">记住用户名<br>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>

ログイン後にコピー

注:

Google Chrome はセキュリティ上の理由からオンライン Cookie のみをサポートしているため、ローカルでテストする場合は効果がありません。サーバーにアップロードして試す必要があります。

JavaScript の Cookie 操作の詳細については、このサイトの特別トピック「 JavaScript の Cookie 操作に関する知識のまとめ」および「 jQuery の Cookie 操作スキルのまとめ」を参照してください。「

この記事が JavaScript プログラミングのすべての人に役立つことを願っています。