Apakah javascript sama dengan cookie?

Penyimpanan Lokal memungkinkan Anda juga membaca dari dan menyimpan data yang terkait dengan pengguna di browser menggunakan API Penyimpanan JavaScript

Dalam artikel ini, Anda akan mempelajari tentang beberapa perbedaan utama antara penyimpanan lokal dan cookie dan mana yang harus Anda pilih untuk situs web Anda

Apa itu Cookie?

Cookie adalah potongan data yang dikomunikasikan antara server dan browser di header permintaan. Ini memungkinkan server untuk mempelajari lebih banyak informasi tentang pengguna yang mengakses situs web tetapi juga memberi Anda akses di browser untuk berinteraksi dengan data tersebut

Contoh penggunaan cookie adalah menyimpan token autentikasi pengguna saat mereka masuk. Server harus memiliki akses ke cookie tersebut untuk mengautentikasi pengguna dalam permintaan selanjutnya dan mengambil data atau memproses tindakan berdasarkan siapa pengguna tersebut

Demikian pula, sebagai pengembang, Anda mungkin memerlukan akses ke token itu untuk menggunakannya untuk mengirim permintaan di masa mendatang ke server Anda

Cookie di sisi klien (browser) diakses secara native dengan document.cookies. Saat Anda menyimpan cookie di browser, Anda dapat membuatnya khusus untuk jalur di nama domain dan Anda dapat menambahkan tanggal kedaluwarsa untuk cookie tersebut

Apa itu Penyimpanan Lokal?

Penyimpanan Lokal digunakan untuk membaca dan menulis data di penyimpanan browser. Data tetap ada dan tidak memiliki tanggal kedaluwarsa. Data disimpan dalam pasangan kunci-nilai. Server tidak memiliki akses ke penyimpanan lokal klien

Contoh penggunaan penyimpanan lokal adalah menyimpan preferensi mode warna pengguna (mode terang atau gelap). Sepotong informasi ini umumnya tidak perlu diketahui oleh server, dan digunakan untuk memastikan bahwa preferensi pengguna tercermin di situs web

Penyimpanan lokal khusus untuk protokol domain. Jadi, informasi yang dikembalikan untuk situs web dengan protokol HTTP berbeda dengan informasi yang dikembalikan untuk situs web yang sama dengan protokol HTTPS

Penyimpanan lokal diakses menggunakan window.localStorage. Ini adalah properti read-only dengan metode seperti getItem dan setItem untuk mengakses dan memodifikasi atau menambahkan data ke penyimpanan lokal

Apa Perbedaan Antara Cookie dan Penyimpanan Lokal

Akses di Server

Seperti disebutkan di bagian sebelumnya, server dapat mengakses cookie klien tetapi bukan data yang disimpan di penyimpanan klien

Jadi, dalam kasus penggunaan yang penting bagi server untuk memiliki akses ke kumpulan data, Anda harus menggunakan cookie

Ukuran Data

Ada perbedaan besar antara ukuran data yang dapat disimpan cookie dan penyimpanan lokal. Untuk cookie, ukuran maksimumnya adalah 4096 byte, sedangkan untuk penyimpanan lokal adalah 5MB

Oleh karena itu, cookie tidak boleh digunakan untuk menyimpan data berukuran besar. Misalnya, jika Anda ingin menyimpan detail pengguna di browser, sebaiknya simpan di penyimpanan lokal

Kedaluwarsa Data

Cookie memiliki tanggal kedaluwarsa. Anda dapat mengaturnya ke tanggal yang sangat jauh, tetapi masih kedaluwarsa. Di sisi lain, data di penyimpanan lokal tidak kedaluwarsa dan akan tersedia setiap kali pengguna membuka situs web Anda. Satu-satunya cara untuk mengosongkan penyimpanan lokal adalah secara manual dengan kode atau jika pengguna mengosongkan penyimpanan browser secara manual

API yang lebih baik

Kecuali jika Anda menggunakan pustaka JavaScript untuk memfasilitasi hal ini, akan merepotkan untuk membaca atau menulis cookie menggunakan document.cookies karena tidak ada cara langsung untuk melakukannya. Berikut adalah contoh dari W3Schools tentang kode yang perlu Anda gunakan untuk mendapatkan dan menyetel cookie berdasarkan nama

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

Sedangkan untuk penyimpanan lokal, ini mengimplementasikan Web Storage API yang berisi metode yang mudah digunakan untuk membaca dan menulis data. Berikut adalah contoh pengaturan data di penyimpanan dan membacanya

localStorage.setItem('name', 'Shahed');

//later
const name = localStorage.getItem('name');

Mana yang Harus Anda Pilih?

Dari membaca perbedaan dan definisi ini harus jelas. Namun, untuk meringkasnya dan membuatnya lebih jelas

1. Jika Anda perlu menyimpan data yang dapat diakses oleh server dan klien, gunakan cookie. Jika tidak, gunakan penyimpanan lokal
2. Jika Anda perlu menyimpan data yang lebih besar, gunakan penyimpanan lokal
3. Jika Anda perlu menyimpan data yang tidak kedaluwarsa, gunakan penyimpanan lokal
4. Jika Anda memerlukan metode yang mudah digunakan untuk mengakses dan mengubah data yang disimpan di klien, gunakan penyimpanan lokal

Kesimpulan

Jika Anda tertarik untuk mempelajari lebih lanjut tentang cookie dan penyimpanan lokal, lihat dokumentasi MDN untuk cookie dan penyimpanan lokal untuk penjelasan yang lebih menyeluruh dari masing-masing

Apakah cookie JavaScript?

Bisakah JavaScript mengakses semua cookie?

Apakah cookie JavaScript dan PHP sama?

Berapa banyak jenis cookie yang ada di JavaScript?