Bagaimana cara menggunakan javascript dapat mengatur cookie?

Setelah server web mengirimkan halaman web ke browser, koneksi dimatikan dan semua informasi yang disimpan oleh server hilang. Ini membuat mempertahankan status pengguna menjadi sulit, karena kami tidak dapat merujuk ke server untuk nilai khusus untuk aktivitas browser pengguna saat ini. Cookie mengatasi kendala ini dengan menyimpan informasi yang diperlukan di komputer pengguna dalam bentuk string nama=nilai

Table of Contents Show

Tetapkan cookie
Tetapkan tanggal kedaluwarsa untuk cookie
Tetapkan jalur untuk cookie
fungsi setCookie
Hapus cookie
Dapatkan cookie
Dapatkan kue

Cookie sering digunakan untuk menyimpan nama pengguna, preferensi, token autentikasi, dan item serupa lainnya

Penting untuk menjaga keamanan saat menyimpan informasi sensitif seperti token autentikasi. Cookie dapat dilihat dan dimodifikasi oleh pengguna, berpotensi mengungkap informasi sensitif. Untuk informasi selengkapnya tentang masalah ini, lihat bagian di bawah ini

Menetapkan cookie menggunakan sintaks berikut

dokumen. cookie = 'kuki baru'

Mari kita pecahkan ini menjadi komponen-komponennya

dokumen. cookie adalah perintah yang digunakan untuk membuat cookie baru
'newCookie' adalah string yang menetapkan nilai cookie. Ini memiliki sintaksnya sendiri yang harus diperhatikan. nama=nilai
Untuk alasan keterbacaan, nama harus menyiratkan apa yang disimpan cookie (mis. g. nama belakang)
nilai hanyalah nilai

Di bawah ini adalah contoh pengaturan cookie menggunakan sintaks ini

document.cookie = "username=Max Brown";

Kode di atas akan menyimpan cookie bernama "username" dengan nilai "Max Brown"

Catatan. Cookie kedaluwarsa secara otomatis berdasarkan tanggal kedaluwarsa yang dapat diatur dalam kode. Jika tidak ada tanggal kedaluwarsa yang ditetapkan, cookie akan dihapus segera setelah browser ditutup. Bagian selanjutnya mencakup pengaturan tanggal kedaluwarsa untuk cookie Anda

Secara default, cookie akan dihapus secara otomatis setelah browser ditutup. Ini mencegah pengguna menggunakan kembali nilai cookie pada kunjungan berikutnya ke halaman Anda. Anda dapat mengesampingkan ini dengan menetapkan tanggal kedaluwarsa untuk cookie Anda. Hal ini dapat dilakukan dengan mudah dengan menambahkan expireds=expirationDate di UTC yang dipisahkan dengan titik koma dari nama=nilai, seperti yang terlihat pada contoh berikut

document.cookie = "username=Max Brown; expires=Wed, 05 Aug 2020 23:00:00 UTC";

Contoh di atas menyetel cookie "nama pengguna" menjadi "Max Brown" seperti sebelumnya, tetapi juga menambahkan tanggal kedaluwarsa Rabu, 5 Agustus 2020, dengan waktu kedaluwarsa 23. 00. 00 UTC. Saat waktu kedaluwarsa ini tercapai, nilai cookie akan dihapus

Catatan. UTC adalah standar waktu (waktu universal terkoordinasi)

Secara default, cookie diasosiasikan dengan halaman yang menyetelnya. Ini dapat menyebabkan nilai cookie yang sangat mudah dilacak oleh pengguna yang ingin tahu menggunakan alat pengembang. SEPERTI itu, tidak disarankan untuk menyimpan data sensitif di jalur root untuk aplikasi Anda. Sebagai gantinya, Anda dapat memberikan jalur tempat data ini harus disimpan. Sintaks untuk ini adalah sebagai berikut

document.cookie = "username=Max Brown; expires=Wed, 05 Aug 2020 23:00:00 UTC; path=/"

Pada contoh di atas, kami telah menyetel cookie "nama pengguna" kami dengan nilai "Max Brown", dan menyetel kedaluwarsa ke tanggal yang sama seperti sebelumnya. Perbedaannya adalah parameter jalur, yang mengubah tempat cookie disimpan di mesin pengguna. Ini sangat berguna saat mencoba menyimpan informasi sensitif, karena membuat informasi lebih sulit ditemukan

