Cara membuat Cookies menggunakan Vanilla Javascript

Di tutorial kali ini, kita bakal belajar cara SET, GET, dan DELETE Cookies pakai Vanilla JavaScript. Kita akan bikin method-method khusus buat semua operasi ini supaya bisa dipake lagi di berbagai tempat. Dijamin ini bakal banget bantu kamu dalam mengerjakan project-project JavaScript ke depannya.

Cookie Javascript | Han Haoyu Platform

Apa Itu Cookie dan Kenapa Penting?

Sebelum kita mulai coding, ada baiknya kita pahami dulu apa sih sebenarnya cookie itu. Cookie adalah data kecil yang disimpan di browser user, biasanya dipake buat nyimpen informasi kayak preferensi user, status login, atau data sementara lainnya. Cookie ini sangat berguna buat bikin website yang lebih personal dan interaktif.

Dengan menguasai cara kerja cookie, kamu bisa bikin fitur-fitur keren kayak "Remember Me" di form login, menyimpan preferensi tema gelap/terang, tracking shopping cart, atau bahkan nyimpen data sementara buat form multi-step. Pokoknya banyak banget deh kegunaannya.

Persiapan Awal

Ikuti langkah-langkah berikut buat menggunakan kode-kode ini di dokumen HTML kamu. Prosesnya gampang kok, nggak perlu ribet.

Daftar Isi

Kode Dasar Cookie.js

Tambahin kode JavaScript berikut di dalam tag <script> pada bagian head dokumen HTML kamu. Ini adalah script utama yang bakal nge-handle semua operasi cookie.

