JavaScript에서 이름으로 쿠키 가져오기

Waqar Aslam 2023년10월12일
JavaScript에서 이름으로 쿠키 가져오기

쿠키는 매우 작은 텍스트 파일 형태로 컴퓨터에 보관되는 정보 조각입니다. 웹 서버가 웹 페이지를 브라우저로 전송하면 둘 사이의 연결이 끊어지고 서버는 사용자에 대한 모든 정보를 즉시 잊어버립니다.

쿠키는 다음과 같은 이유로 사용자에 대한 정보를 기억하는 방법에 대한 솔루션으로 처음 개발되었습니다.

  1. 사용자가 특정 웹사이트를 방문할 때마다 사용자의 이름이 쿠키에 저장될 수 있습니다.
  2. 사용자가 나중에 웹사이트로 돌아올 때 쿠키는 사용자의 이름을 “기억"합니다.

가장 먼저 할 일은 getACookie라고 하는 함수를 구성하고 cookieName을 메소드의 인수로 사용하는 것입니다.

JavaScript에서 이름으로 쿠키 가져오기

다음으로 nameOfCookie로 참조할 변수를 생성하고 cookieName + '='를 검색할 텍스트로 채웁니다.

let nameOfCookie = cookieName + '=';

이제 cookieDecoded라는 이름으로 새 변수를 만들었으므로 decodeURIComponent 속성을 사용하여 쿠키 문자열을 디코딩합니다.

이전에는 document.cookie를 사용하여 $와 같은 특수 문자를 처리하기 위해 모든 쿠키를 검색했지만 이제는 이 새 변수를 대신 사용합니다.

문서 속성 쿠키를 사용하여 문서와 연결된 쿠키를 읽고 쓸 수 있습니다. 저장되는 쿠키의 실제 값에 대한 getter 및 setter입니다.

let cookieDecoded = decodeURIComponent(document.cookie);

.split(';') 속성을 사용하여 ;에서 쿠키를 배열로 분리한 후 생성된 배열을 보유할 cookieArray라는 새 변수를 만듭니다. 성격.

let cookieArray = cookieDecoded.split(';');

더 나아가 cookieArray를 통해 반복합니다.

for (let i = 0; i < cookieArray.length; i++) ```

루프 내에서 `cIndex`라고 하는 새 변수를 만듭니다. 이 변수는 `i` 값이 결정하는 `cookieArray`의 특정 인덱스 값을 보유합니다.

```javascript
let cIndex = cookieArray[i];

charAt() 속성은 cIndex 배열의 인덱스 0에 있는 문자 값을 검사하여 비어 있는지 여부를 결정하는 while 루프를 시작합니다.

while (cIndex.charAt(0) == ' ') ```

`cIndex`의 첫 번째 인덱스가 비어 있으면 `subString()` 속성을 사용하여 두 번째 인덱스의 값을 `cIndex` 변수에 저장합니다.

```javascript
cIndex = cIndex.substring(1);

cIndex.indexOf(nameOfCookie) 표현식에서 받은 값이 0이면 조건이 충족되고 cIndex에서 얻은 값을 반환합니다.

if (cIndex.indexOf(nameOfCookie) == 0) ```

<!--adsense-->

조건이 `true`로 평가되면 `c.substring function (name.length, c.length)`로 표시되는 쿠키 값을 반환합니다. 또한 조건이 `거짓`으로 판명되면 빈 문자열을 반환합니다.

```javascript
{ return cIndex.substring(nameOfCookie.length, cIndex.length); }
return '';

전체 소스 코드:

function getACookie(cookieName) {
  let nameOfCookie = cookieName + '=';
  let cookieDecoded = decodeURIComponent(document.cookie);
  let cookieArray = cookieDecoded.split(';');

  for (let i = 0; i < cookieArray.length; i++) {
    let cIndex = cookieArray[i];
    while (cIndex.charAt(0) == ' ') {
      cIndex = cIndex.substring(1);
    }
    if (cIndex.indexOf(nameOfCookie) == 0) {
      return cIndex.substring(nameOfCookie.length, cIndex.length);
    }
  }
  return '';
}
작가: Waqar Aslam
Waqar Aslam avatar Waqar Aslam avatar

I am Waqar having 5+ years of software engineering experience. I have been in the industry as a javascript web and mobile developer for 3 years working with multiple frameworks such as nodejs, react js, react native, Ionic, and angular js. After which I Switched to flutter mobile development. I have 2 years of experience building android and ios apps with flutter. For the backend, I have experience with rest APIs, Aws, and firebase. I have also written articles related to problem-solving and best practices in C, C++, Javascript, C#, and power shell.

LinkedIn