Apa pro dan kontra teknis dari Penyimpanan lokal, sessionStorage, sesi, dan cookie, dan kapan saya akan menggunakannya?

Ini adalah pertanyaan lingkup yang sangat luas, dan banyak pro / kontra akan kontekstual dengan situasi tersebut.

Dalam semua kasus, mekanisme penyimpanan ini akan spesifik untuk peramban individual di komputer / perangkat individual. Persyaratan apa pun untuk menyimpan data secara berkelanjutan di seluruh sesi harus melibatkan sisi server aplikasi Anda - kemungkinan besar menggunakan database, tetapi mungkin XML atau file teks / CSV.

localStorage, sessionStorage, dan cookie adalah semua solusi penyimpanan klien. Data sesi disimpan di server yang tetap di bawah kendali langsung Anda.

Penyimpanan lokal dan sesi penyimpanan

localStorage dan sessionStorage adalah API yang relatif baru (artinya, tidak semua browser lawas akan mendukungnya) dan hampir identik (baik dalam API dan kemampuan) dengan satu-satunya pengecualian dari kegigihan. sessionStorage (seperti namanya) hanya tersedia selama sesi browser (dan dihapus ketika tab atau jendela ditutup) - itu, bagaimanapun, bertahan kembali halaman reload (sumber DOM panduan penyimpanan - Jaringan Pengembang Mozilla Developer ).

Jelas, jika data yang Anda simpan harus tersedia secara berkelanjutan maka localStorage lebih disukai daripada sessionStorage - meskipun Anda harus mencatat keduanya dapat dihapus oleh pengguna sehingga Anda tidak harus bergantung pada keberadaan data yang berkelanjutan dalam kedua kasus.

localStorage dan sessionStorage sempurna untuk mempertahankan data yang tidak sensitif yang dibutuhkan dalam skrip klien antar halaman (misalnya: preferensi, skor dalam game). Data yang disimpan di Penyimpanan lokal dan sesi Penyimpanan dapat dengan mudah dibaca atau diubah dari dalam klien / browser sehingga tidak boleh diandalkan untuk penyimpanan data sensitif atau terkait keamanan dalam aplikasi.

Kue

Ini juga berlaku untuk cookie, ini dapat diremehkan oleh pengguna secara sepele, dan data juga dapat dibaca dari mereka dalam teks biasa - jadi jika Anda ingin menyimpan data sensitif maka sesi tersebut adalah satu-satunya pilihan Anda. Jika Anda tidak menggunakan SSL, informasi cookie juga dapat disadap dalam perjalanan, terutama pada wifi terbuka.

Di sisi positifnya, cookie dapat memiliki tingkat perlindungan yang diterapkan dari risiko keamanan seperti Cross-Site Scripting (XSS) / injeksi Script dengan menetapkan flag HTTP only yang berarti browser modern (pendukung) akan mencegah akses ke cookie dan nilai-nilai dari JavaScript ( ini juga akan mencegah Anda sendiri, sah, JavaScript mengaksesnya). Ini sangat penting dengan cookie otentikasi, yang digunakan untuk menyimpan token yang berisi rincian pengguna yang masuk - jika Anda memiliki salinan cookie itu maka untuk semua maksud dan tujuan Anda menjadi pengguna sejauh aplikasi web tersebut berada. terkait, dan memiliki akses yang sama ke data dan fungsionalitas yang dimiliki pengguna.

Karena cookie digunakan untuk tujuan autentikasi dan persistensi data pengguna, semua cookie yang valid untuk suatu halaman dikirim dari browser ke server untuk setiap permintaan ke domain yang sama - ini termasuk permintaan halaman asli, setiap permintaan Ajax berikutnya, semua gambar, stylesheet, skrip, dan font. Karena alasan ini, cookie tidak boleh digunakan untuk menyimpan informasi dalam jumlah besar. Browser juga dapat memberlakukan batasan pada ukuran informasi yang dapat disimpan dalam cookie. Cookies biasanya digunakan untuk menyimpan token pengidentifikasi untuk otentikasi, sesi, dan pelacakan iklan. Token biasanya bukan informasi yang dapat dibaca manusia di dalam dan tentang diri mereka sendiri, tetapi pengidentifikasi terenkripsi yang terhubung ke aplikasi atau database Anda.

localStorage vs sessionStorage vs Cookies

