JavaScript - Menghapus Cookies

Hai teman-teman, para ahli JavaScript masa depan! Hari ini, kita akan mengemban perjalanan manis ke dalam dunia cookies. Tidak, bukan jenis cookies cokelat (walaupun saya harap!), tapi cookies digital yang membuat pengalaman web kita lebih mulus. Kita akan belajar bagaimana menghapus morsel data kecil ini menggunakan JavaScript. Jadi, ambil sendok virtualmu, dan mari kita mulai memasak!

Cara-cara Menghapus Cookies

Sebelum kita masuk ke detail tentang penghapusan cookie, mari kita pahami mengapa kita mungkin ingin melakukan ini pertama kali. Bayangkan Anda sedang membuat situs web untuk sebuah toko roti (menyusun dengan tema cookies kita!). Anda mungkin menggunakan cookies untuk mengingat rencana favorite pengguna. Tetapi, apa jika mereka ingin memulai dari awal atau menghapus preferensi mereka? Itu adalah saat penghapusan cookie berguna!

Ada beberapa cara untuk menghapus cookies dalam JavaScript, dan kita akan menjelajahi masing-masing. Pahami bahwa metode ini seperti resep-resep untuk masakan yang sama – mereka semua mencapai tujuan yang sama tetapi dengan bahan-bahan sedikit berbeda.

Metode	Deskripsi
Menggunakan atribut 'expires'	Mengatur tanggal kadaluarsa cookie ke tanggal yang sudah lewat
Menggunakan atribut 'max-age'	Mengatur umur maksimum cookie ke 0 atau nilai negatif
Penghapusan eksplisit browser	Menginstruksikan browser untuk menghapus cookie

Sekarang, mari kita roll up lengan dan masuk ke adonan... saya maksudkan, kode!

Menghapus Cookies menggunakan Atribut 'expires'

Salah satu cara untuk menghapus cookie adalah dengan mengatur tanggal kadaluarsa ke waktu yang sudah lewat. Itu seperti mengatakan ke cookie, "Waktumu sudah habis!" Berikut adalah cara kita melakukannya:

function deleteCookie(name) {
document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
}

// Penggunaan
deleteCookie('favoriteFlavorPreference');

Berkurangnya:

1. Kita membuat fungsi deleteCookie yang mengambil nama cookie yang ingin kita hapus.
2. Dalam fungsi ini, kita set nilai cookie ke string kosong.
3. Kita set atribut expires ke tanggal yang sudah lewat (1 Januari 1970, yang adalah epoch Unix).
4. path=/ memastikan kita menargetkan cookie yang benar di seluruh situs.

Ketika Anda memanggil deleteCookie('favoriteFlavorPreference'), itu seperti mengatakan ke browser, "Preferensi cokelat itu? Itu sudah sejarah kuno sekarang!"

Menghapus Cookies menggunakan Atribut 'max-age'

Cara lain untuk katakan selamat tinggal kepada cookies digital kita adalah dengan menggunakan atribut max-age. Itu seperti menyetel timer untuk berapa lama cookie harus bertahan. Jika kita set ke 0 atau nilai negatif, itu seperti mengatakan, "Waktu mu selesai!"

function deleteCookieWithMaxAge(name) {
document.cookie = name + '=; max-age=0; path=/;';
}

// Penggunaan
deleteCookieWithMaxAge('shoppingCartItems');

Berikut apa yang terjadi:

1. Kita membuat fungsi deleteCookieWithMaxAge yang mengambil nama cookie.
2. Kita set nilai cookie ke string kosong.
3. Kita set max-age=0, yang mengatakan ke browser untuk segera mengakhiri cookie.
4. Lagi, path=/ memastikan kita menargetkan cookie yang benar.

Menggunakan metode ini adalah seperti mengatakan kepada item keranjang belanja Anda, "Terima kasih atas pelayananmu, tapi saatnya menghapusmu!"

Menghapus Cookies Eksplisit dari Browser

kadang-kadang, Anda mungkin ingin memberikan pengguna kontrol lebih banyak atas preferensi cookie mereka. Dalam kasus ini, Anda dapat menyediakan tombol atau antarmuka yang memungkinkan mereka menghapus cookies secara eksplisit. Berikut adalah contoh bagaimana Anda mungkin implementasikan ini:

function deleteAllCookies() {
const cookies = document.cookie.split(";");

for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i];
const eqPos = cookie.indexOf("=");
const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;";
}
}

// Penggunaan
<button onclick="deleteAllCookies()">Bersihkan Semua Cookies</button>

Berkurangnya proses penghancuran cookie ini:

1. Kita definisikan fungsi deleteAllCookies.
2. Kita pecah string document.cookie menjadi array cookies individual.
3. Kita loop melalui setiap cookie:

• Ekstrak nama cookie.
• Set tanggal kadaluarsa setiap cookie ke masa lalu (January 1, 1970).

4. Kita menyediakan tombol yang, ketika diklik, akan memicu fungsi ini.

Metode ini adalah seperti memiliki tombol "Reset Preferensi" di situs web toko roti Anda. Itu memungkinkan pengguna untuk memulai dari awal, mungkin untuk mengexplore rasa yang belum mereka coba sebelumnya!

Ingat, meskipun penghapusan cookies dapat berguna, penting untuk menghormati privasi pengguna dan menyediakan informasi jelas tentang cookies apa yang Anda gunakan dan mengapa. Selalu ikuti praktek terbaik dan persyaratan hukum tentang penggunaan dan penghapusan cookies.

Dalam kesimpulan, penghapusan cookies dalam JavaScript adalah seperti membersihkan setelah sesi memasak. Itu menjaga hal-hal rapi dan memungkinkan permulaan baru. Apakah Anda menggunakan atribut expires, max-age, atau memberikan kontrol langsung ke pengguna, Anda sekarang memiliki alat untuk mengelola cookies secara efektif dalam aplikasi web Anda.

Jadi, kali ini jika seseorang meminta Anda untuk "hapus cookies", Anda akan tahu mereka tidak membahas tentang menyembunyikan bukti snack tengah malam. Semoga coding Anda selalu menyenangkan, dan cookies digital Anda selalu menyenangkan seperti cookies makanan!

Credits: Image by storyset