Web server dan HTTP Server adalah stateless, jadi ketika server web mengirim halaman ke browser, lalu koneksi terputus dan maka server akan melupakan semua history yang kamu lakukan sebelumnya pada browser sebelumnya.

Bagaimana browser dan server web dapat mengingat informasi history yang kamu lakukan sebelumnya? Maka dari itu cookie diciptakan untuk mengatasi masalah ini.

Ketika pengguna datang ke halaman web, nama mereka, id unik, atau informasi lainnya dapat disimpan dalam cookie di browser mereka. Dan lain kali pengguna kembali ke halaman web, cookie akan mengingat nama atau id unik mereka.

Sampai disini analoginya sudah jelas ? ok kita lanjutkan.

Cookie hanyalah file teks kecil dari data yang disimpan di browser komputer Kamu. Mereka (cookie) berisi data ini:

1. nama-nilai dengan data aktual.
2. Tanggal kedaluwarsa saat cookie menjadi tidak valid.
3. Domain dan jalur server kemana itu harus dikirim.

Dan cookie juga memiliki beberapa batasan yang perlu disebutkan:

1. Ukuran maksimum 4096 Byte per cookie secara individu.
2. Maksimum 20 cookie per domain (ini sedikit berbeda untuk setiap browser)
3. Cookie bersifat pribadi untuk domainnya sendiri (situs tidak dapat membaca cookie domain lain, hanya cookie domain itu sendiri)
4. Batas ukuran berlaku untuk seluruh cookie, bukan hanya nilainya.

Di browser, cookie di ekspos melalui objek dokumen sebagai document.cookies.

Pada bagian di bawah ini, kita akan membahas cara mengatur, mendapatkan, memperbarui, dan menghapus data cookie di browser Kamu menggunakan JavaScript.

Mengatur Cookies

Mengatur cookie di browser Kamu menggunakan JavaScript itu mudah!Kita akan mempelajari caranya di bawah ini.

Setel Cookie

Berikut adalah JavaScript untuk membuat cookie baru di browser tempat kode dijalankan:

document.cookie = "userId=nick123"

Setelah itu Kamu jalankan, buka browser dan Kamu akan menemukan cookie di bagian Aplikasi Alat Pengembang (Safari atau Chrome) atau Penyimpanan (Firefox).

Tetapkan Tanggal Kedaluwarsa Cookie

Kamu juga dapat menambahkan tanggal kedaluwarsa (dalam UTC) ke cookie yang memberi tahu browser kapan harus menghapusnya:

document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC"

Atur Jalur Cookie

Kamu juga dapat memberi tahu browser jalur tempat cookie berada (nilai default adalah jalur halaman saat ini):

document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user"

Tetapkan Domain Cookie

Dan bagian terakhir dari data yang akan kita bahas adalah dimana domain tempat cookie berada (default ke domain saat ini):

document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user; domain=mysite.com"

Membaca Cookie

Membaca cookie juga sangat sederhana menggunakan JavaScript dengan mengakses objek document.cookie:

Baca Semua Cookie Untuk Satu Halaman

Untuk mendapatkan semua cookie untuk satu halaman sebagai string dengan masing-masing dipisahkan oleh titik koma:

const cookies = document.cookie

Baca Cookie Dengan Nama Tertentu

Untuk mengakses cookie dengan nama tertentu, kita perlu mendapatkan semua cookie di halaman dan mengurai string untuk menemukan kecocokan dengan nama cookie yang kita cari.

Berikut adalah fungsi yang melakukan pekerjaan menggunakan regular expression:

function getCookieValue(name) {
  let result = document.cookie.match("(^|[^;]+)\s*" + name + "\s*=\s*([^;]+)")
  return result ? result.pop() : ""
}

Kemudian tulis seperti ini:

getCookieValue("userId") //returns nick123

Lengkap :

function getCookieValue(name) {
  let result = document.cookie.match("(^|[^;]+)\s*" + name + "\s*=\s*([^;]+)")
  return result ? result.pop() : ""
}

getCookieValue("userId") //returns nick123

Itu akan mengembalikan nilai string dari parameter nama yang Kamu ingin dapatkan.

Kamu juga dapat menggunakan cara yang lain seperti ini :

function getCookieValue(name) {
  const nameString = name + "="

  const value = document.cookie.split(";").filter(item => {
    return item.includes(nameString)
  })

  if (value.length) {
    return value[0].substring(nameString.length, value[0].length)
  } else {
    return ""
  }
}

Kemudian tuliskan seperti ini :

getCookieValue("userId") //returns nick123

Lengkap :

function getCookieValue(name) {
  const nameString = name + "="

  const value = document.cookie.split(";").filter(item => {
    return item.includes(nameString)
  })

  if (value.length) {
    return value[0].substring(nameString.length, value[0].length)
  } else {
    return ""
  }
}

getCookieValue("userId") //returns nick123

Perbarui Cookie

Kamu dapat mengubah cookie dengan cara yang sama seperti Kamu membuatnya dengan menimpanya dengan nilai baru.

Kamu dapat menggunakan kode ini untuk mengganti cookie userId yang  dibuat:

document.cookie = "userId=new_value"

getCookieValue("userId") //returns new_value

Dan nilai baru akan dikembalikan ketika Kamu menjalankan fungsi getCookieValue lagi:

Hapus Cookie

Kamu dapat menghapus cookie dengan memberinya nilai kosong dan mengatur tanggal kedaluwarsa nya kapan saja di masa lalu.

Jika kita ingin menghapus cookie userId dari contoh sebelumnya, inilah cara kita melakukannya:

document.cookie = "userId=; expires=Thu, 01 Jan 1970 00:00:00 UTC;"

Selesai.