Dalam hal kemampuan, cookie, sessionStorage, dan localStorage hanya memungkinkan Anda untuk menyimpan string - dimungkinkan untuk secara implisit mengkonversi nilai-nilai primitif saat pengaturan (ini akan perlu dikonversi kembali untuk menggunakannya sebagai tipe mereka setelah membaca) tetapi tidak Objects atau Array (JSON memungkinkan untuk membuat serial mereka untuk menyimpannya menggunakan API). Penyimpanan sesi umumnya memungkinkan Anda untuk menyimpan primitif atau objek yang didukung oleh bahasa / kerangka Sisi Server Anda.

Sisi klien vs. Sisi server

Karena HTTP adalah protokol tanpa kewarganegaraan - aplikasi web tidak memiliki cara mengidentifikasi pengguna dari kunjungan sebelumnya saat kembali ke situs web - data sesi biasanya bergantung pada token cookie untuk mengidentifikasi pengguna untuk kunjungan berulang (walaupun jarang parameter URL dapat digunakan untuk tujuan yang sama). Data biasanya akan memiliki waktu kadaluwarsa geser (diperpanjang setiap kali pengguna mengunjungi), dan tergantung pada server Anda / data kerangka akan disimpan dalam proses (artinya data akan hilang jika server web crash atau restart) atau secara eksternal dalam server negara atau database. Ini juga diperlukan ketika menggunakan web-farm (lebih dari satu server untuk situs web tertentu).

Karena data sesi sepenuhnya dikendalikan oleh aplikasi Anda (sisi server), ini adalah tempat terbaik untuk hal yang sensitif atau aman.

Kerugian yang jelas dari data sisi server adalah skalabilitas - sumber daya server diperlukan untuk setiap pengguna selama sesi berlangsung, dan bahwa setiap data yang dibutuhkan pihak klien harus dikirim dengan setiap permintaan. Karena server tidak memiliki cara untuk mengetahui apakah pengguna menavigasi ke situs lain atau menutup browser mereka, data sesi harus berakhir setelah waktu tertentu untuk menghindari semua sumber daya server diambil oleh sesi yang ditinggalkan. Saat menggunakan data sesi, Anda harus waspada terhadap kemungkinan bahwa data akan kedaluwarsa dan hilang, terutama pada halaman dengan formulir panjang. Itu juga akan hilang jika pengguna menghapus cookie mereka atau beralih browser / perangkat.

Beberapa kerangka kerja / pengembang menggunakan input HTML tersembunyi untuk mempertahankan data dari satu halaman formulir ke halaman lain untuk menghindari berakhirnya sesi.

localStorage, sessionStorage, dan cookie semuanya tunduk pada aturan "asal-sama" yang berarti browser harus mencegah akses ke data kecuali domain yang mengatur informasi untuk memulai.

Untuk membaca lebih lanjut tentang teknologi penyimpanan klien, lihat Menyelam ke Html 5 .

1. Penyimpanan lokal

   Pro :

   1. Penyimpanan web dapat dilihat secara sederhana sebagai peningkatan cookie, memberikan kapasitas penyimpanan yang jauh lebih besar. Jika Anda melihat kode sumber Mozilla, kita dapat melihat bahwa 5120KB ( 5MB yang sama dengan 2,5 Juta karakter pada Chrome) adalah ukuran penyimpanan default untuk seluruh domain. Ini memberi Anda lebih banyak ruang untuk bekerja dibandingkan cookie 4KB pada umumnya.
   2. Data tidak dikirim kembali ke server untuk setiap permintaan HTTP (HTML, gambar, JavaScript, CSS, dll) - mengurangi jumlah lalu lintas antara klien dan server.
   3. Data yang disimpan di localStorage bertahan hingga dihapus secara eksplisit. Perubahan yang dibuat disimpan dan tersedia untuk semua kunjungan saat ini dan di masa mendatang ke situs.

   Cons :

   1. Ini bekerja pada kebijakan yang sama-asal . Jadi, data yang disimpan hanya akan tersedia pada sumber yang sama.

2. Kue

   Pro:

   1. Dibandingkan dengan yang lain, tidak ada yang AFAIK.

   Cons:

   1. Batas 4K adalah untuk seluruh cookie, termasuk nama, nilai, tanggal kedaluwarsa, dll. Untuk mendukung sebagian besar browser, jaga nama di bawah 4000 byte, dan ukuran cookie keseluruhan di bawah 4093 byte.

   2. Data dikirim kembali ke server untuk setiap permintaan HTTP (HTML, gambar, JavaScript, CSS, dll) - meningkatkan jumlah lalu lintas antara klien dan server.

      Biasanya, yang berikut ini diizinkan:

      • 300Total cookie
      • 4096 byte per cookie
      • 20 kue per domain
      • 81920 byte per domain (Diberikan 20 cookie dengan ukuran maksimal 4096 = 81920 byte.)

