HTML5 Penyimpanan lokal vs. Penyimpanan sesi

561

Selain tidak persisten dan dibatasi hanya ke jendela saat ini, apakah ada manfaat (kinerja, akses data, dll) untuk Penyimpanan Sesi di Penyimpanan Lokal?

jpkeisala
sumber
15
@robert - Saya yakin Anda salah. Dari w3.org/TR/webstorage sessionStorage adalah scoped ke "tingkat atas konteks penjelajahan", berarti itu adalah unik untuk setiap tab browser / jendela. localStorage dicakup ke asal, namun, artinya dibagikan di semua halaman dengan asal yang sama.
broofa
5
Re: Performance jsperf.com/localstorage-vs-sessionstorage
colllin

Jawaban:

812

localStorage dan sessionStorage keduanya memperpanjang Storage . Tidak ada perbedaan di antara mereka kecuali untuk "non-persistensi" yang dimaksud sessionStorage.

Artinya, data yang disimpan dalam localStorage tetap ada sampai dihapus secara eksplisit . Perubahan yang dibuat disimpan dan tersedia untuk semua kunjungan saat ini dan di masa mendatang ke situs.

Sebab sessionStorage, perubahan hanya tersedia per tab. Perubahan yang dibuat disimpan dan tersedia untuk halaman saat ini di tab itu sampai ditutup. Setelah ditutup, data yang disimpan dihapus.

tcooc
sumber
17
ada diskusi yang lebih luas yang mungkin bermanfaat di sini: stackoverflow.com/questions/19867599/…
Ed Sykes
13
jika Anda menyimpan beberapa data dalam penyimpanan di bawah http, Anda tidak akan dapat mengambilnya di https
Mark Thien
saya menguji ini di Chrome v41.x dan tampaknya pernyataan di atas tentang https tidak benar: localStorage menyimpan data yang tersimpan.
CCC
36
SessionStorage bertahan selama pemuatan ulang halaman dan memulihkan, tetapi membuka tab / jendela baru akan memulai sesi baru.
Patrick
160

Satu-satunya perbedaan adalah bahwa localStorage memiliki waktu kedaluwarsa yang berbeda, sessionStoragehanya akan dapat diakses sementara dan oleh jendela yang membuatnya terbuka.
localStorageberlangsung hingga Anda menghapusnya atau pengguna menghapusnya.
Katakanlah bahwa Anda ingin menyimpan username login dan password Anda akan ingin menggunakan sessionStoragelebih localStorageuntuk alasan keamanan (yaitu. Orang lain mengakses akun mereka di lain waktu).
Tetapi jika Anda ingin menyimpan pengaturan pengguna di mesin mereka, Anda mungkin ingin localStorage. Semua seutuhnya:

localStorage- digunakan untuk penggunaan jangka panjang.
sessionStorage- gunakan ketika Anda perlu menyimpan sesuatu yang berubah atau sesuatu yang sementara

MayorMonty
sumber
103

Beberapa poin lain yang mungkin membantu untuk memahami perbedaan antara penyimpanan lokal dan sesi

  1. Baik penyimpanan lokal dan penyimpanan sesi dibatasi untuk mendokumentasikan asal, jadi

    https://mydomain.com/
    http://mydomain.com/
    https://mydomain.com:8080/

    Semua URL di atas tidak akan berbagi penyimpanan yang sama. (Jalur pemberitahuan halaman web tidak memengaruhi penyimpanan web)

  2. Penyimpanan sesi berbeda bahkan untuk dokumen dengan kebijakan asal yang sama terbuka di tab yang berbeda, sehingga halaman web yang sama dibuka di dua tab yang berbeda tidak dapat berbagi penyimpanan sesi yang sama.

  3. Penyimpanan lokal dan sesi juga dibatasi oleh vendor browser . Jadi data penyimpanan yang disimpan oleh IE tidak dapat dibaca oleh Chrome atau FF.

Semoga ini membantu.