fungsi setCookie

Semua contoh di atas meng-hard-code nilai cookie, yang akan menjadi utilitas terbatas dalam banyak kasus. Nilai cookie juga dapat diatur menggunakan fungsi JavaScript. Ambil kode berikut misalnya

let username = 'Max Brown';

// Set a Cookie
function setCookie(cName, cValue, expDays) {
        let date = new Date();
        date.setTime(date.getTime() + (expDays * 24 * 60 * 60 * 1000));
        const expires = "expires=" + date.toUTCString();
        document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
}

// Apply setCookie
setCookie('username', username, 30);

Kode ini mendefinisikan sebuah fungsi, setCookie(). Fungsi ini akan membuat cookie dengan nama "nama pengguna", nilai "Max Brown" dengan tanggal kedaluwarsa 30 hari sejak dibuat. Mari jelajahi fungsi ini baris demi baris

Pada baris pertama badan fungsi, variabel tanggal dibuat dan diberi nilai tanggal dan waktu saat ini dalam UTC sebagai nilai awalnya, stempel waktu UTC ini akan diformat menggunakan format stempel waktu UTC (mis. g. Kamis 06 Agustus 2020 12. 41. 34 GMT+0000 (UTC)). Nilai ini dapat disesuaikan berdasarkan zona waktu pengguna
Baris kode berikutnya mengubah stempel waktu UTC di atas menjadi angka (E. g. 1599308841783). Angka ini adalah bilangan bulat yang dikenal sebagai waktu "zaman", atau satuan waktu Unix, dan dapat diubah menjadi stempel waktu UTC dengan mudah. Ini memungkinkan kita untuk dengan mudah memanipulasi waktu menggunakan perbedaan waktu bilangan bulat. Bagian kedua dari baris ini menggunakan waktu periode ini untuk menghitung tanggal kedaluwarsa cookie. Ini membutuhkan jumlah milidetik yang Anda inginkan untuk kedaluwarsa cookie Anda. Kode di atas mengonversi parameter expDays (dengan nilai 30 seperti yang diteruskan di atas), dan mengubah hari yang diminta tersebut menjadi jumlah milidetik yang setara. Milidetik ini kemudian ditambahkan ke cap waktu zaman Unix, membuat tanggal dan waktu kedaluwarsa target untuk cookie kami
Baris ketiga mendeklarasikan variabel baru kedaluwarsa, dan memberinya nilai yang dihitung untuk tanggal kedaluwarsa di baris sebelumnya. Nilai ini diubah menjadi string UTC, yang selalu menunjukkan waktu GMT sebagai kebalikan dari waktu setempat (mis. g. Sab, 05 Sep 2020 12. 38. 16 GMT)
Baris terakhir dari fungsi menyetel cookie baru dengan semua parameter terisi
nama pengguna=Maks Brown; . 38. 16 GMT;

Untuk memperbarui cookie, cukup timpa nilainya di objek cookie. Caranya dengan menyetel cookie baru pada dokumen dengan Nama yang sama, tetapi Nilai yang berbeda. Kode berikut menunjukkan ini dalam tindakan

username = 'Jen Brown';

setCookie('username', username, 30);

Pada kode di atas, kami tidak membuat cookie baru, karena kami sudah memiliki nilai di cookie "nama pengguna" dari "Max Brown". Panggilan ke setCookie() ini menimpa nilai cookie "nama pengguna", mengubahnya dari "Max Brown" menjadi "Jen Brown"

Untuk menghapus cookie, Anda cukup memberikan tanggal kedaluwarsa yang terjadi di masa lalu. Saat browser melihat bahwa cookie telah kedaluwarsa, browser akan menghapus cookie secara otomatis

Fakta menyenangkan. penghitungan waktu formal Unix dimulai pada Kamis, 1 Januari 1970 pada tengah malam GMT. Ini dikenal sebagai waktu "Zaman". Stempel waktu dalam bilangan bulat juga dikenal sebagai "milidetik sejak Zaman", atau jumlah milidetik yang telah terjadi sejak 1 Januari 1970