3. sessionStorage

   Pro:

   1. Ini mirip dengan localStorage .
   2. Data tidak persisten yaitu data hanya tersedia per jendela (atau tab di browser seperti Chrome dan Firefox). Data hanya tersedia selama sesi halaman. Perubahan yang dibuat disimpan dan tersedia untuk halaman saat ini, serta kunjungan mendatang ke situs pada jendela yang sama. Setelah jendela ditutup, penyimpanan dihapus.

   Cons:

   1. Data hanya tersedia di dalam jendela / tab di mana itu diatur.
   2. Seperti localStorage, ini bekerja pada kebijakan yang sama-asal . Jadi, data yang disimpan hanya akan tersedia pada sumber yang sama.

Checkout lintas-tab - cara memfasilitasi komunikasi yang mudah antara tab browser lintas-asal.

OK, LocalStorage disebut sebagai penyimpanan lokal untuk browser Anda, dapat menghemat hingga 10MB , SessionStorage melakukan hal yang sama, tetapi seperti namanya, itu berdasarkan sesi dan akan dihapus setelah menutup browser Anda, juga dapat menghemat kurang dari LocalStorage, seperti hingga 5MB , tetapi Cookie menyimpan data yang sangat kecil di browser Anda, yang dapat menyimpan hingga 4KB dan dapat diakses melalui server atau browser ...

Saya juga membuat gambar di bawah ini untuk menunjukkan perbedaan secara sekilas:

Ini adalah properti dari objek 'window' dalam JavaScript, seperti halnya dokumen adalah salah satu properti dari objek window yang menyimpan objek DOM.

Properti Session Storage memiliki area penyimpanan terpisah untuk setiap asal yang diberikan yang tersedia selama sesi halaman yaitu selama browser terbuka, termasuk pemuatan dan pemulihan halaman.

Penyimpanan Lokal melakukan hal yang sama, tetapi tetap ada bahkan ketika browser ditutup dan dibuka kembali.

Anda dapat mengatur dan mengambil data yang disimpan sebagai berikut:

sessionStorage.setItem('key', 'value');

var data = sessionStorage.getItem('key');

Demikian pula untuk Penyimpanan lokal.

Penyimpanan lokal: Ini menyimpan data informasi pengguna tanpa tanggal kedaluwarsa, data ini tidak akan dihapus ketika pengguna menutup jendela browser, itu akan tersedia untuk hari, minggu, bulan dan tahun.

Dalam penyimpanan lokal dapat menyimpan data offline 5-10mb.

//Set the value in a local storage object
localStorage.setItem('name', myName);

//Get the value from storage object
localStorage.getItem('name');

//Delete the value from local storage object
localStorage.removeItem(name);//Delete specifice obeject from local storege
localStorage.clear();//Delete all from local storege

Penyimpanan Sesi: Ini sama dengan tanggal penyimpanan lokal kecuali itu akan menghapus semua jendela ketika jendela browser ditutup oleh pengguna web.

Dalam Session storage dapat menyimpan data hingga 5 mb

//set the value to a object in session storege
sessionStorage.myNameInSession = "Krishna";

Sidang : Sesi adalah variabel global yang disimpan di server. Setiap sesi diberi id unik yang digunakan untuk mengambil nilai yang disimpan.

Cookie : Cookie adalah data, disimpan dalam file teks kecil sebagai pasangan nilai-nama, di komputer Anda. Setelah cookie ditetapkan, semua permintaan halaman yang mengikuti akan mengembalikan nama dan nilai cookie.

API Penyimpanan Web menyediakan mekanisme yang digunakan browser untuk menyimpan pasangan kunci / nilai secara aman, dengan cara yang jauh lebih intuitif daripada menggunakan cookie. The API Web Storage memperluas Windowobjek dengan dua sifat baru - Window.sessionStoragedan Window.localStorage. - mengaktifkan salah satu dari ini akan membuat turunan dari objek Storage, di mana item data dapat diatur, diambil, dan dihapus. Objek Storage berbeda digunakan untuk sessionStoragedan localStorageuntuk setiap asal (domain).

Objek penyimpanan adalah penyimpanan nilai kunci yang sederhana , mirip dengan objek, tetapi tetap utuh melalui pemuatan halaman .

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

Kunci dan nilainya selalu berupa string . Untuk menyimpan semua jenisconvert it to Stringdan menyimpannya. Selalu disarankan untuk menggunakanStorage interfacemetode.

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('Converting String to Object: ', JSON.parse(retrievedObject));

Dua mekanisme dalam Penyimpanan Web adalah sebagai berikut:

