Bekerja dengan cookie dalam JavaScript murni tanpa sakit kepala

Halo, Habr!


Baru-baru ini saya menemukan kebutuhan untuk bekerja dengan cookie menggunakan JavaScript. Ketika saya melihat betapa mengerikannya bekerja dengan document.cookie dalam JavaScript murni, saya pergi mencari perpustakaan untuk kenyamanan bekerja dengan cookie. Ternyata, beberapa perpustakaan untuk bekerja dengan cookie, meskipun pada pandangan pertama tampak sederhana dan nyaman, dalam proses bekerja dengan mereka banyak jebakan yang ditemukan.Inilah beberapa di antaranya:


  • Menerima cookie pada jalur yang ditentukan - beberapa perpustakaan yang diuji memiliki masalah dalam mengakses cookie dengan jalur: misalnya, saya tidak bisa mendapatkan cookie dengan jalur dari halaman situs web, /atau sebaliknya, berada di "root" dari situs yang saya terima beberapa kali undefinedketika saya mencoba untuk mendapatkan cookie pada jalur tertentu jalan/order
  • Dukungan JSON - itu terjadi, tetapi bekerja bengkok: misalnya, ketika menerima cookie yang menyimpan JSON, Anda akan mendapatkan string yang dikodekan-URI yang perlu Anda decode dan parsing sendiri. Menghubungkan pustaka ke dalam kode Anda dan menambahkan fungsi untuk menyelesaikan masalah ini entah bagaimana salah.
  • Menghapus cookie - semua perpustakaan memiliki masalah dengan menghapus cookie. Hampir semua orang menghapus nilai cookie, tetapi tidak menghapusnya. Masalah terpisah ada pada cookie sesi: beberapa perpustakaan tidak melihatnya "menunjuk kosong", dan tidak ada yang bisa menghapus cookie sesi.
    Saya tidak akan menyebutkan nama perpustakaan yang saya coba, karena saya pikir ini tidak benar dalam kaitannya dengan pengembang mereka, tetapi saya akan mengklarifikasi bahwa saya mencoba perpustakaan paling populer (menurut npm ) untuk bekerja dengan cookie.

Masalah terakhir benar-benar membuat saya marah, dan saya memutuskan sudah waktunya untuk menulis perpustakaan saya sendiri untuk bekerja dengan cookie.


Cookie.js (npm - cookielib)


Perpustakaan ini menyelesaikan semua masalah di atas, mempertahankan ukuran kecil pendahulunya dan kemudahan penggunaan fungsi.


Mengapa Anda harus menggunakannya?


  • , , .
  • 707
  • -,
  • JSON " " ( JSON, , JSON-, JSON-)
  • -
  • ( ES6!)
  • JS ( )
  • npm, CDN,


:


setCookie('name', 'value');  //  
setCookie('name', {'key': 'value'});  // json 

"" :


setCookie('name', 'value', {expires: Date(3)});  //   
setCookie('name', {'key': 'value'}, {expires: Date(3)});  // json  

setCookie() . .


:


getCookie('name')  //  
getCookie('name', json=true)  //   json,    json.   JSON

:


deleteCookie('name');  // json   -  !


, setCookie(name, value, dict), dict " ": " "


-:


  • path (str) — URL,
  • domain (str) — ,
  • expires (Date object) — "" (/ Date-)
  • max-age (int) — ( expires)
  • secure (bool) — true, HTTPS. false
  • samesite (str) — , XSRF-… strict lax. , .
    • httpOnly (bool) — true, JavaScript. false


, . GitHub. .



, printf RekGRpth. !


All Articles