kue masuk JavaScript: Contoh Set, Get & Delete

Apa Cookies?

Cookie adalah sepotong data yang disimpan di komputer Anda untuk diakses oleh browser Anda. Anda mungkin juga telah menikmati manfaat cookie secara sadar atau tidak sadar. Pernahkah Anda tetap masuk ke situs seperti Facebook sehingga Anda tidak perlu mengetik detail Anda setiap kali mencoba masuk? Jika ya, maka Anda menggunakan cookie. Cookie disimpan sebagai pasangan kunci/nilai.

Klarifikasi penting: cookie tidak menyimpan kata sandi Anda. Cookie menyimpan pengidentifikasi sesi, yaitu token acak yang dikeluarkan server setelah login berhasil. Server mencocokkan token tersebut dengan akun Anda, sehingga kata sandi itu sendiri tidak pernah meninggalkan server.

Mengapa Anda membutuhkan Kue?

Komunikasi antara a web browser Server menggunakan protokol tanpa status bernama HTTP. Protokol tanpa status memperlakukan setiap permintaan secara independen. Jadi, server tidak menyimpan data setelah mengirimkannya ke browser. Namun dalam banyak situasi, data tersebut akan dibutuhkan lagi. Di sinilah cookie berperan. Dengan cookie, browser web tidak perlu berkomunikasi dengan server setiap kali data dibutuhkan. Sebaliknya, data dapat diambil langsung dari komputer.

Penggunaan umum meliputi mengingat sesi yang sedang login, menyimpan preferensi bahasa atau tema, dan lain sebagainya.ping barang-barang di tokoping keranjang di antara halaman, dan menghitung pengunjung yang baru pertama kali datang dibandingkan dengan pengunjung yang kembali.

Javascript Setel Kue

Anda dapat membuat cookie menggunakan properti document.cookie seperti ini.

document.cookie = "cookiename=cookievalue"

Anda bahkan dapat menambahkan tanggal kedaluwarsa ke cookie Anda sehingga cookie tertentu akan dihapus dari komputer pada tanggal yang ditentukan. Tanggal kedaluwarsa harus diatur dalam format UTC/GMT. Jika Anda tidak mengatur tanggal kedaluwarsa, cookie akan dihapus saat pengguna menutup browser.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC"

Anda juga dapat mengatur domain dan jalur untuk menentukan domain mana dan direktori mana dalam domain tertentu tempat cookie tersebut berada. Secara default, cookie berada di halaman yang mengatur cookie tersebut.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC; path=/ "

// Buat cookie dengan domain halaman saat ini dan path yang mencakup seluruh domain.

JavaSkrip Dapatkan Cookie

Anda dapat mengakses cookie seperti ini, yang akan menampilkan semua cookie yang tersimpan untuk domain saat ini.

var x =  document.cookie

Nilai yang dikembalikan adalah string tunggal dalam bentuk name1=value1; name2=value2Tidak ada metode bawaan untuk membaca satu cookie berdasarkan nama, jadi string tersebut harus dipisahkan. Fungsi pembantu di bawah ini mengembalikan satu nilai dan string kosong jika nama tidak ada.

function getCookie(name) {
    const pairs = document.cookie.split(";");
    for (let i = 0; i < pairs.length; i++) {
        const pair = pairs[i].trim();
        if (pair.indexOf(name + "=") === 0) {
            // decode in case the value contained spaces or symbols
            return decodeURIComponent(pair.substring(name.length + 1));
        }
    }
    return "";
}

document.cookie = "username=Ann Smith; path=/";
console.log(getCookie("username"));
console.log(getCookie("missing") === "");

Keluaran:

Ann Smith
true

JavaSkrip Hapus Cookie

Untuk menghapus cookie, Anda hanya perlu mengatur nilai cookie menjadi kosong dan mengatur nilai expires ke tanggal yang sudah berlalu.

document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"

Satu detail kecil menyebabkan sebagian besar penghapusan gagal. Browser mengidentifikasi cookie berdasarkan namanya bersama dengan jalur dan domainnya, sehingga pernyataan penghapusan harus mengulang jalur dan domain yang sama yang digunakan saat cookie dibuat.

// created with an explicit path
document.cookie = "theme=dark; path=/; max-age=2592000";

