Latihan 1: Cookies & Sessions — Web Fundamentals

Latihan 1 dari materi Cookies & Sessions di Web Fundamentals — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Bikin dua function.

1. parseCookieString(cookieStr) menerima teks cookie berformat nama=nilai; nama=nilai dan mengembalikan object. Nilainya tetap teks: parseCookieString("a=1; b=2; c=3").c menghasilkan "3".

2. buildCookieString(name, value, options) menyusun teks Set-Cookie. Mulai dari name=value, lalu tambahkan atribut dari options dengan urutan ini, dipisah ; (titik koma dan satu spasi):

maxAge (angka) jadi Max-Age=<angka>
path (teks) jadi Path=<teks>
httpOnly: true jadi HttpOnly
secure: true jadi Secure

Option yang gak diisi gak ikut ditulis: buildCookieString("cart", "x9", { path: "/toko" }) menghasilkan "cart=x9; Path=/toko".

Baris console.log di bawah starter sudah memanggil keduanya, jangan diubah. Kalau benar, console menampilkan empat baris ini:

dark
id
true
session=abc123; Max-Age=3600; Path=/; HttpOnly; Secure

Hint

Dua tugas yang saling kebalikan. parseCookieString memecah teks jadi pasangan nama dan nilai. buildCookieString menyambung nama, nilai dan atribut jadi satu teks.
Buat memecah, pakai split("; ") lalu split("=") di tiap pasangan. Buat menyusun, kumpulkan bagiannya di array, push cuma atribut yang ada di options, lalu join("; "). HttpOnly dan Secure ditulis namanya saja.
Parse: const hasil = {}; cookieStr.split("; ").forEach((p) => { const [k, v] = p.split("="); hasil[k] = v; }); return hasil; Build: const bagian = [name + "=" + value]; if (options.maxAge !== undefined) bagian.push("Max-Age=" + options.maxAge); lalu Path, HttpOnly, Secure dengan cara yang sama; return bagian.join("; ");

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Cookies & Sessions — Web Fundamentals

Hint

Memperbarui Aplikasi