프런트 엔드에서 쿠키를 설정하는 방법

이번에는 프런트엔드에서 쿠키를 설정하는 방법과 프런트엔드에서 쿠키를 설정할 때 주의사항이 무엇인지 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

쿠키

정의: 클라이언트의 하드 드라이브에 정보를 저장하는 수단입니다.

왜 사용하나요? : 일부 정보를 저장하고 일부 특수 효과를 얻는 데 사용할 수 있습니다. 예를 들어 특정 일수 동안 로그인을 방지하거나 일부 작은 데이터를 저장할 수 있습니다.

쿠키에 있는 일부 필드의 의미:

1. key=value(key=value)는 쿠키의 키-값 쌍입니다. 일반적으로 해당 값은 키

2. 만료에 따라 획득됩니다. (만료 시간)을 설정하려면 쿠키의 만료 시간도 ';'으로 구분합니다.expires=GMT timestring 예를 들어 30일 동안 로그인을 피하려면 만료 시간을 오늘로부터 30일 후의 날짜입니다. 만료 시간이 설정되지 않으면 브라우저는 기본적으로 쿠키를 닫고 사라집니다.

3. 경로 쿠키는 어디서나 얻을 수 없습니다. 웹사이트는 여러 디렉터리로 나누어져 있습니다. 쿠키는 여러 디렉터리에서 사용되지 않을 수 있으므로 쿠키 경로를 설정할 수 있습니다. 이는 더 안전하며 모든 디렉터리에서 쿠키에 액세스하는 것을 방지합니다. path=/E:javascript/test를 통해 이 디렉터리

4. domain(도메인)에서만 쿠키를 얻을 수 있습니다. 기본적으로 쿠키는 쿠키가 위치한 도메인 이름에서만 접근할 수 있지만 가끔은 a. chaijinsong.com은 b.chaijinsong.com 아래의 쿠키에 접근해야 합니다. 이 경우 domain=chaijinsong.com이 설정되어야 합니다. 이런 식으로 두 하위 도메인 모두 쿠키

5. 에 접근할 수 있습니다. 보안(보안) 기본 보안은 false입니다. 즉, http 프로토콜을 통해 전송되지만 secure=true인 경우 https

를 통해서만 전송이 가능합니다.

사용 방법은? :

document.cookie; //获取cookie
"aaa=aaa;bbb=bbb" //类似于这种格式，但是并不是字符串。
//设置cookie,也可以用来进行删除cookie，即将过期时间设置为过去的时间，最后一个参数可以传负数来实现
function setCookie(cname,cvalue,exdays){
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}
setCookie('cjs','cjs',30); //设置 name为cjs，value为cjs的一个cookie，并且时间为30天。
setCookie('cjs','cjs',-1); //让该cookie过期,然后在document.cookie中就没有cjs=cjs这个cookie了。但是其他key=value还存在
//获取某个key的cookie
function getCookie(key){
    let arr1 = document.cookie.split(';');
    for(let i=0;i<arr1.length;i++){
        let arr2 = arr1[i].split('=');
        if(key.trim() === arr2[0].trim()){
            return (arr2[1]);
        }
    }
    return "";
}
getCookie('cjs'); //因为上面已经将cjs这个cookie干掉了，所以这里得到为 ""

참고: Google 브라우저에서 로컬 HTML 파일을 열 때 쿠키에 값을 직접 할당하는 것은 허용되지 않지만 Firefox에서는 가능합니다. 따라서 테스트하려면 먼저 로컬에서 서버를 연 다음 로컬 IP를 사용하여 파일에 액세스하십시오. 쿠키 작업을 수행합니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트기타 관련 기사를 주목하세요!

추천 도서:

CSS를 사용하여 탁구 격투 애니메이션 구현

CSS를 사용하여 탁구 격투 애니메이션 구현

위 내용은 프런트 엔드에서 쿠키를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!