API JavaScript yang sederhana dan ringan untuk menangani cookie
Jika Anda melihat ini di https://github.com/js-cookie/js-cookie, Anda membaca dokumentasi untuk cabang utama. Lihat dokumentasi untuk rilis terbaru. ??
Cookie Javascript mendukung NPM dengan nama js-cookie
.
npm i js-cookie
Paket NPM memiliki bidang module
yang menunjuk ke varian modul ES perpustakaan, terutama untuk memberikan dukungan untuk bundler yang sadar modul ES, sedangkan bidang browser
menunjuk ke modul UMD untuk kompatibilitas ke belakang penuh.
Belum semua browser mendukung modul ES secara asli . Untuk alasan ini paket/rilis NPM menyediakan varian modul ES dan UMD dan Anda mungkin ingin memasukkan modul ES bersama dengan Fallback UMD untuk memperhitungkan ini:
Atau, sertakan JS-Cookie melalui JSDELIVR CDN.
Impor Perpustakaan:
import Cookies from 'js-cookie'
// or
const Cookies = require ( 'js-cookie' )
Buat cookie, valid di seluruh situs:
Cookies . set ( 'name' , 'value' )
Buat cookie yang berakhir 7 hari dari sekarang, berlaku di seluruh situs:
Cookies . set ( 'name' , 'value' , { expires : 7 } )
Buat cookie yang kedaluwarsa, valid ke jalur halaman saat ini:
Cookies . set ( 'name' , 'value' , { expires : 7 , path : '' } )
Baca Cookie:
Cookies . get ( 'name' ) // => 'value'
Cookies . get ( 'nothing' ) // => undefined
Baca semua cookie yang terlihat:
Cookies . get ( ) // => { name: 'value' }
Catatan: Tidak mungkin membaca cookie tertentu dengan melewati salah satu atribut cookie (yang mungkin atau mungkin tidak digunakan saat menulis cookie yang dimaksud):
Cookies . get ( 'foo' , { domain : 'sub.example.com' } ) // `domain` won't have any effect...!
Cookie dengan nama foo
hanya akan tersedia di .get()
jika terlihat dari tempat kode dipanggil; Atribut domain dan/atau jalur tidak akan memiliki efek saat membaca.
Hapus Cookie:
Cookies . remove ( 'name' )
Hapus cookie yang valid ke jalur halaman saat ini:
Cookies . set ( 'name' , 'value' , { path : '' } )
Cookies . remove ( 'name' ) // fail!
Cookies . remove ( 'name' , { path : '' } ) // removed!
PENTING! Saat menghapus cookie dan Anda tidak mengandalkan atribut default, Anda harus melewati path
yang sama persis, domain
, secure
dan atribut sameSite
yang digunakan untuk mengatur cookie:
Cookies . remove ( 'name' , { path : '' , domain : '.yourdomain.com' , secure : true } )
Catatan: Menghapus cookie yang tidak ada tidak menimbulkan pengecualian atau mengembalikan nilai apa pun.
Jika ada bahaya konflik dengan Cookies
namespace, metode noConflict
akan memungkinkan Anda untuk mendefinisikan namespace baru dan melestarikan yang asli. Ini sangat berguna saat menjalankan skrip di situs pihak ketiga misalnya sebagai bagian dari widget atau SDK.
// Assign the js-cookie api to a different variable and restore the original "window.Cookies"
var Cookies2 = Cookies . noConflict ( )
Cookies2 . set ( 'name' , 'value' )
CATATAN: Metode .noConflict
tidak diperlukan saat menggunakan AMD atau CommonJs, sehingga tidak terpapar di lingkungan tersebut.
Proyek ini sesuai dengan RFC 6265. Semua karakter khusus yang tidak diizinkan dalam nama cookie atau nilai cookie dikodekan dengan masing-masing UTF-8 hex setara menggunakan persen-encoding. Satu-satunya karakter dalam nama cookie atau nilai cookie yang diizinkan dan masih dikodekan adalah karakter % %
, itu lolos untuk menafsirkan input persen sebagai literal. Harap dicatat bahwa strategi penyandian/decoding default dimaksudkan untuk interoperable hanya antara cookie yang dibaca/ditulis oleh JS-Cookie. Untuk mengganti strategi pengkodean/decoding default, Anda perlu menggunakan konverter.
Catatan: Menurut RFC 6265, cookie Anda mungkin dihapus jika terlalu besar atau ada terlalu banyak cookie di domain yang sama, lebih detail di sini.
Default atribut cookie dapat diatur secara global dengan membuat instance API melalui withAttributes()
, atau secara individual untuk setiap panggilan ke Cookies.set(...)
dengan meneruskan objek biasa sebagai argumen terakhir. Atribut per panggilan mengesampingkan atribut default.
Tentukan kapan cookie akan dilepas. Nilai harus menjadi Number
yang akan ditafsirkan sebagai hari sejak saat penciptaan atau instance Date
. Jika dihilangkan, cookie menjadi cookie sesi.
Untuk membuat cookie yang kedaluwarsa dalam waktu kurang dari sehari, Anda dapat memeriksa FAQ di wiki.
Default: Cookie dihapus saat pengguna menutup browser.
Contoh:
Cookies . set ( 'name' , 'value' , { expires : 365 } )
Cookies . get ( 'name' ) // => 'value'
Cookies . remove ( 'name' )
String
yang menunjukkan jalur di mana cookie terlihat.
Bawaan: /
Contoh:
Cookies . set ( 'name' , 'value' , { path : '' } )
Cookies . get ( 'name' ) // => 'value'
Cookies . remove ( 'name' , { path : '' } )
Catatan tentang Internet Explorer:
Karena bug yang tidak jelas dalam implementasi Wininet InternetgetCookie yang mendasarinya, Dokumen IE.Cookie tidak akan mengembalikan cookie jika diatur dengan atribut PATH yang berisi nama file.
(Dari Internet Explorer Cookie Internal (FAQ))
Ini berarti seseorang tidak dapat mengatur jalur menggunakan window.location.pathname
jika pathname seperti itu berisi nama file seperti So: /check.html
(atau setidaknya, cookie seperti itu tidak dapat dibaca dengan benar).
Bahkan, Anda tidak boleh mengizinkan input yang tidak dipercaya untuk mengatur atribut cookie atau Anda mungkin terpapar serangan XSS.
String
yang menunjukkan domain yang valid di mana cookie harus terlihat. Cookie juga akan terlihat oleh semua subdomain.
Default: Cookie hanya terlihat oleh domain atau subdomain halaman tempat cookie dibuat, kecuali untuk Internet Explorer (lihat di bawah).
Contoh:
Dengan asumsi cookie yang sedang dibuat di site.com
:
Cookies . set ( 'name' , 'value' , { domain : 'subdomain.site.com' } )
Cookies . get ( 'name' ) // => undefined (need to read at 'subdomain.site.com')
Catatan tentang perilaku default Internet Explorer:
T3: Jika saya tidak menentukan atribut domain (untuk) cookie, yaitu mengirimkannya ke semua subdomain bersarang? A: Ya, set cookie di example.com akan dikirim ke sub2.sub1.example.com. Internet Explorer berbeda dari browser lain dalam hal ini.
(Dari Internet Explorer Cookie Internal (FAQ))
Ini berarti bahwa jika Anda menghilangkan atribut domain
, itu akan terlihat untuk subdomain di IE.
Baik true
atau false
, menunjukkan jika transmisi cookie membutuhkan protokol aman (https).
Default: Tidak ada persyaratan protokol yang aman.
Contoh:
Cookies . set ( 'name' , 'value' , { secure : true } )
Cookies . get ( 'name' ) // => 'value'
Cookies . remove ( 'name' )
Sebuah String
, memungkinkan untuk mengontrol apakah browser mengirim cookie bersama dengan permintaan lintas situs.
Default: Tidak diatur.
Perhatikan bahwa browser yang lebih baru membuat "LAX" nilai default bahkan tanpa menentukan apa pun di sini.
Contoh:
Cookies . set ( 'name' , 'value' , { sameSite : 'strict' } )
Cookies . get ( 'name' ) // => 'value'
Cookies . remove ( 'name' )
const api = Cookies . withAttributes ( { path : '/' , domain : '.example.com' } )
Buat instance baru dari API yang mengesampingkan implementasi decoding default. Semua mendapatkan metode yang mengandalkan decoding yang tepat untuk bekerja, seperti Cookies.get()
dan Cookies.get('name')
, akan menjalankan konverter yang diberikan untuk setiap cookie. Nilai yang dikembalikan akan digunakan sebagai nilai cookie.
Contoh dari membaca salah satu cookie yang hanya dapat diterjemahkan menggunakan fungsi 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: '北' }
Buat instance baru dari API yang mengesampingkan implementasi penyandian default:
Cookies . withConverter ( {
write : function ( value , name ) {
return value . toUpperCase ( )
}
} )
npm i @types/js-cookie
Lihat Dokumen Server
Lihat pedoman yang berkontribusi
Pelepasan harus dilakukan melalui alur kerja Release
Github Action, sehingga paket yang diterbitkan di npmjs.com memiliki Paket Provenance.
Rilis GitHub dibuat sebagai draft dan perlu diterbitkan secara manual! (Ini jadi kami dapat membuat catatan rilis yang sesuai sebelum diterbitkan.)
Terima kasih banyak kepada BrowserStack karena telah menyediakan pengujian browser tanpa batas tanpa biaya.