집 > 기사 > 웹 프론트엔드 > JavaScript 쿠키 기본 응용(사용자 이름을 기록하는 방법)

JavaScript 쿠키 기본 응용(사용자 이름을 기록하는 방법)

亚连원래의: 2018-05-19 15:49:241415검색

이 글에서는 주로 자바스크립트 쿠키의 기본 응용에서 사용자 이름을 기록하는 방법을 소개하고 있으며, 쿠키를 기반으로 데이터 저장을 위한 간단한 자바스크립트 적용이 필요한 친구들이 참고할 수 있습니다.

이 글의 예시는 기록 방법을 알려줍니다. 자바스크립트 쿠키 방식의 기본 응용 프로그램에 있는 사용자 이름입니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

이전에 cookie.js를 캡슐화한 쿠키의 기본에 대한 기사가 있습니다. 아래에서는 이 js를 적용하는 예를 사용합니다.

가장 흔한 것은 사용자 이름을 기억하는 것입니다. 사용자가 한 번 로그인한 후 사용자의 계정과 비밀번호가 쿠키를 통해 기록되므로 다음 번에 페이지를 열 때 사용자가 계정을 입력하고 입력할 필요가 없습니다. 비밀번호를 다시 입력하세요. 첨부 코드:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>cookie的应用——记住用户名</title>
</head>
<body>
  <form action="#" id="myform">
    <label for="username">用户名：</label><input type="text" name="username" id="username" />
    <label for="userpass">密码：</label><input type="password" name="userpass" id="userpass" />
    <input type="submit" value="登录" />
    <a href="javascript:;">清除记录</a>
  </form>
</body>
</html>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript">
window.onload = function(){
  var oForm = document.getElementById(&#39;myform&#39;);
  var oTxt1 = document.getElementById(&#39;username&#39;);
  var oTxt2 = document.getElementById(&#39;userpass&#39;);
  var oClear = document.getElementsByTagName(&#39;a&#39;)[0];
  oTxt1.value = getCookie(&#39;username&#39;);
  oTxt2.value = getCookie(&#39;userpass&#39;);
  oForm.onsubmit = function(){
    setCookie(&#39;username&#39;,oTxt1.value,30);
    setCookie(&#39;userpass&#39;,oTxt2.value,30);
  }
  oClear.onclick = function(){
    removeCookie(&#39;username&#39;);
    removeCookie(&#39;userpass&#39;);
    oTxt1.value = &#39;&#39;;
    oTxt2.value = &#39;&#39;;
  }
}
</script>

PS: 여기서 모든 사람이 볼 수 있도록 이전 기사의 cookie.js를 게시할 것입니다.

function setCookie(name,value,hours){
 var d = new Date();
 d.setTime(d.getTime() + hours * 3600 * 1000);
 document.cookie = name + &#39;=&#39; + value + &#39;; expires=&#39; + d.toGMTString();
}
function getCookie(name){
 var arr = document.cookie.split(&#39;; &#39;);
 for(var i = 0; i < arr.length; i++){
  var temp = arr[i].split(&#39;=&#39;);
  if(temp[0] == name){
   return temp[1];
  }
 }
 return &#39;&#39;;
}
function removeCookie(name){
 var d = new Date();
 d.setTime(d.getTime() - 10000);
 document.cookie = name + &#39;=1; expires=&#39; + d.toGMTString();
}

위는 모든 사람을 위해 편집한 것입니다. 앞으로 모든 사람에게 도움이 되길 바랍니다.

자바스크립트 쿠키에 대한 자세한 설명과 간단한 예제 적용 (그림 및 텍스트 튜토리얼)

자바스크립트 쿠키의 이해와 사용법

자바스크립트 쿠키사용법(개념,설정,읽기,삭제) ) )

위 내용은 JavaScript 쿠키 기본 응용(사용자 이름을 기록하는 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Javascript 이벤트 버블링 메커니즘에 대한 자세한 소개(그래픽 튜토리얼)다음 기사：Javascript 이벤트 버블링 메커니즘에 대한 자세한 소개(그래픽 튜토리얼)