쿠키 취급을위한 간단하고 가벼운 JavaScript API
https://github.com/js-cookie/js-cookie에서 이것을보고 있다면 메인 브랜치의 문서를 읽고 있습니다. 최신 릴리스에 대한 설명서를보십시오. ??
JavaScript Cookie는 js-cookie
이름으로 NPM을 지원합니다.
npm i js-cookie
NPM 패키지에는 라이브러리의 ES 모듈 변형을 가리키는 module
필드가 있으며, 주로 ES 모듈 AWARE BUNDLERS를 지원하는 반면, browser
필드는 UMD 모듈을 전체 뒤로 호환 할 수 있도록 지적합니다.
모든 브라우저가 ES 모듈을 기본적으로 지원하는 것은 아닙니다 . 이러한 이유로 NPM 패키지/릴리스는 ES 및 UMD 모듈 변형을 모두 제공하며 UMD 폴백과 함께 ES 모듈을 포함시킬 수 있습니다.
또는 JSDELIVR CDN을 통해 JS-Cookie를 포함하십시오.
라이브러리 가져 오기 :
import Cookies from 'js-cookie'
// or
const Cookies = require ( 'js-cookie' )
전체 사이트에서 유효한 쿠키를 만듭니다.
Cookies . set ( 'name' , 'value' )
지금부터 7 일 만에 만료되는 쿠키를 만듭니다. 전체 사이트에서 유효합니다.
Cookies . set ( 'name' , 'value' , { expires : 7 } )
현재 페이지의 경로에 유효한 만료 쿠키를 만듭니다.
Cookies . set ( 'name' , 'value' , { expires : 7 , path : '' } )
쿠키 읽기 :
Cookies . get ( 'name' ) // => 'value'
Cookies . get ( 'nothing' ) // => undefined
모든 가시 쿠키 읽기 :
Cookies . get ( ) // => { name: 'value' }
참고 : 쿠키 속성 중 하나를 전달하여 특정 쿠키를 읽을 수 없습니다 (문제의 쿠키를 작성할 때 사용되었거나 그렇지 않을 수도 있음) :
Cookies . get ( 'foo' , { domain : 'sub.example.com' } ) // `domain` won't have any effect...!
foo
라는 이름의 쿠키는 코드가 호출되는 위치에서 볼 수있는 경우 .get()
에서만 사용할 수 있습니다. 도메인 및/또는 경로 속성은 읽을 때 영향을 미치지 않습니다.
쿠키 삭제 :
Cookies . remove ( 'name' )
현재 페이지의 경로에 유효한 쿠키 삭제 :
Cookies . set ( 'name' , 'value' , { path : '' } )
Cookies . remove ( 'name' ) // fail!
Cookies . remove ( 'name' , { path : '' } ) // removed!
중요한! 쿠키를 삭제하고 기본 속성에 의존하지 않을 때는 쿠키를 설정하는 데 사용 된 것과 동일한 path
, domain
, secure
및 sameSite
속성을 전달해야합니다.
Cookies . remove ( 'name' , { path : '' , domain : '.yourdomain.com' , secure : true } )
참고 : 존재하지 않는 쿠키를 제거하면 예외가 발생하거나 값을 반환하지 않습니다.
네임 스페이스 Cookies
와 충돌 할 위험이있는 경우 noConflict
메소드를 사용하면 새 네임 스페이스를 정의하고 원래 네임 스페이스를 보존 할 수 있습니다. 이것은 위젯 또는 SDK의 일환으로 타사 사이트에서 스크립트를 실행할 때 특히 유용합니다.
// Assign the js-cookie api to a different variable and restore the original "window.Cookies"
var Cookies2 = Cookies . noConflict ( )
Cookies2 . set ( 'name' , 'value' )
참고 : AMD 또는 CommonJS를 사용할 때 .noConflict
방법이 필요하지 않으므로 해당 환경에서 노출되지 않습니다.
이 프로젝트는 RFC 6265를 준수합니다. 쿠키 이름이나 쿠키 값에서 허용되지 않는 모든 특수 문자는 백분율 인코딩을 사용하여 각각 UTF-8 HEX와 동등한 각각과 인코딩됩니다. 허용되고 여전히 인코딩 된 쿠키 이름 또는 쿠키 값의 유일한 문자는 퍼센트 %
문자입니다. 기본 인코딩/디코딩 전략은 JS-Cookie가 읽거나 쓴 쿠키 간에만 상호 운용 할 수 있습니다. 기본 인코딩/디코딩 전략을 무시하려면 변환기를 사용해야합니다.
참고 : RFC 6265에 따르면 쿠키가 너무 크거나 같은 도메인에 쿠키가 너무 많으면 쿠키가 삭제 될 수 있습니다.
쿠키 속성 기본값은 withAttributes()
통해 API 인스턴스를 만들어 전 세계적으로 설정하거나 Cookies.set(...)
에 대한 각 호출에 대해 개별적으로 일반 객체를 마지막 인수로 전달하여 개별적으로 설정할 수 있습니다. 전화 당 속성은 기본 속성을 대체합니다.
쿠키가 제거되는시기를 정의하십시오. 값은 창조 시점 또는 Date
인스턴스로 해석되는 Number
여야합니다. 생략하면 쿠키는 세션 쿠키가됩니다.
하루도 채되지 않아 만료되는 쿠키를 만들려면 위키에서 FAQ를 확인할 수 있습니다.
기본값 : 사용자가 브라우저를 닫으면 쿠키가 제거됩니다.
예 :
Cookies . set ( 'name' , 'value' , { expires : 365 } )
Cookies . get ( 'name' ) // => 'value'
Cookies . remove ( 'name' )
쿠키가 보이는 경로를 나타내는 String
.
기본: /
예 :
Cookies . set ( 'name' , 'value' , { path : '' } )
Cookies . get ( 'name' ) // => 'value'
Cookies . remove ( 'name' , { path : '' } )
Internet Explorer에 대한 참고 사항 :
기본 Wininet InternetGetCookie 구현의 모호한 버그로 인해 IE의 Document.Cookie는 파일 이름이 포함 된 경로 속성으로 설정된 경우 쿠키를 반환하지 않습니다.
(Internet Explorer Cookie Internals (FAQ))
즉, window.location.pathname
을 사용하여 경로를 설정할 수 없다는 것을 의미합니다. 그러한 PathName에는 so : /check.html
과 같은 파일 이름이 포함 된 경우 (또는 적어도 쿠키를 올바르게 읽을 수 없습니다).
실제로, 신뢰할 수없는 입력이 쿠키 속성을 설정하도록 허용해서는 안됩니다. 그렇지 않으면 XSS 공격에 노출 될 수 있습니다.
쿠키를보아야하는 유효한 도메인을 나타내는 String
. 쿠키는 모든 하위 도메인에도 보입니다.
기본값 : 쿠키는 인터넷 익스플로러를 제외하고 쿠키가 생성 된 페이지의 도메인 또는 하위 도메인에만 볼 수 있습니다 (아래 참조).
예 :
site.com
에서 생성되는 쿠키를 가정합니다.
Cookies . set ( 'name' , 'value' , { domain : 'subdomain.site.com' } )
Cookies . get ( 'name' ) // => undefined (need to read at 'subdomain.site.com')
Internet Explorer 기본 동작에 대한 참고 사항 :
Q3 : 도메인 속성을 지정하지 않으면 (쿠키), 즉 어쨌든 중첩 된 하위 도메인으로 보냅니 까? A : 그렇습니다. example.com의 쿠키 세트는 sub2.sub1.example.com으로 전송됩니다. 인터넷 익스플로러는 이와 관련하여 다른 브라우저와 다릅니다.
(Internet Explorer Cookie Internals (FAQ))
이는 domain
속성을 생략하면 IE의 하위 도메인에 대해 볼 수 있음을 의미합니다.
쿠키 변속기에 보안 프로토콜 (HTTP)이 필요한지 false
true
냅니다.
기본값 : 안전한 프로토콜 요구 사항이 없습니다.
예 :
Cookies . set ( 'name' , 'value' , { secure : true } )
Cookies . get ( 'name' ) // => 'value'
Cookies . remove ( 'name' )
브라우저가 크로스 사이트 요청과 함께 쿠키를 보내고 있는지 여부를 제어 할 수있는 String
.
기본값 : 설정되지 않습니다.
보다 최근의 브라우저는 여기에 아무것도 지정하지 않고도 "lax"가 기본값을 만들고 있습니다.
예 :
Cookies . set ( 'name' , 'value' , { sameSite : 'strict' } )
Cookies . get ( 'name' ) // => 'value'
Cookies . remove ( 'name' )
const api = Cookies . withAttributes ( { path : '/' , domain : '.example.com' } )
기본 디코딩 구현을 무시하는 API의 새 인스턴스를 만듭니다. Cookies.get()
및 Cookies.get('name')
과 같이 적절한 디코딩에 의존하는 방법은 각 쿠키에 대한 주어진 변환기를 실행합니다. 반환 된 값은 쿠키 값으로 사용됩니다.
escape
기능을 사용하여 해독 할 수있는 쿠키 중 하나를 읽는 예 :
document . cookie = 'escaped=%u5317'
document . cookie = 'default=%E5%8C%97'
var cookies = Cookies . withConverter ( {
read : function ( value , name ) {
if ( name === 'escaped' ) {
return unescape ( value )
}
// Fall back to default for all other cookies
return Cookies . converter . read ( value , name )
}
} )
cookies . get ( 'escaped' ) // 北
cookies . get ( 'default' ) // 北
cookies . get ( ) // { escaped: '北', default: '北' }
기본 인코딩 구현을 무시하는 API의 새 인스턴스를 만듭니다.
Cookies . withConverter ( {
write : function ( value , name ) {
return value . toUpperCase ( )
}
} )
npm i @types/js-cookie
서버 문서를 확인하십시오
기고 가이드 라인을 확인하십시오
NPMJS.com의 게시 된 패키지에는 패키지 출처가 있도록 Release
GitHub Actions 워크 플로우를 통해 릴리스를 수행해야합니다.
Github 릴리스는 초안으로 작성되며 수동으로 게시해야합니다! (이것은 우리가 출판하기 전에 적절한 릴리스 노트를 만들 수 있도록합니다.)
무제한 브라우저 테스트를 무료로 제공 한 Browserstack에게 감사드립니다.