// deletion must repeat that same path
document.cookie = "theme=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";

// max-age=0 achieves the same result in one shorter line
document.cookie = "theme=; path=/; max-age=0";

Penjelasan Atribut Cookie

Setiap atribut setelah titik koma pertama mengubah berapa lama cookie berlaku, permintaan mana yang membawanya, dan kode mana yang dapat membacanya. Referensi di bawah ini mencakup semuanya.

SameSite layak mendapat perhatian khusus karena browser sekarang menerapkan nilai default. Ketiga nilai yang diterima tersebut berperilaku sebagai berikut.

• Ketat: Cookie tidak pernah dikirim ketika permintaan berasal dari situs lain, yang merupakan pengaturan teraman untuk sesi perbankan.
• Longgar: Cookie tersebut ikut berpindah bersama navigasi tingkat atas seperti mengklik tautan, tetapi tidak dengan gambar atau frame lintas situs. Ini adalah pengaturan default browser modern.
• Tidak ada: Cookie dikirim pada setiap permintaan lintas situs dan harus dipasangkan dengan atribut Secure, jika tidak, browser akan menolaknya.

// a well configured cookie set from client side script
document.cookie = "language=en; path=/; max-age=31536000; SameSite=Lax; Secure";

Coba sendiri Contoh ini

Skrip di bawah ini menggabungkan ketiga operasi tersebut. Skrip ini membuat cookie dengan masa berlaku yang diukur dalam hari, membacanya kembali berdasarkan nama, dan menyapa pengunjung yang kembali. Instruksi khusus agar kode berfungsi… Tekan tombol jalankan dua kali.

<html>
<head>
	<title>Cookie!!!</title>
	<script type="text/javascript">
		function createCookie(cookieName,cookieValue,daysToExpire)
        {
          var date = new Date();
          date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
          document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
        }
		function accessCookie(cookieName)
        {
          var name = cookieName + "=";
          var allCookieArray = document.cookie.split(';');
          for(var i=0; i<allCookieArray.length; i++)
          {
            var temp = allCookieArray[i].trim();
            if (temp.indexOf(name)==0)
            return temp.substring(name.length,temp.length);
       	  }
        	return "";
        }
		function checkCookie()
        {
          var user = accessCookie("testCookie");
          if (user!="")
        	alert("Welcome Back " + user + "!!!");
          else
          {
            user = prompt("Please enter your name");
            num = prompt("How many days you want to store your name on your computer?");
            if (user!="" && user!=null)
            {
            createCookie("testCookie", user, num);
            }
          }
        }
	</script>
</head>
<body onload="checkCookie()"></body>
</html>

Perilaku yang Diharapkan:

First run  : "Please enter your name"  -> Ann
             "How many days you want to store your name on your computer?" -> 5
Second run : alert box shows  Welcome Back Ann!!!

Code penjelasan: Fungsi createCookie mengubah sejumlah hari menjadi milidetik dan menambahkannya ke waktu saat ini, yang menghasilkan tanggal kedaluwarsa. Fungsi accessCookie membagi string cookie berdasarkan titik koma, memangkas setiap fragmen, dan membandingkan awal fragmen dengan nama yang diminta. Fungsi checkCookie menghubungkan keduanya saat halaman dimuat.

Cookie vs localStorage vs sessionStorage

Cookie bukanlah satu-satunya tempat browser dapat menyimpan data. Terdapat dua opsi Penyimpanan Web, dan memilih dengan benar akan menghindari pengiriman byte yang tidak perlu pada setiap permintaan.

Aturan praktisnya sederhana. Jika server membutuhkan nilai tersebut, gunakan cookie. Jika hanya halaman yang membutuhkannya, gunakan localStorage atau sessionStorage, karena nilai-nilai tersebut tidak pernah menambah beban pada permintaan jaringan.

Kode penanganan cookie biasanya digunakan bersama di banyak halaman, jadi sebaiknya tinjau terlebih dahulu. internal dan eksternal JavaNaskah sebelum memutuskan di mana akan menempatkannya. Pemisahan string yang digunakan di sini didasarkan pada JavaString skrip ke JavaMetode array skrip, dan naskah kerja lebih lanjut muncul di praktis JavaContoh kode skrip.

Pertanyaan Umum Demo Slot