Cookieを処理するためのシンプルで軽量のJavaScript API
https://github.com/js-cookie/js-cookieでこれを表示している場合は、メインブランチのドキュメントを読んでいます。最新リリースのドキュメントを表示します。 ??
JavaScript Cookieはjs-cookie
という名前でNPMをサポートしています。
npm i js-cookie
NPMパッケージには、主にESモジュール認識バンドラーのサポートを提供するために、ライブラリのESモジュールバリアントを指すmodule
フィールドがありますが、そのbrowser
フィールドは完全な後方互換性のためのUMDモジュールを指します。
すべてのブラウザがESモジュールをネイティブにサポートするわけではありません。このため、NPMパッケージ/リリースはESとUMDモジュールの両方のバリアントを提供し、これを説明するためにESモジュールとUMDフォールバックを含めることをお勧めします。
または、JSDELIVR CDNを介してJS-Cookieを含めます。
ライブラリをインポートします:
import Cookies from 'js-cookie'
// or
const Cookies = require ( 'js-cookie' )
サイト全体で有効な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' }
注:Cookie属性の1つを渡すことで特定のCookieを読むことはできません(問題のCookieを書くときに使用された場合と使用されていない場合があります):
Cookies . get ( 'foo' , { domain : 'sub.example.com' } ) // `domain` won't have any effect...!
foo
という名前のCookieは、コードが呼び出されている場所から表示されている場合にのみ.get()
で使用できます。ドメインおよび/またはパス属性は、読み取り時に効果がありません。
削除クッキー:
Cookies . remove ( 'name' )
現在のページのパスに有効なCookieを削除します。
Cookies . set ( 'name' , 'value' , { path : '' } )
Cookies . remove ( 'name' ) // fail!
Cookies . remove ( 'name' , { path : '' } ) // removed!
重要! Cookieを削除し、デフォルトの属性に依存していないときは、Cookieの設定に使用されたまったく同じpath
、 domain
、 secure
、およびsameSite
属性を渡す必要があります。
Cookies . remove ( 'name' , { path : '' , domain : '.yourdomain.com' , secure : true } )
注:存在しないCookieを削除すると、例外を提起したり、価値を返したりしません。
名前空間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準拠です。 Cookie-NameまたはCookie-Valueで許可されていないすべての特殊文字は、パーセントエンコードを使用して、それぞれのUTF-8 HEXに相当するものとエンコードされます。許可され、エンコードされているクッキー名またはクッキー値の唯一のキャラクターは、パーセント%
文字であり、入力パーセントをリテラルと解釈するために逃げられます。デフォルトのエンコード/デコード戦略は、JS-Cookieによって読み取られたCookie間でのみ相互運用可能であることを意図していることに注意してください。デフォルトのエンコード/デコード戦略をオーバーライドするには、コンバーターを使用する必要があります。
注:RFC 6265によると、Cookieが大きすぎる場合、または同じドメインにCookieが多すぎると削除される可能性があります。詳細はこちらです。
Cookie属性のデフォルトは、 withAttributes()
を介してAPIのインスタンスを作成することにより、または最後の引数としてプレーンオブジェクトを渡すことにより、 Cookies.set(...)
の各呼び出しに対して個別に作成することにより、グローバルに設定できます。コールごとの属性は、デフォルトの属性をオーバーライドします。
Cookieが削除される時期を定義します。価値は、創造時またはDate
インスタンスからの日として解釈されるNumber
でなければなりません。省略した場合、CookieはセッションCookieになります。
1日以内に期限切れになるCookieを作成するには、WikiのFAQを確認できます。
デフォルト:ユーザーがブラウザを閉じると、Cookieが削除されます。
例:
Cookies . set ( 'name' , 'value' , { expires : 365 } )
Cookies . get ( 'name' ) // => 'value'
Cookies . remove ( 'name' )
Cookieが表示されるパスを示すString
。
デフォルト: /
例:
Cookies . set ( 'name' , 'value' , { path : '' } )
Cookies . get ( 'name' ) // => 'value'
Cookies . remove ( 'name' , { path : '' } )
インターネットエクスプローラーに関するメモ:
基礎となるWininet InternetGetCookieの実装における不明瞭なバグのため、IEのdocument.cookieは、ファイル名を含むパス属性で設定された場合、Cookieを返しません。
(インターネットエクスプローラークッキー内部(FAQ)から)
これはwindow.location.pathname
を使用してパスを設定できないことを意味します。そのようなパス名にso: /check.html
のようなファイル名が含まれている場合(または少なくとも、そのようなCookieを正しく読み取ることはできません)。
実際、信頼できない入力がCookie属性を設定することを許可しないでください。または、XSS攻撃にさらされる可能性があります。
Cookieが表示される必要がある有効なドメインを示すString
。 Cookieはすべてのサブドメインにも表示されます。
デフォルト: Cookieは、Internet Explorerを除き、Cookieが作成されたページのドメインまたはサブドメインにのみ表示されます(以下を参照)。
例:
site.com
で作成されているCookieを仮定してください:
Cookies . set ( 'name' , 'value' , { domain : 'subdomain.site.com' } )
Cookies . get ( 'name' ) // => undefined (need to read at 'subdomain.site.com')
インターネットエクスプローラーのデフォルト動作に関する注意:
Q3:Cookieのドメイン属性を指定しない場合、とにかくネストされたすべてのサブドメインに送信しますか? A:はい、Example.comに設定されたCookieがsub2.sub1.example.comに送信されます。インターネットエクスプローラーは、この点で他のブラウザとは異なります。
(インターネットエクスプローラークッキー内部(FAQ)から)
これは、 domain
属性を省略すると、IEのサブドメインに表示されることを意味します。
Cookieトランスミッションに安全なプロトコル(HTTPS)が必要かどうかを示すtrue
またはfalse
いずれか。
デフォルト:安全なプロトコル要件はありません。
例:
Cookies . set ( 'name' , 'value' , { secure : true } )
Cookies . get ( 'name' ) // => 'value'
Cookies . remove ( 'name' )
文字String
。ブラウザがクロスサイトのリクエストとともにCookieを送信しているかどうかを制御できます。
デフォルト:設定されていません。
ここで何も指定しなくても、より最近のブラウザが「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')
など、適切なデコードに依存して作業に依存するメソッドを取得し、各クッキーの指定されたコンバーターを実行します。返された値は、Cookie値として使用されます。
escape
関数を使用してのみデコードできるCookieの1つを読むことの例:
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 Workflowを介してリリースを行う必要があります。
GitHubリリースはドラフトとして作成されており、手動で公開する必要があります! (これは、公開前に適切なリリースノートを作成できるようにするためです。)
無制限のブラウザテストを無料で提供してくれたBrowserstackに感謝します。