Coba demo kecil singkat ini, karena ini menunjukkan kepada Anda betapa mudahnya menyimpan informasi dengan cookie di JavaScript. Kami telah melihat cara menggunakan cookie dan variabel sesi di PHP. Ada beberapa perbedaan besar antara cookie dan sesi,
- Cookie disimpan di browser Anda
- Sesi disimpan di server
- Cookie kedaluwarsa berdasarkan definisi halaman web yang membuatnya
- Sesi berakhir berdasarkan konfigurasi server web
Benda apa ini?
Cookie digunakan untuk menyimpan informasi di browser. Ini adalah data yang ingin diketahui oleh server web, tetapi tidak akan disimpan secara internal. Ada beberapa kasus penggunaan untuk ini. Kami dapat menyimpan informasi yang mencatat siapa Anda, seperti token autentikasi. Ini juga berguna untuk halaman yang menggunakan keranjang belanja, dan dalam kasus penggunaan yang sangat umum untuk melacak Anda di seluruh situs web (pihak ketiga) untuk mendukung iklan
Dalam JavaScript, cookie ditentukan dalam sebuah string, sedemikian rupa sehingga
- String mendefinisikan identifier=valuedocument.cookie = "username=Joe";
- Kami dapat memperbarui nilai cookie. document.cookie = "username=John";_
- Kami dapat menambahkan beberapa cookie dengan menetapkannya ke dokumen. Kue kering. document.cookie = "role=member";Hasil dari "penugasan" ini adalah dokumen itu. cookie memiliki konten. username=John; role=member
- Kami dapat menetapkan tanggal kedaluwarsa untuk cookie. document.cookie = "username=Joe; expires=Tue, 24 Nov 2020 15:20:00 UTC";_
- Opsi lain untuk cookie adalah jalurnya, yang memberi tahu untuk halaman apa cookie itu valid. Tanpa mengatur jalur secara eksplisit, cookie berlaku untuk halaman mana pun di folder skrip yang membuat cookie, dan subfolder apa pun. Jika Anda ingin agar cookie valid untuk seluruh situs web misalnya, Anda dapat menentukan jalur yang dimulai dengan "/" yang merupakan root dokumen server web. document.cookie = "username=Joe; expires=Tue, 26 Nov 2019 15:20:00 UTC; path=/~mXXXXXX/IT350";
- Untuk menghapus cookie, kita hanya perlu menyetel kedaluwarsa cookie ke beberapa waktu yang lalu. document.cookie = "username=Joe; expires=Wed, 01 Jan 1970 00:00:00 UTC; path=/~mXXXXXX/IT350";_
Untuk membuat hidup kita sedikit lebih mudah, kita bisa menggunakan fungsi yang mirip dengan yang ada di w3schools. Jangan lupa untuk "melarikan diri" dari nilai, yang akan mengganti karakter khusus apa pun (seperti ; atau spasi) dengan kode yang disandikan URL yang setara
// Create cookie with name specified by 'identifier' with value 'value' // If 'days' is set, sets to expire 'days' days from now. function createCookie(identifier,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = identifier+"="+escape(value)+expires; } } Mengakses Cookie di JavaScriptCookie dapat diakses dalam JavaScript melalui dokumen. properti cookie, yang akan mengembalikan semua cookie untuk halaman dalam string seperti
cookie1=value1; cookie2=value2; cookie3=value3Untuk mengakses cookie di JavaScript, kami perlu memisahkan dokumen. rangkaian kue. Kita dapat menggunakan fungsi berikut. // Return the 'value' of the cookie variable with name 'desiredId' // returns null if no match found. function readCookie(desiredId) { var cookies = document.cookie; // First split the pairs apart on '; ' var pairs = cookies.split("; "); // Now split each pair on '='. Check if have a match for (var i=0; i < pairs.length; i++) { var aPair = pairs[i]; var cookieTokens = aPair.split("="); var id = cookieTokens[0]; var value = cookieTokens[1]; if (id == desiredId) { // found desired variable -- return value return unescape(value); } } return null; // no match; } _Menghapus CookieUntuk menghapus cookie, kita perlu menyetelnya agar kedaluwarsa di masa lalu, karena kita sudah memiliki fungsi createCookie, kita dapat menggunakannya lagi hanya dengan tanggal di masa lalu.