functionoid
sumber
3
Tidak, sesi sessionStorage yang sama antara http dan https tetapi localStorage tidak.
Shahdat
5
Jika Anda mengatur sessionStorage di https asal terlebih dahulu, itu akan tersedia di http tetapi jika Anda membuat sessionStore di http maka tidak akan tersedia di http
Shahdat
4
@ Shahdat, maksud Anda "maka tidak akan tersedia di https" (perhatikan)?
Daniel Werner
3
@DanielWerner ya, jika Anda membuat sessionStore di http maka tidak akan tersedia di https.
Shahdat
28

Perbedaan utama antara localStoragedan sessionStorageitu sessionStorageunik per tab. Jika Anda menutup tab itu sessionStorageakan dihapus, localStoragetidak. Anda juga tidak dapat berkomunikasi antar tab :)

Perbedaan halus lainnya adalah bahwa misalnya pada Safari (8.0.3) localStoragememiliki batas 2.551 k karakter tetapi sessionStoragememiliki penyimpanan tidak terbatas

Pada Chrome (v43) keduanya localStoragedan sessionStoragedibatasi hingga 5101 k karakter (tidak ada perbedaan antara mode normal / penyamaran)

Pada Firefox keduanya localStoragedan sessionStoragedibatasi hingga 5120 k karakter (tidak ada perbedaan antara mode normal / pribadi)

Tidak ada perbedaan dalam kecepatan apa pun :)

Ada juga masalah dengan Mobile Safari dan Mobile Chrome, Private Mode Safari & Chrome memiliki ruang maksimum 0KB

Eek
sumber
1
terbatas hingga 5101 k karakter? jadi .. 5,101 juta karakter?
Zze
@Zze Ya, 1 karakter biasanya 1 byte maka 5 juta karakter bernilai penyimpanan 5Mb.
Basim Khajwal
@ BasimKhajwal Itu 5MB. Bytes, bukan bit.
Yeti
Bisakah Anda menambahkan sumber ke apa yang Anda sebutkan?
Mukus
@Mukus, tidak ada sumber, saya menjalankan tes sendiri, dan memiliki masalah dengan Private Mode Safari untuk memiliki localStorage tetapi tidak memiliki ruang di sana dan polyfill saya tidak akan terpicu karena localStorage ada, tetapi skrip gagal karena tidak dapat menyimpan apapun disana. Anda dapat menguji juga menggunakan alat ini - dev-test.nemikor.com/web-storage/support-test
Eek
17

sessionStoragesama dengan localStorage, kecuali bahwa itu menyimpan data hanya untuk satu sesi, dan itu akan dihapus ketika pengguna menutup jendela browser yang membuatnya.

Ahmad Santarissy
sumber
10

Dari segi kinerja, pengukuran (kasar) saya tidak menemukan perbedaan pada 1000 penulisan dan pembacaan

keamanan bijaksana, secara intuitif kelihatannya localStore mungkin akan ditutup sebelum sessionStore, tetapi tidak memiliki bukti nyata - mungkin orang lain melakukannya?

fungsional bijaksana, setuju dengan digitalFresh di atas

cc muda
sumber
1
mengenai kinerja pemuatan halaman: Keduanya, sessionStorage dan localStorage dimulai dan dipopulasi dari siklus memuat halaman. Karena itu, tol pada waktu pemuatan halaman awal tidak dapat diukur dari dalam browser.
Mirko
6

Ya penyimpanan sesi dan penyimpanan lokal sama dalam perilaku kecuali yang penyimpanan lokal akan menyimpan data sampai dan kecuali pengguna menghapus cache dan cookie dan data penyimpanan sesi akan tetap di sistem sampai kita menutup sesi i, e sampai kita menutup jendela penyimpanan sesi dibuat.

Bhargavi
sumber
5

Keuntungan dari penyimpanan sesi daripada penyimpanan lokal, menurut saya, adalah memiliki kapasitas tak terbatas di Firefox, dan tidak akan bertahan lebih lama dari sesi. (Tentu saja itu tergantung pada apa tujuan Anda.)

avvett
sumber
2

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.

//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.

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

Baca Lebih Lanjut Klik

Srikrushna
sumber
2
  • sessionStorage memelihara area penyimpanan terpisah untuk setiap asal yang diberikan yang tersedia selama 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.

Saya mengambil ini dari https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

Linda Gutiérrez Montoya
sumber