Untuk menghapus cookie apa pun dengan mudah, cukup atur tanggal kedaluwarsanya sebagai stempel waktu Zaman

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

Pernyataan ini akan menghapus cookie bernama "nama pengguna" jika ada

Beberapa browser tidak mengizinkan penghapusan cookie jika jalurnya tidak ditentukan. Oleh karena itu, penting untuk selalu menentukan jalur saat bekerja dengan cookie

Mendapatkan semua cookie sangat sederhana. Cookie disimpan sebagai rangkaian string yang dipisahkan oleh titik koma. Anda dapat mengakses nilai ini dengan memanggil dokumen. cookie seperti yang terlihat pada contoh di bawah ini

document.cookie = "username=Debra White; path=/";
document.cookie = "userId=wjgye264s; path=/";
let cookies = document.cookie;
console.log(cookies); // expected output: username=Debra White; userId=wjgye264s

Kode di atas menetapkan dua cookie - nama pengguna dan userId, dan mengembalikan nilai cookie ke cookie variabel sebagai string tunggal yang dipisahkan titik koma. Perhatikan bahwa nilai yang dikembalikan tidak menyertakan jalur yang ditentukan

Dapatkan kue

Mengambil nilai satu cookie membutuhkan sedikit kerja keras

Pertama, kita akan menulis sebuah fungsi yang dapat menentukan nilai sebuah cookie ketika diberi nama cookie. Ini kode sampel kami

function getCookie(cName) {
      const name = cName + "=";
      const cDecoded = decodeURIComponent(document.cookie); //to be careful
      const cArr = cDecoded .split('; ');
      let res;
      cArr.forEach(val => {
          if (val.indexOf(name) === 0) res = val.substring(name.length);
      })
      return res;
}

Menjelajahi fungsi getCookie() per baris

Fungsi getCookie menggunakan nama cookie sebagai parameter, lalu melakukan langkah-langkah berikut

Baris pertama menetapkan nama cookie yang diminta ke nama variabel const. Itu menambahkan tanda sama dengan akhir nama. Misalnya, meneruskan nilai cookie 'username' akan menghasilkan 'username=' yang disimpan dalam variabel nama
Baris berikutnya mengambil semua cookie menggunakan dokumen. cookie, lalu terapkan decodeURIComponent() ke hasilnya. Fungsi ini "membersihkan" string dari "jejak penyandian" yang mungkin telah disertakan dalam konten cookie. Anda mungkin pernah melihat jejak penyandian ini sebelumnya, terlihat mirip dengan ini. %20%24namapengguna%20
Seperti yang dijelaskan pada bagian sebelumnya, dokumen. cookie mengembalikan hasil sebagai string yang berisi semua nilai cookie yang dipisahkan oleh titik koma (;). Di sini saya telah menggunakan metode split() , memintanya untuk memisahkan nilai-nilai string ketika bertemu titik koma diikuti dengan spasi kosong. Hasilnya akan berupa larik string cookie
Dua baris berikut mendefinisikan variabel pengembalian, res, dan memanggil metode forEach() pada larik cookie yang diperoleh di baris 4 (cArr). forEach() melakukan iterasi melalui array, mengeksekusi fungsi callback satu kali untuk setiap elemen array. Dalam contoh di atas, jika nilai yang disimpan dalam nama variabel muncul di awal string (mis. e. pada indeks 0), blok bagian dalam menetapkan konten cookie (mis. e. nilai setelah tanda "=") ke variabel res. Panjang nilai lebih besar dari indeks per satu. Hal ini memungkinkan kita untuk memangkas nama string lengkap cookie, dan tanda persamaan di belakangnya dengan memulai trim di index = name. panjangnya. Untuk pemangkasan saya menggunakan metode substring() , yang menghasilkan substring dengan panjang yang ditentukan dari input string asli
Jika metode forEach() tidak dapat menemukan cookie yang diminta, nilai 'undefined' akan dikembalikan

Perlu diingat bahwa dalam banyak kasus, bekerja dengan cookie akan dimulai dengan mengambil nilai cookie, lalu meminta informasi dari pengguna jika cookie yang diminta tidak ditemukan.