• sessionStorage memiliki area penyimpanan terpisah untuk setiap asal yang diberikan ^{Kebijakan asal-sama} yang tersedia selama durasi sesi halaman (selama browser terbuka, termasuk pemuatan dan pemulihan halaman).
• localStorage melakukan hal yang sama, tetapi tetap ada bahkan ketika browser ditutup dan dibuka kembali.

Penyimpanan « Penyimpanan lokal menulis data ke disk, sementara penyimpanan sesi menulis data ke memori saja. Data apa pun yang ditulis ke penyimpanan sesi dihapus saat aplikasi Anda keluar.

The penyimpanan maksimum yang tersedia adalah berbeda per peramban , tapi kebanyakan browser telah menerapkan setidaknya W3C direkomendasikan batas penyimpanan maksimum 5MB .

+----------------+--------+---------+-----------+--------+
|                | Chrome | Firefox | Safari    |  IE    |
+----------------+--------+---------+-----------+--------+
| LocalStorage   | 10MB   | 10MB    | 5MB       | 10MB   |
+----------------+--------+---------+-----------+--------+
| SessionStorage | 10MB   | 10MB    | Unlimited | 10MB   |
+----------------+--------+---------+-----------+--------+

Selalu tangkap keamanan LocalStorage dan kuota kesalahan terlampaui

• QuotaExceededError : Ketika batas penyimpanan melebihi fungsi iniwindow.sessionStorage.setItem(key, value);, ia melempar pengecualian DOMException "QuotaExceededError" jika nilai baru tidak dapat ditetapkan. (Pengaturan dapat gagal jika, misalnya, pengguna telah menonaktifkan penyimpanan untuk situs, atau jika kuota telah terlampaui.)

  Penyimpangan DOME. QUOTA_EXCEEDED_ERR adalah 22 , contoh biola .

• SecurityError :Uncaught SecurityError: Access to 'localStorage' is denied for this document.

  CHROME:-Privacy and security « Content settings « Cookies « Block third-party cookies.

StorageEvent «Acara penyimpanan ditembakkan pada objek Window dokumen ketika area penyimpanan berubah. Ketika agen pengguna mengirim pemberitahuan penyimpanan untuk dokumen, agen pengguna harus mengantri tugas untuk memecat suatu peristiwa bernama penyimpanan di objek Window objek Dokumen, menggunakan StorageEvent.

Catatan: Untuk contoh dunia nyata, lihat Demo Penyimpanan Web . ^{lihat kode sumbernya}

Dengarkan acara penyimpanan di dom / Window untuk menangkap perubahan dalam penyimpanan. biola .

Cookie (cookie web, cookie browser) Cookie adalah data, yang disimpan dalam file teks kecil sebagai pasangan nilai-nama, di komputer Anda.

Akses JavaScript menggunakan Document.cookie

Cookie baru juga dapat dibuat melalui JavaScript menggunakan properti Document.cookie, dan jika flag HttpOnly tidak disetel, cookie yang ada dapat diakses dari JavaScript juga.

document.cookie = "yummy_cookie=choco"; 
document.cookie = "tasty_cookie=strawberry"; 
console.log(document.cookie); 
// logs "yummy_cookie=choco; tasty_cookie=strawberry"

Aman dan HttpHanya cookie ^{Mekanisme Manajemen} Status ^HTTP

Cookie sering digunakan dalam aplikasi web untuk mengidentifikasi pengguna dan sesi terotentikasi mereka

Saat menerima permintaan HTTP, server dapat mengirim tajuk Set-Cookie dengan respons. Cookie biasanya disimpan oleh browser, dan kemudian cookie dikirim dengan permintaan yang dibuat ke server yang sama di dalam header HTTP Cookie.

Set-Cookie: <cookie-name>=<cookie-value> 
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>

Cookie sesi akan dihapus ketika klien dimatikan. Mereka tidak menentukan masa berlaku atau arahan Max-Age.

Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/

Cookie permanen kedaluwarsa pada tanggal tertentu (Kedaluwarsa) atau setelah jangka waktu tertentu (Max-Age).

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

Header permintaan HTTP Cookie berisi cookie HTTP tersimpan yang sebelumnya dikirim oleh server dengan header Set-Cookie. Cookie khusus HTTP tidak dapat diakses melalui JavaScript melalui properti Document.cookie, XMLHttpRequest, dan API Permintaan untuk mengurangi serangan terhadap skrip lintas situs (XSS).

Cookie terutama digunakan untuk tiga tujuan:

