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 chocoalte chip (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 dalam rahasia penghapusan cookie, mari kita pahami mengapa kita mungkin ingin melakukan ini pertama kali. Bayangkan Anda sedang membuat website untuk roti bakery (menyusun dengan tema cookie kami!). Anda mungkin menggunakan cookies untuk mengingat rencana favorit pengguna. Tetapi apa jika mereka ingin memulai dari awal atau membersihkan preferensinya? Itu adalah tempat penghapusan cookie berguna!

Ada beberapa cara untuk menghapus cookies dalam JavaScript, dan kita akan menjelajahi masing-masing. Pikirkan metode ini seperti resep-resep untuk makanan 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 maksimal cookie ke 0 atau nilai negatif
Penghapusan browser eksplisit	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, "Waktu mu sudah habis!" Berikut cara kita melakukannya:

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

// Penggunaan
deleteCookie('favoriteFlavorPreference');

Berpisah ini:

1. Kita buat fungsi deleteCookie yang menerima 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 panggil deleteCookie('favoriteFlavorPreference'), itu seperti mengatakan ke browser, "Preferensi chocoalte chip itu? Itu sudah sejarah kuno sekarang!"

Menghapus Cookies menggunakan Atribut 'max-age'

Cara lain untuk mengucapkan selamat tinggal kepada cookies digital kita adalah dengan menggunakan atribut max-age. Ini seperti menyetel timer untuk berapa lama cookie harus tetap ada. Jika kita set ke 0 atau nilai negatif, itu seperti mengatakan, "Waktu mu sudah habis!"

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

// Penggunaan
deleteCookieWithMaxAge('shoppingCartItems');

Ini apa yang terjadi:

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

Menggunakan metode ini adalah seperti mengatakan ke item keranjang belanja, "Terima kasih untuk pelayananmu, tapi saatnya mengosongkanmu!"

Menghapus Cookies Eksplisit dari Browser

kadang-kadang, Anda mungkin ingin memberikan pengguna lebih banyak kontrol 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>

Berpisah ini proses penghancuran cookie:

1. Kita tentukan fungsi deleteAllCookies.
2. Kita pisahkan document.cookie menjadi array cookies.
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, saat diklik, akan memicu fungsi ini.

Metode ini seperti memiliki tombol "Reset Preferensi" di website bakery Anda. Itu memungkinkan pengguna untuk memulai dari awal, mungkin untuk menjelajahi rasa baru yang belum mereka coba sebelumnya!

Ingat, meskipun penghapusan cookies bisa 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 mengenai penggunaan dan penghapusan cookies.

Dalam kesimpulan, menghapus 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 kepada pengguna, Anda sekarang memiliki alat untuk mengelola cookies secara efektif dalam aplikasi web Anda.

Jadi, kali berikutnya seseorang meminta Anda untuk "hapus cookies", Anda akan tahu mereka tidak membahas tentang menyembunyikan bukti snack tengah malam. Selamat coding, dan semoga cookies digital Anda selalu menyenangkan seperti yang edible!

Credits: Image by storyset