Cookie adalah file teks kecil yang memungkinkan Anda menyimpan sejumlah kecil data (hampir 4KB) di komputer pengguna. Mereka biasanya digunakan untuk melacak informasi seperti preferensi pengguna yang dapat diambil situs untuk mempersonalisasi halaman saat pengguna mengunjungi situs web di lain waktu.
Cookie adalah mekanisme penyimpanan sisi klien lama yang awalnya dirancang untuk digunakan oleh bahasa skrip sisi server seperti PHP, ASP, dll. Namun, cookie juga dapat dibuat, diakses, dan dimodifikasi secara langsung menggunakan JavaScript, tetapi prosesnya sedikit rumit dan berantakan
Tip. Cookie dapat berukuran hingga 4 KB, termasuk nama dan nilainya, cookie yang melebihi panjang ini akan dipangkas agar pas. Selain itu, setiap kali browser meminta halaman ke server, semua data dalam cookie secara otomatis dikirim ke server dalam permintaan tersebut.
Peringatan. Jangan menyimpan data sensitif seperti kata sandi atau informasi kartu kredit di cookie karena berpotensi dimanipulasi oleh pengguna jahat
Membuat Cookie di JavaScript
Di JavaScript, Anda dapat membuat, membaca, dan menghapus cookie dengan properti document.cookie. Properti ini mewakili semua cookie yang terkait dengan dokumen
Untuk membuat atau menyimpan cookie baru, tetapkan string name=value ke properti ini, seperti ini
dokumen. cookie = "namapertama=Christopher";
Nilai cookie tidak boleh berisi titik koma, koma, atau spasi. Untuk alasan ini, Anda perlu menggunakan fungsi bawaan JavaScript encodeURIComponent() untuk menyandikan nilai yang berisi karakter ini sebelum menyimpannya di cookie. Demikian pula, Anda harus menggunakan fungsi decodeURIComponent() yang sesuai saat Anda membaca nilai cookie
dokumen. cookie = "nama=" + encodeURIComponent("Christopher Columbus");
Secara default, masa pakai cookie adalah sesi browser saat ini, yang berarti cookie tersebut hilang saat pengguna keluar dari browser. Agar cookie bertahan di luar sesi browser saat ini, Anda harus menentukan masa pakainya (dalam detik) dengan atribut max-age. Atribut ini menentukan berapa lama cookie dapat tetap berada di sistem pengguna sebelum dihapus, mis. g. , cookie berikut akan aktif selama 30 hari
dokumen. cookie = "firstName=Christopher; max-age=" + 30*24*60*60;
Anda juga dapat menentukan masa pakai cookie dengan atribut function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; }0. Atribut ini menggunakan tanggal pasti (dalam format GMT/UTC) saat cookie harus kedaluwarsa, bukan offset dalam hitungan detik
dokumen. cookie = "firstName=Christopher; kedaluwarsa=Kam, 31 Des 2099 23. 59. 59 GMT";
Inilah fungsi yang menyetel cookie dengan atribut max-age opsional. Anda juga dapat menggunakan fungsi yang sama untuk menghapus cookie dengan meneruskan nilai function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; }2 untuk parameter function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; }3
function setCookie(name, value, daysToLive) { // Encode value in order to escape semicolons, commas, and whitespace var cookie = name + "=" + encodeURIComponent(value); if(typeof daysToLive === "number") { /* Sets the max-age attribute so that the cookie expires after the specified number of days */ cookie += "; max-age=" + (daysToLive*24*60*60); document.cookie = cookie; } }
Secara default, cookie tersedia untuk semua halaman web di direktori yang sama atau subdirektori apa pun dari direktori itu. Namun, jika Anda menetapkan function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; }4, cookie tersedia untuk semua halaman web di jalur yang ditentukan dan untuk semua halaman web di semua subdirektori di jalur tersebut. Misalnya, jika jalur disetel ke function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; }5, cookie tersedia di seluruh situs web, terlepas dari halaman mana yang membuat cookie
dokumen. cookie = "firstName=Christopher; path=/";
Selanjutnya, Anda dapat menggunakan atribut function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; }_6 jika Anda ingin cookie tersedia di seluruh subdomain. Secara default, cookie hanya tersedia untuk halaman di domain tempat mereka disetel
Jika cookie yang dibuat oleh halaman di function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; }7 menetapkan atribut function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; }4 ke function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; }5 dan atribut function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; }6 ke function checkCookie() { // Get cookie using our custom function var firstName = getCookie("firstName"); if(firstName != "") { alert("Welcome again, " + firstName); } else { firstName = prompt("Please enter your first name:"); if(firstName != "" && firstName != null) { // Set cookie using our custom function setCookie("firstName", firstName, 30); } } }1, cookie tersebut juga tersedia untuk semua halaman web di function checkCookie() { // Get cookie using our custom function var firstName = getCookie("firstName"); if(firstName != "") { alert("Welcome again, " + firstName); } else { firstName = prompt("Please enter your first name:"); if(firstName != "" && firstName != null) { // Set cookie using our custom function setCookie("firstName", firstName, 30); } } }2, function checkCookie() { // Get cookie using our custom function var firstName = getCookie("firstName"); if(firstName != "") { alert("Welcome again, " + firstName); } else { firstName = prompt("Please enter your first name:"); if(firstName != "" && firstName != null) { // Set cookie using our custom function setCookie("firstName", firstName, 30); } } }3. Namun, Anda tidak dapat membagikan cookie di luar domain
dokumen. cookie = "firstName=Christopher; path=/; domain=contoh. com";
Ada juga atribut boolean bernama function checkCookie() { // Get cookie using our custom function var firstName = getCookie("firstName"); if(firstName != "") { alert("Welcome again, " + firstName); } else { firstName = prompt("Please enter your first name:"); if(firstName != "" && firstName != null) { // Set cookie using our custom function setCookie("firstName", firstName, 30); } } }4. Jika atribut ini ditentukan, cookie hanya akan dikirim melalui jaringan aman (mis. e. dienkripsi) koneksi seperti HTTPS
dokumen. cookie = "firstName=Christopher; path=/; domain=contoh. com;
Membaca Cookie
Membaca cookie sedikit lebih rumit karena properti document.cookie hanya mengembalikan string yang berisi titik koma dan daftar semua cookie yang dipisahkan spasi (i. e. name=value pasangan, misalnya, function checkCookie() { // Get cookie using our custom function var firstName = getCookie("firstName"); if(firstName != "") { alert("Welcome again, " + firstName); } else { firstName = prompt("Please enter your first name:"); if(firstName != "" && firstName != null) { // Set cookie using our custom function setCookie("firstName", firstName, 30); } } }7). String ini tidak mengandung atribut seperti function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; }0, function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; }4, function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; }6, dll. yang mungkin telah disetel untuk cookie
Untuk mendapatkan cookie individu dari daftar ini, Anda perlu menggunakan metode // Creating a cookie document.cookie = "firstName=Christopher; path=/; max-age=" + 30*24*60*60; // Updating the cookie document.cookie = "firstName=Alexander; path=/; max-age=" + 365*24*60*60;1 untuk memecahnya menjadi pasangan name=value individu, dan mencari nama tertentu, seperti yang ditunjukkan di bawah ini
function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; }
Sekarang kita akan membuat satu lagi fungsi // Creating a cookie document.cookie = "firstName=Christopher; path=/; max-age=" + 30*24*60*60; // Updating the cookie document.cookie = "firstName=Alexander; path=/; max-age=" + 365*24*60*60;3 yang akan memeriksa apakah // Creating a cookie document.cookie = "firstName=Christopher; path=/; max-age=" + 30*24*60*60; // Updating the cookie document.cookie = "firstName=Alexander; path=/; max-age=" + 365*24*60*60;4 cookie disetel atau tidak dengan memanfaatkan fungsi // Creating a cookie document.cookie = "firstName=Christopher; path=/; max-age=" + 30*24*60*60; // Updating the cookie document.cookie = "firstName=Alexander; path=/; max-age=" + 365*24*60*60;5 di atas, dan jika disetel maka fungsi ini akan menampilkan pesan salam, dan jika tidak maka ini
function checkCookie() { // Get cookie using our custom function var firstName = getCookie("firstName"); if(firstName != "") { alert("Welcome again, " + firstName); } else { firstName = prompt("Please enter your first name:"); if(firstName != "" && firstName != null) { // Set cookie using our custom function setCookie("firstName", firstName, 30); } } }
Memperbarui Cookie
Satu-satunya cara untuk memperbarui atau memodifikasi cookie adalah dengan membuat cookie lain dengan // Creating a cookie document.cookie = "firstName=Christopher; path=/; max-age=" + 30*24*60*60; // Updating the cookie document.cookie = "firstName=Alexander; path=/; max-age=" + 365*24*60*60;7 dan function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; }4 yang sama seperti yang sudah ada. Membuat cookie dengan nama yang sama tetapi dengan jalur yang berbeda dari yang sudah ada akan menambahkan cookie tambahan. Ini sebuah contoh
// Creating a cookie document.cookie = "firstName=Christopher; path=/; max-age=" + 30*24*60*60; // Updating the cookie document.cookie = "firstName=Alexander; path=/; max-age=" + 365*24*60*60;
Menghapus Cookie
Untuk menghapus cookie, atur sekali lagi menggunakan // Creating a cookie document.cookie = "firstName=Christopher; path=/; max-age=" + 30*24*60*60; // Updating the cookie document.cookie = "firstName=Alexander; path=/; max-age=" + 365*24*60*60;7 yang sama, tentukan nilai kosong atau arbitrer, dan atur atribut max-age ke 0. Ingatlah bahwa jika Anda telah menetapkan atribut function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; }_4, dan function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; }6 untuk cookie, Anda juga harus menyertakannya saat menghapusnya
// Deleting a cookie document.cookie = "firstName=; max-age=0"; // Specifying path and domain while deleting cookie document.cookie = "firstName=; path=/; domain=example.com; max-age=0";
Namun, untuk menghapus cookie menggunakan atribut function getCookie(name) { // Split cookie string and get all individual name=value pairs in an array var cookieArr = document.cookie.split(";"); // Loop through the array elements for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if(name == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if not found return null; }0, cukup tetapkan nilainya (mis. e. tanggal kedaluwarsa) ke tanggal yang telah berlalu, seperti yang ditunjukkan di bawah ini