• Manajemen sesi «Login, kereta belanja, skor permainan, atau apa pun yang harus diingat server
• Personalisasi «Preferensi pengguna, tema, dan pengaturan lainnya
• Pelacakan (Merekam dan menganalisis perilaku pengguna) «Cookie memiliki domain yang dikaitkan dengannya. Jika domain ini sama dengan domain halaman tempat Anda berada, cookie dikatakan sebagai cookie pihak pertama. Jika domainnya berbeda, itu disebut sebagai cookie pihak ketiga. Sementara cookie pihak pertama dikirim hanya ke server yang mengaturnya, halaman web dapat berisi gambar atau komponen lain yang disimpan di server di domain lain (seperti spanduk iklan). Cookie yang dikirim melalui komponen pihak ketiga ini disebut cookie pihak ketiga dan terutama digunakan untuk iklan dan pelacakan di seluruh web.

Cookie diciptakan untuk memecahkan masalah "bagaimana mengingat informasi tentang pengguna":

• Ketika pengguna mengunjungi halaman web, namanya dapat disimpan dalam cookie.
• Lain kali pengguna mengunjungi halaman, cookie milik halaman ditambahkan ke permintaan. Dengan cara ini server mendapatkan data yang diperlukan untuk "mengingat" informasi tentang pengguna.

Contoh GitHubGist

Sebagai ringkasan,

• localStorage tetap ada di tab atau jendela yang berbeda, dan bahkan jika kita menutup browser, sesuai dengan kebijakan keamanan domain dan pilihan pengguna tentang batas kuota.
• objek sessionStorage tidak bertahan jika kita menutup tab (konteks penelusuran tingkat atas) karena tidak ada jika kita berselancar melalui tab atau jendela lain.
• Penyimpanan Web (sesi, lokal) memungkinkan kami untuk menyimpan banyak pasangan kunci / nilai dan banyak teks, sesuatu yang mustahil dilakukan melalui cookie.
• Cookie yang digunakan untuk tindakan sensitif seharusnya hanya seumur hidup singkat.
• Cookie terutama digunakan untuk iklan dan pelacakan di seluruh web. Lihat misalnya jenis cookie yang digunakan oleh Google .
• Cookie dikirimkan dengan setiap permintaan, sehingga mereka dapat memperburuk kinerja (terutama untuk koneksi data seluler). API modern untuk penyimpanan klien adalah API penyimpanan Web (penyimpanan lokal dan sessionStorage) dan IndexedDB.

Penyimpanan Lokal :

• Penyimpanan web dapat dilihat secara sederhana sebagai peningkatan cookie, memberikan kapasitas penyimpanan yang jauh lebih besar. Ukuran yang tersedia adalah 5MB yang jauh lebih banyak ruang untuk bekerja daripada cookie 4KB khas.

• Data tidak dikirim kembali ke server untuk setiap permintaan HTTP (HTML, gambar, JavaScript, CSS, dll) - mengurangi jumlah lalu lintas antara klien dan server.

• Data yang disimpan di localStorage bertahan hingga dihapus secara eksplisit. Perubahan yang dibuat disimpan dan tersedia untuk semua kunjungan saat ini dan di masa mendatang ke situs.

• Ini bekerja pada kebijakan yang sama-asal. Jadi, data yang disimpan hanya akan tersedia pada sumber yang sama.

Kue:

• Kami dapat mengatur waktu kedaluwarsa untuk setiap cookie

• Batas 4K adalah untuk seluruh cookie, termasuk nama, nilai, tanggal kedaluwarsa, dll. Untuk mendukung sebagian besar browser, jaga nama di bawah 4000 byte, dan ukuran cookie keseluruhan di bawah 4093 byte.

• Data dikirim kembali ke server untuk setiap permintaan HTTP (HTML, gambar, JavaScript, CSS, dll) - meningkatkan jumlah lalu lintas antara klien dan server.

sessionStorage:

• Ini mirip dengan Penyimpanan lokal.

• Perubahan hanya tersedia per jendela (atau tab di browser seperti Chrome dan Firefox). Perubahan yang dibuat disimpan dan tersedia untuk halaman saat ini, serta kunjungan mendatang ke situs pada jendela yang sama. Setelah jendela ditutup, penyimpanan dihapus. Data hanya tersedia di dalam jendela / tab di mana itu diatur.

• Data tidak persisten yaitu akan hilang setelah jendela / tab ditutup. Seperti Penyimpanan lokal, ia bekerja dengan kebijakan yang sama-asal. Jadi, data yang disimpan hanya akan tersedia pada sumber yang sama.

di sini adalah ulasan cepat dan dengan pemahaman yang sederhana dan cepat

dari guru Beau Carnes dari freecodecamp