Loker Stasiun: Belajar localStorage, sessionStorage, dan cookie dengan loker

Cara bermain Loker Stasiun

1. Baca instruksi dan jalan cerita level: kapan tab dibuka, dimuat ulang, ditutup, kapan waktu berlalu, dan kapan request dikirim ke server.
2. Tulis JavaScript di editor. localStorage, sessionStorage, document.cookie, location, dan tampil(...) tersedia. tampil menulis ke layar tab.
3. Arena memutar cerita sekali setiap kodemu berubah: tiga deret loker berubah isi per kejadian, dan jalan cerita menampilkan isi layar serta cookie yang sampai ke server.
4. Tekan Cek jawaban atau Ctrl + Enter. Jawaban dicek dari isi layar, cookie yang terkirim, dan isi semua loker di akhir cerita. Yang beda ditandai merah, yang belum ada ditandai garis putus-putus.
5. Kalau buntu, buka Petunjuk. Level yang sudah selesai tetap tercentang di browser yang sama.

Yang kamu pelajari

1. Level 1

   localStorage.setItem

   Menyimpan pasangan kunci dan nilai yang bertahan walau semua tab dan browser ditutup.

2. Level 2

   getItem mengembalikan null

   Kunci yang belum pernah disimpan dibaca sebagai null, bukan undefined atau teks kosong. Pakai ?? untuk nilai bawaan.

3. Level 3

   sessionStorage

   API yang sama dengan localStorage, tapi isinya dibuang saat tab ditutup. Memuat ulang tab tidak mengosongkannya.

4. Level 4

   Terpisah per tab

   Setiap tab punya sessionStorage sendiri walau membuka alamat yang sama, sedangkan localStorage dipakai bersama semua tab di origin itu.

5. Level 5

   Semua nilai jadi teks

   Storage hanya menyimpan string. Angka 10 kembali sebagai "10", jadi ubah dengan Number sebelum dihitung.

6. Level 6

   Jebakan "false"

   false tersimpan sebagai "false", teks yang tidak kosong, jadi dianggap benar oleh if. Bandingkan dengan === "true".

7. Level 7

   JSON.stringify dan JSON.parse

   Objek yang disimpan langsung jadi "[object Object]". Ubah ke teks JSON saat menyimpan, lalu hidupkan lagi saat membaca.

8. Level 8

   removeItem vs clear

   removeItem(kunci) membuang satu kunci, clear() mengosongkan seluruh storage origin itu.

9. Level 9

   document.cookie

   Menulis ke document.cookie menambah satu cookie. Cookie dikirim ke server di setiap request, isi storage tidak.

10. Level 10

    max-age dan expires

    Tanpa keduanya, cookie hidup sampai browser ditutup. max-age dalam detik, expires berupa tanggal.

11. Level 11

    path

    Bawaannya cookie hanya dikirim untuk folder halaman pembuatnya. path=/ membuatnya ikut ke semua alamat di situs itu.

12. Level 12

    Storage per origin

    stasiun.id dan tiket.stasiun.id adalah origin berbeda dengan storage terpisah. Cookie dengan domain=stasiun.id bisa dibagi ke subdomain.

Storage hanya menyimpan teks

Semua nilai yang masuk ke localStorage atau sessionStorage diubah dengan String(...). setItem("poin", 10) menyimpan "10", setItem("aktif", false) menyimpan "false", dan setItem("tiket", { kursi: 12 }) menyimpan "[object Object]", yang isinya sudah hilang.

Akibatnya terasa saat dibaca lagi. "10" + 10 menghasilkan "1010", dan if ("false") tetap jalan karena hanya teks kosong yang dianggap salah. Ubah teksnya kembali dengan Number(...), bandingkan dengan === "true", atau simpan dengan JSON.stringify lalu baca dengan JSON.parse.

Ingat juga bahwa getItem mengembalikan null untuk kunci yang belum ada. JSON.parse(null) menghasilkan null, jadi beri nilai bawaan dengan ?? sebelum memakai isinya.

Tanya jawab