집 > 기사 > 웹 프론트엔드 > JavaScript 읽기 및 쓰기 쿠키 예제 튜토리얼

JavaScript 읽기 및 쓰기 쿠키 예제 튜토리얼

小云云원래의: 2018-01-31 09:24:301371검색

이 글은 주로 자바스크립트 쿠키 읽기 및 쓰기 관련 지식 포인트를 예시를 통해 소개하고 있으니, 필요한 친구들이 참고하시면 좋겠습니다.

먼저 쿠키에 대해 간단히 알아보겠습니다.

웹페이지를 만드는 과정에서 한 페이지에서 다른 페이지로 정보를 전송해야 하는 경우가 종종 있습니다. 이때 JavaScript의 쿠키 메커니즘을 사용해야 합니다. 간단히 말해서, 쿠키는 사용자의 컴퓨터에 소량의 데이터를 저장하고 원격으로 얻을 수 있는 편리한 방법을 제공하여 웹사이트가 사용자의 습관 설정이나 웹사이트를 마지막으로 방문한 시간과 같은 세부 정보를 저장할 수 있도록 합니다. 쿠키 자체는 해당 페이지가 사용자의 컴퓨터에 저장한 후 다른 페이지에서 읽을 수 있는 짧은 정보입니다. 쿠키는 일반적으로 일정 기간이 지나면 만료되도록 설정되어 있습니다.

물론 쿠키에도 제한이 있습니다. 브라우저에는 저장할 수 있는 쿠키 수에 제한이 있으며 일반적으로 수백 개 이상입니다. 일반적인 상황에서는 도메인 이름당 20개의 쿠키가 허용되며, 각 도메인은 최대 4KB까지 쿠키를 저장할 수 있습니다. 크기 제한으로 인해 발생할 수 있는 문제 외에도 하드 디스크에 쿠키가 저장되는 데에는 여러 가지 이유가 있습니다. 또는 쿠키 정보를 삭제하거나 다른 브라우저로 전환하는 등의 현상이 발생합니다. 따라서 쿠키는 중요한 데이터를 저장하는 데 적합하지 않습니다. 코드를 작성할 때 쿠키 획득 예외를 처리하는 방법도 고려해야 합니다.

JavaScript에서는 문서 객체의 쿠키 속성을 사용하여 쿠키를 저장하고 검색합니다. 일반적으로 document.cookie의 정보는 이름과 값의 쌍으로 구성된 문자열입니다. 각 데이터 쌍의 형식은 다음과 같습니다.

name=value;

아래에서는 간단한 예를 사용하여 JavaScript에서 쿠키를 읽고 쓰는 방법을 보여줍니다.

첫 번째는 createCookie.html이며, 이 페이지에서 쿠키가 생성되며 전체 코드는 다음과 같습니다.

<html>
<head>
  <title>createCookie</title>
  <script>
    function createCookie(){
      //get name and password
      var name = document.getElementById("name").value;
      var pwd = document.getElementById("pwd").value;
      //create cookie
      document.cookie = name+&#39;|&#39;+pwd;
      //go to showCookie.html page
      window.location.href = "showCookie.html";
    }
  </script>
</head>
<body>
  Userame:  <input id="name" type="text" /><br><br>
  Password:  <input id="pwd" type="password" /><br><br>
  <button onclick="createCookie()">Submit</submit>
</body>
</html>

페이지 스크린샷은 다음과 같습니다.

제출 버튼을 클릭하면 쿠키가 생성되고 사용자 이름과 비밀번호 정보가 쿠키에 저장되며 showCookie.html 페이지로 이동합니다. 그 중 showCookie.html 페이지의 전체 코드는 다음과 같습니다.

<html>
<head>
  <title>showCookie</title>
  <script>
    function showCookie(){
      //document.cookie is a string, using split() function to get cookie date in array form 
      var arr = document.cookie.split(&#39;|&#39;);
      //processing data in cookie
      var cookie_info = &#39;Data in cookie:<br>username is:  &#39;+arr[0]+"<br>password is:  "+arr[1]+&#39;<br>&#39;;
      //set content of element of id "res"
      document.getElementById("res").innerHTML = cookie_info;
    }
  </script>
</head>
<body>
  <button onclick="showCookie()">Show Cookie</button>
  <p id="res"></p>
</body>
</html>

페이지 스크린샷은 다음과 같습니다.

쿠키 표시 버튼을 클릭하면 쿠키에 포함된 정보가 표시됩니다.

다음으로 이 프로그램을 로컬과 서버에서 실행하고, IE 브라우저와 Chrome 브라우저에서 각각 이 프로그램을 실행하여 쿠키가 어떻게 실행되는지 살펴보겠습니다.

먼저 이 프로그램을 로컬에서 실행하고 위의 두 파일을 E 드라이브에 넣습니다. 먼저 IE 브라우저에서 실행하고 createCookie.html 페이지에 정보를 입력한 후 제출 버튼을 클릭하세요. 스크린샷은 다음과 같습니다.

showCookie.html 페이지로 이동한 후 쿠키 표시 버튼을 클릭하세요. 페이지 스크린샷은 다음과 같습니다.

쿠키는 로컬 환경의 IE 브라우저에서 잘 작동합니다.

다음으로 Chrome 브라우저에서 어떻게 작동하는지 살펴보겠습니다. 먼저 Chrome 브라우저에서 createCookie.html 페이지를 열고 정보를 입력한 후 제출 버튼을 클릭합니다.

이동합니다. showCookie.html 페이지 후 쿠키 표시 버튼을 클릭하세요. 페이지의 스크린샷은 다음과 같습니다.

동일한 프로그램에서 이번에는 Chrome 브라우저에서 쿠키가 실행되지 않았습니다.

그런 다음 이 프로그램을 서버에서 실행해 보겠습니다. xampp를 사용하여 Apache 서버를 열고 위의 두 html 파일을 xampp 설치 폴더 아래의 htdocs 폴더에 넣어야 합니다. (구체적인 작업 방법은 이 블로그를 참조하세요. : AJAX를 사용한 JavaScript(초보자에게 적합)). 이제 IE 브라우저에서 프로그램을 실행하고 IE 브라우저에 URL을 입력합니다: http://localhost/createCookie...:

제출 버튼을 클릭하고 showCookie.html 페이지로 이동한 후 표시를 클릭합니다. 쿠키 버튼, 스크린샷은 다음과 같습니다:

그런 다음 Chrome 브라우저에 URL을 입력합니다: http://localhost/createCookie...:

제출 버튼을 클릭하고 showCookie.html 페이지로 이동한 후 쿠키 표시 버튼을 클릭하세요. 스크린샷은 다음과 같습니다.

이번 서버 환경에서는 IE 브라우저와 크롬 브라우저의 쿠키가 정상적으로 실행되고 있습니다. !

JavaScript 읽기 및 쓰기 쿠키 예제 튜토리얼

관련 기사