/*!
 * cookie.js by Han Haoyu Platform
 * ----------------------------
 *
 * MIT License
 *
 * Copyright (c) 2021 Han Haoyu Platform
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
window.cookie =
  window.cookie ||
  Object.defineProperties(
    {},
    {
      value: {
        get() {
          return document.cookie;
        },
        set(value) {
          document.cookie = value;
        },
      },
      get: {
        value(key) {
          const regex = new RegExp(
            `(?:^|; )${encodeURIComponent(key).replace(
              /[-\/\\^$*+?.()|[\]{}]/g,
              "\\$&"
            )}=([^;]*)`
          );
          const matches = this.value.match(regex);
          if (matches && typeof matches[1] === "string") {
            return decodeURIComponent(matches[1]);
          }
          return null;
        },
      },
      getAll: {
        value() {
          const cookies = {};
          const cookieArray = this.value.split("; ");
          for (let i = 0; i < cookieArray.length; i++) {
            const cookieParts = cookieArray[i].split("=");
            if (typeof cookieParts[0] === "string") {
              const cookieName = decodeURIComponent(cookieParts[0]);
              const cookieValue = cookieParts[1]
                ? decodeURIComponent(cookieParts[1])
                : "";
              cookies[cookieName] = cookieValue;
            }
          }
          return cookies;
        },
      },
      has: {
        value(key) {
          return this.get(key) !== null;
        },
      },
      set: {
        value(key, value, options) {
          const object = Object.assign({ path: "/" }, options);

          let cookieString = `${encodeURIComponent(key)}=${
            typeof value !== "undefined" ? encodeURIComponent(value) : ""
          }`;

          for (let flagKey in object) {
            let flagValue = object[flagKey];
            switch (flagKey) {
              case "expires":
                if (flagValue instanceof Date) {
                  flagValue = flagValue.toUTCString();
                }
                break;
              case "maxAge":
                flagKey = "max-age";
                break;
              case "sameSite":
              case "samesite":
                flagKey = "samesite";
                if (flagValue === "none") {
                  flagValue = true;
                }
                break;
            }
            cookieString += `; ${flagKey}`;
            const shouldAddValue =
              typeof flagValue === "boolean"
                ? flagValue !== true
                : typeof flagValue !== "undefined";
            if (shouldAddValue) {
              cookieString += `=${flagValue}`;
            }
          }

          this.value = cookieString;
          return cookieString;
        },
      },
      remove: {
        value(key) {
          this.set(key, "", {
            maxAge: -1,
          });
        },
      },
      clear: {
        value() {
          for (const key in this.getAll()) {
            this.remove(key);
          }
        },
      },
      keys: {
        get() {
          return Object.keys(this.getAll());
        },
      },
      size: {
        get() {
          return this.keys.length;
        },
      },
    }
  );

Daftar Fungsi yang Tersedia

Script cookie.js ini dilengkapi dengan berbagai method yang powerful dan mudah dipake. Berikut adalah daftar lengkap fungsi-fungsi yang bisa kamu manfaatkan:

cookie

.get(key) ⇒ string | null

.getAll() ⇒ Record<string, string>

.has(key) ⇒ boolean

.set(key, value, [config]) ⇒ string

.remove(key) ⇒ void

.clear(key) ⇒ void

Sekarang mari kita bahas satu per satu fungsi-fungsi tersebut dengan lebih detail supaya kamu bisa langsung praktek.

Cara Menyimpan Cookie

Method cookie.set(key, value, [config]) ⇒ string

Method ini digunakan buat nyimpen cookie dengan key dan value yang kamu inginkan. Kamu juga bisa menambahkan konfigurasi tambahan kayak waktu expire, secure flag, dan lain-lain.

Parameter yang Dibutuhkan

Parameter	Tipe Data	Default	Keterangan
key	string		Nama key dari cookie yang mau disimpan
value	string		Value atau nilai dari cookie key tersebut
[config]	object	{ path: "/" }	Konfigurasi tambahan seperti "max-age" (number), secure (boolean), dan lainnya

Return Value

Fungsi ini akan mengembalikan nilai bertipe string yang berisi cookie string yang berhasil dibuat.

Contoh Penggunaan

Misalnya kamu pengen nyimpen data user yang berisi nama dan email. Kamu bisa lakuin seperti ini:

const userDetails = {
  name: "Han Haoyu",
  email: "admin@hanhaoyu.com"
};
cookie.set("user", JSON.stringify(userDetails), {
  secure: true,
  maxAge: 3600 // akan expire setelah 1 jam
});

Di contoh di atas, kita nyimpen object userDetails dalam bentuk JSON string. Parameter secure: true memastikan cookie hanya dikirim lewat koneksi HTTPS yang aman, sedangkan maxAge: 3600 berarti cookie ini bakal expire setelah 3600 detik atau 1 jam.

Cara Mengambil Cookie

Method cookie.get(key) ⇒ string | null

Method ini digunakan buat ngambil value dari cookie berdasarkan key-nya. Sangat berguna waktu kamu butuh baca data yang udah disimpan sebelumnya.

Parameter yang Dibutuhkan

Parameter	Tipe Data	Default	Keterangan
key	string		Nama key dari cookie yang mau diambil

Return Value

string | null: Fungsi ini akan mengembalikan value dari cookie key kalau ada, atau null kalau cookie dengan key tersebut nggak ditemukan.

Contoh Penggunaan

Begini cara ngambil data user yang udah kita simpan tadi:

const cookieValue = cookie.get("user");
const userObj = cookieValue ? JSON.parse(cookieValue) : null;
console.log(userObj);
// Output: { name: "Han Haoyu", email: "admin@hanhaoyu.com" }

Kode di atas pertama ngambil value dari cookie "user", terus kalau ada, kita parse dari JSON string jadi object JavaScript. Kalau nggak ada, kita set jadi null. Simple banget kan?

Cara Mengambil Semua Cookie

Method cookie.getAll() ⇒ Record<string, string>

Kalau kamu butuh ngambil semua cookie yang tersimpan sekaligus, method ini adalah jawabannya. Fungsi ini akan mengembalikan object yang berisi semua key-value pairs dari cookie yang ada.

Return Value

Record<string, string>: Sebuah object yang berisi semua pasangan key-value dari cookie yang tersimpan.

Contoh Penggunaan

Gampang banget cara makenya:

const allCookies = cookie.getAll(); 
console.log(allCookies);
// Output: { user: '{"name":"Han Haoyu","email":"admin@hanhaoyu.com"}', theme: 'dark', language: 'id' }

Dengan method ini, kamu bisa liat semua cookie yang ada dalam satu pemanggilan fungsi. Praktis kalau kamu butuh audit atau debug cookie di aplikasi kamu.

Cara Cek Keberadaan Cookie

Method cookie.has(key) ⇒ boolean

Method ini berguna buat ngecek apakah cookie dengan key tertentu itu ada atau nggak. Ini sering dipake sebelum kamu ngambil atau nge-set cookie buat menghindari error.

Parameter yang Dibutuhkan

Parameter	Tipe Data	Default	Keterangan
key	string		Nama key dari cookie yang mau dicek

Return Value

boolean: Mengembalikan true kalau cookie ada, atau false kalau nggak ada.

Contoh Penggunaan

if (cookie.has("user")) {
  console.log("User cookie ditemukan!");
  const userData = JSON.parse(cookie.get("user"));
  console.log("Welcome back, " + userData.name);
} else {
  console.log("User cookie nggak ada, silakan login.");
}

Dengan cara ini, kamu bisa bikin logic yang lebih robust dan menghindari error waktu mencoba akses cookie yang mungkin nggak ada.

Cara Menghapus Cookie

Method cookie.remove(key) ⇒ void

Method ini digunakan buat menghapus cookie berdasarkan key-nya. Ini penting banget waktu user logout atau waktu kamu butuh clear data tertentu.

Parameter yang Dibutuhkan

Parameter	Tipe Data	Default	Keterangan
key	string		Nama key dari cookie yang mau dihapus

Return Value

undefined: Method ini nggak mengembalikan nilai apapun.

Contoh Penggunaan

Misalnya waktu user logout, kamu bisa hapus cookie user seperti ini:

// Hapus cookie user
cookie.remove("user");
console.log("Cookie user berhasil dihapus!");

Simpel dan straightforward. Cookie dengan key "user" langsung terhapus dari browser.

Cara Menghapus Semua Cookie

Method cookie.clear() ⇒ void

Kalau kamu butuh menghapus semua cookie sekaligus, method ini adalah solusinya. Biasanya ini dipake waktu user logout atau reset aplikasi.

Return Value

undefined: Method ini nggak mengembalikan nilai apapun, tapi semua cookie akan terhapus.

Contoh Penggunaan

// Hapus semua cookie
cookie.clear();
console.log("Semua cookie berhasil dihapus!");

Hati-hati waktu pake method ini karena semua cookie akan hilang, termasuk cookie dari fitur-fitur penting lainnya.

Method Tambahan yang Berguna

Properti cookie.keys

Properti ini mengembalikan array yang berisi semua key dari cookie yang tersimpan. Berguna buat iterasi atau debugging.

const cookieKeys = cookie.keys;
console.log(cookieKeys);
// Output: ["user", "theme", "language"]

Properti cookie.size

Properti ini mengembalikan jumlah total cookie yang tersimpan. Berguna buat monitoring atau validasi.

const totalCookies = cookie.size;
console.log(`Total cookie yang tersimpan: ${totalCookies}`);
// Output: Total cookie yang tersimpan: 3

Tips dan Best Practices

Supaya penggunaan cookie kamu makin optimal, ada beberapa tips yang bisa kamu terapkan:

Pertama, selalu set waktu expire yang reasonable. Jangan bikin cookie yang nggak pernah expire kalau nggak perlu, karena ini bisa bikin masalah privacy dan storage.

Kedua, gunakan flag secure: true kalau website kamu pake HTTPS. Ini memastikan cookie cuma dikirim lewat koneksi yang aman.

Ketiga, jangan simpen data sensitif kayak password di cookie. Kalau emang harus nyimpen data penting, pastikan udah di-encrypt dengan baik.

Keempat, selalu validasi data yang kamu ambil dari cookie. User bisa aja modifikasi cookie lewat browser console, jadi jangan percaya mentah-mentah.

Kelima, gunakan SameSite attribute buat mencegah CSRF attacks. Ini penting banget buat keamanan aplikasi kamu.

Contoh Implementasi Real World

Mari kita lihat contoh implementasi yang lebih kompleks. Misalnya kamu mau bikin fitur "Remember Me" di halaman login:

// Fungsi buat login dengan remember me
function loginUser(username, password, rememberMe) {
  // Proses authentication (diasumsikan berhasil)
  const userData = {
    username: username,
    loginTime: new Date().toISOString()
  };
  
  if (rememberMe) {
    // Simpan cookie selama 30 hari
    cookie.set("userData", JSON.stringify(userData), {
      maxAge: 30 * 24 * 60 * 60, // 30 hari dalam detik
      secure: true,
      sameSite: "strict"
    });
  } else {
    // Simpan cookie cuma buat session saat ini
    cookie.set("userData", JSON.stringify(userData), {
      secure: true,
      sameSite: "strict"
    });
  }
}

// Fungsi buat cek apakah user udah login
function checkLogin() {
  if (cookie.has("userData")) {
    const userData = JSON.parse(cookie.get("userData"));
    console.log(`Welcome back, ${userData.username}!`);
    return true;
  }
  return false;
}

// Fungsi buat logout
function logoutUser() {
  cookie.remove("userData");
  console.log("Logout berhasil!");
}

Dengan implementasi kayak gini, user experience jadi lebih baik karena mereka nggak perlu login berulang kali kalau pilih opsi "Remember Me".

Troubleshooting Umum

Kadang kamu mungkin ngalamin masalah waktu kerja dengan cookie. Berikut beberapa masalah umum dan solusinya:

Kalau cookie nggak tersimpan, cek apakah browser mengizinkan cookie. Beberapa browser atau extension bisa block cookie secara default.

Kalau cookie hilang setelah refresh, kemungkinan kamu lupa set path atau expire time. Pastikan parameter config udah bener.

Kalau cookie nggak bisa dibaca, cek apakah nama key-nya sama persis. Cookie names itu case-sensitive.

Kalau muncul error waktu parse JSON, pastikan data yang kamu simpan bener-bener valid JSON string.

Kesimpulan

Nah, sekarang kamu udah tau cara lengkap buat handle cookie pakai Vanilla JavaScript. Dari mulai set, get, sampai delete cookie, semuanya udah kita bahas tuntas. Library cookie.js ini memudahkan kamu buat manage cookie dengan syntax yang clean dan mudah dipahami.

Dengan menguasai cookie management, kamu bisa bikin fitur-fitur keren di website kamu kayak sistem login, preferensi user, shopping cart, dan masih banyak lagi. Inget ya, selalu perhatikan aspek keamanan dan privacy waktu kerja dengan cookie.

Masih ada method-method lain yang bisa kamu explore sendiri. Jangan ragu buat eksperimen dan sesuaikan dengan kebutuhan project kamu. Selamat coding dan semoga tutorial ini bermanfaat!

Artikel Terkait

Copyright (c):
hanhaoyu.com