LocalStorage, sessionStorage, session ve cookie'lerin teknik avantajları ve dezavantajları nelerdir ve ne zaman diğerinden daha fazla kullanırım?

Bu son derece geniş bir kapsam sorusudur ve birçok artı / eksileri duruma bağlamsal olacaktır.

Her durumda, bu depolama mekanizmaları, tek bir bilgisayardaki / cihazdaki tek bir tarayıcıya özgü olacaktır. Oturumlar boyunca verileri sürekli olarak depolamak için herhangi bir gereksinim, büyük olasılıkla bir veritabanı, ancak muhtemelen XML veya bir metin / CSV dosyası kullanarak uygulama sunucusu tarafınızı içermelidir.

localStorage, sessionStorage ve çerezlerin tümü istemci depolama çözümleridir. Oturum verileri, doğrudan kontrolünüz altında olduğu sunucuda tutulur.

localStorage ve oturumStorage

localStorage ve sessionStorage nispeten yeni API'lardır (yani, tüm eski tarayıcılar bunları desteklemeyecektir) ve yalnızca kalıcılık istisnasıyla neredeyse aynıdır (hem API'larda hem de yeteneklerde). sessionStorage (adından da anlaşılacağı gibi) yalnızca tarayıcı oturumu süresince kullanılabilir (ve sekme veya pencere kapatıldığında silinir) - ancak sayfa yeniden yüklemelerinde varlığını korur (kaynak DOM Depolama kılavuzu - Mozilla Geliştirici Ağı ).

Açıkça, sakladığınız verilerin sürekli olarak sunulması gerekiyorsa, localStorage'ın sessionStorage'a tercih edilir - her iki durumda da verilerin her zaman varlığına güvenmemeniz için her ikisinin de kullanıcı tarafından silinebileceğini unutmayın.

localStorage ve sessionStorage, sayfalar arasındaki istemci komut dosyalarında ihtiyaç duyulan hassas olmayan verilerin kalıcı olması için mükemmeldir (örneğin: tercihler, oyunlardaki puanlar). LocalStorage ve sessionStorage'da depolanan veriler, istemci / tarayıcı içinden kolayca okunabilir veya değiştirilebilir, bu nedenle uygulamalardaki hassas veya güvenlikle ilgili verilerin depolanmasına güvenilmemelidir.

Kurabiye

Bu çerezler için de geçerlidir, bunlar kullanıcı tarafından önemsiz bir şekilde oynanabilir ve veriler de düz metin olarak okunabilir - bu nedenle hassas verileri saklamak istiyorsanız, oturum gerçekten tek seçeneğinizdir. SSL kullanmıyorsanız, çerez bilgileri de özellikle açık bir wifi üzerinden, aktarımda ele geçirilebilir.

Olumlu tarafta, modern (destekleyici) tarayıcıların JavaScript'ten çerezlere ve değerlere erişmesini engelleyeceği anlamına gelen yalnızca HTTP bayrağı ayarlayarak Siteler Arası Komut Dosyası (XSS) / Komut Dosyası enjeksiyonu gibi güvenlik risklerinden korunma derecesi olabilir. bu ayrıca kendi, yasal JavaScript'inizin bunlara erişmesini de engelleyecektir). Eğer tüm niyet ve amaçlar için o çerez bir kopyası varsa - Bu oturum açmış olan kullanıcının bir belirteç içeren ayrıntıları saklamak için kullanılan kimlik doğrulama çerezler, özellikle önemlidir haline web uygulamasıdır kadarıyla olarak bu kullanıcı ve kullanıcının sahip olduğu verilere ve işlevlere aynı erişime sahiptir.

Tanımlama bilgileri kimlik doğrulaması amacıyla ve kullanıcı verilerinin kalıcılığı için kullanıldığından, bir sayfa için geçerli olan tüm tanımlama bilgileri aynı etki alanına yapılan her istek için tarayıcıdan sunucuya gönderilir - buna orijinal sayfa isteği, sonraki Ajax istekleri, tüm resimler, stil sayfaları, komut dosyaları ve yazı tipleri. Bu nedenle, çerezler büyük miktarda bilgi depolamak için kullanılmamalıdır. Tarayıcı, çerezlerde saklanabilecek bilgilerin boyutuna da sınırlamalar getirebilir. Genellikle çerezler kimlik doğrulama, oturum ve reklam takibi için tanımlayıcı simgeleri saklamak için kullanılır. Jetonlar genellikle kendi içinde okunabilir bilgiler değil, uygulamanıza veya veritabanınıza bağlı şifreli tanımlayıcılardır.

localStorage vs. sessionStorage vs. Çerezler

Yetenekler, çerezler, sessionStorage ve localStorage açısından yalnızca dizeleri saklamanıza izin verir - ayarlarken ilkel değerleri örtülü olarak dönüştürmek mümkündür (bunlar okuduktan sonra tür olarak kullanmak için geri dönüştürülmeleri gerekir), ancak Nesneler veya Diziler (JSON'u API'ları kullanarak saklamak üzere serileştirmek mümkündür). Oturum depolama alanı genellikle Sunucu Tarafı diliniz / çerçeveniz tarafından desteklenen ilkel veya nesneleri depolamanızı sağlar.

İstemci tarafı ve Sunucu tarafı

HTTP durum bilgisi olmayan bir protokol olduğundan - web uygulamalarının, web sitesine dönme konusunda önceki ziyaretlerden bir kullanıcıyı tanımlamanın bir yolu yoktur - oturum verileri, kullanıcıyı tekrar ziyaretler için tanımlamak için genellikle bir çerez belirtecine dayanır (ancak nadiren URL parametreleri için kullanılabilir) aynı amaç). Veriler genellikle kayan bir sona erme süresine (kullanıcının her ziyaretinde yenilenir) sahip olur ve sunucu / çerçeve verilerinize bağlı olarak işlem sırasında depolanır (yani web sunucusu çökerse veya yeniden başlatıldığında veriler kaybedilir) veya harici olarak bir durum sunucusu veya veritabanı. Bu, bir web grubu (belirli bir web sitesi için birden fazla sunucu) kullanırken de gereklidir.

Oturum verileri tamamen uygulamanız tarafından kontrol edildiğinden (sunucu tarafı), doğada hassas veya güvenli herhangi bir şey için en iyi yerdir.

Sunucu tarafı verilerinin bariz dezavantajı, ölçeklenebilirliktir - oturum süresi boyunca her kullanıcı için sunucu kaynakları gereklidir ve her istekle birlikte istemci tarafına ihtiyaç duyulan her türlü veri gönderilmelidir. Sunucunun bir kullanıcının başka bir siteye gidip gitmediğini veya tarayıcıyı kapatıp kapatmadığını bilmesinin bir yolu olmadığından, tüm sunucu kaynaklarının terk edilmiş oturumlar tarafından alınmasını önlemek için belirli bir süre sonra oturum verilerinin süresinin dolması gerekir. Bu nedenle oturum verilerini kullanırken, özellikle uzun biçimli sayfalarda verilerin süresinin dolma ve kaybolma olasılığının farkında olmalısınız. Kullanıcı çerezlerini silerse veya tarayıcıları / cihazları değiştirirse de kaybolur.

Bazı web çerçeveleri / geliştiricileri, oturumun sona ermesini önlemek için formun bir sayfasından diğerine veriyi saklamak için gizli HTML girişlerini kullanır.

localStorage, sessionStorage ve çerezlerin tümü "aynı kökenli" kurallara tabidir; bu, tarayıcıların, bilgileri başlayacak şekilde ayarlayan etki alanı dışındaki verilere erişimi engellemesi gerektiği anlamına gelir.

İstemci depolama teknolojileri hakkında daha fazla bilgi için bkz . Html 5'e Dalış .

1. Yerel depolama

   Artıları :

   1. Web depolama, çerezlerde bir iyileştirme olarak basit bir şekilde görüntülenerek çok daha fazla depolama kapasitesi sağlar. Mozilla kaynak koduna bakarsanız, 5120KB'nin ( Chrome'da 2,5 Milyon karaktere eşit 5 MB ) tüm alan için varsayılan depolama boyutu olduğunu görebiliriz. Bu, çalışmak için tipik bir 4KB çerezinden çok daha fazla alan sağlar.
   2. Veriler, her HTTP isteği (HTML, resimler, JavaScript, CSS, vb.) İçin sunucuya geri gönderilmez - istemci ve sunucu arasındaki trafik miktarını azaltır.
   3. LocalStorage'da depolanan veriler, açıkça silinene kadar devam eder. Yapılan değişiklikler kaydedilir ve siteye yapılan mevcut ve gelecekteki tüm ziyaretler için kullanılabilir.

   Eksileri :

   1. Aynı köken politikası üzerinde çalışır . Bu nedenle, saklanan veriler yalnızca aynı kaynaktan elde edilebilir.

2. Kurabiye

   Artıları:

   1. Diğerlerine kıyasla AFAIK hiçbir şey yok.

   Eksileri:

   1. 4K sınırı, ad, değer, son kullanma tarihi vb. Dahil tüm çerez içindir. Çoğu tarayıcıyı desteklemek için adı 4000 baytın altında ve genel çerez boyutu 4093 bayt'ın altında tutun.

   2. Veriler, her HTTP isteği (HTML, resimler, JavaScript, CSS, vb.) İçin sunucuya geri gönderilir; bu da istemci ve sunucu arasındaki trafik miktarını artırır.

      Genellikle aşağıdakilere izin verilir:

      • Toplam 300 çerez
      • Çerez başına 4096 bayt
      • Alan adı başına 20 çerez
      • Alan adı başına 81920 bayt (Maksimum 4096 boyutunda 20 çerez verildi = 81920 bayt.)

3. sessionStorage

   Artıları:

   1. Buna benzer localStorage.
   2. Veriler kalıcı değildir, yani veriler yalnızca pencere başına kullanılabilir (veya Chrome ve Firefox gibi tarayıcılarda sekme). Veriler yalnızca sayfa oturumu sırasında kullanılabilir. Yapılan değişiklikler kaydedilir ve geçerli sayfa ile aynı pencerede gelecekte yapılacak ziyaretler için kullanılabilir. Pencere kapatıldıktan sonra depolama alanı silinir.

   Eksileri:

   1. Veriler yalnızca ayarlandığı pencerenin / sekmenin içinde bulunur.
   2. Mesela localStorage, aynı köken politikası üzerinde çalışıyor . Bu nedenle, saklanan veriler yalnızca aynı kaynaktan elde edilebilir.

Ödeme -sekmelerde - çapraz menşe tarayıcı sekmeleri arasında kolay iletişimi kolaylaştırmak nasıl.

Tamam, YerelDepolama bunu deniyor gibi kaydedebilirsiniz senin tarayıcılar için yerel depolama var 10MB , SessionStorage aynısını yapar, ama söyleyerek 's adı olarak,' s oturumu tabanlı ve tarayıcınızı kapattıktan sonra da az localStorage daha kaydedebilirsiniz silinecek, 5MB'ye kadar gibi , ancak Çerezler tarayıcınızda çok küçük bir veri depolama alanıdır , bu da 4KB'yi kaydedebilir ve hem sunucudan hem de tarayıcıdan erişilebilir ...

Farklılıkları bir bakışta göstermek için aşağıdaki resmi de oluşturdum:

Bunlar, tıpkı belge DOM nesnelerini tutan bir pencere nesnesinin özelliklerinden biri gibi, JavaScript'teki 'pencere' nesnesinin özellikleridir.

Oturum Depolama özelliği, belirli bir başlangıç ​​noktası için sayfa oturumu boyunca kullanılabilen, yani tarayıcı yeniden açık olduğu ve sayfa yeniden yükleme ve geri yükleme gibi açık olduğu sürece ayrı bir depolama alanı sağlar.

Yerel Depolama aynı şeyi yapar, ancak tarayıcı kapatılıp yeniden açıldığında bile devam eder.

Saklanan verileri aşağıdaki gibi ayarlayabilir ve alabilirsiniz:

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

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

Benzer şekilde localStorage için.

Yerel depolama: Kullanıcı bilgi verilerini son kullanma tarihi olmadan saklar Bu kullanıcı tarayıcı pencerelerini kapattığında gün, hafta, ay ve yıl için mevcut olacak bu veriler silinmeyecektir.

Yerel depolamada 5-10mb çevrimdışı veri saklayabilirsiniz.

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

Oturum Depolaması: Bir web kullanıcısı tarafından tarayıcı pencereleri kapatıldığında tüm pencereleri silmesi dışında yerel depolama tarihi ile aynıdır.

Oturumda depolama 5 mb veri saklayabilir

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

Oturum : Oturum , sunucuda depolanan genel bir değişkendir. Her oturuma, depolanan değerleri almak için kullanılan benzersiz bir kimlik atanır.

Çerezler : Çerezler, bilgisayarınızda küçük metin dosyalarında ad-değer çiftleri olarak saklanan verilerdir. Bir çerez ayarlandıktan sonra, takip eden tüm sayfa istekleri çerez adını ve değerini döndürür.

Web Depolama API'sı, tarayıcıların anahtar / değer çiftlerini çerezleri kullanmaktan çok daha sezgisel bir şekilde güvenli bir şekilde depolayabilecekleri mekanizmalar sağlar. Web Depolama API uzanır Windowiki yeni özelliklere sahip nesne - Window.sessionStorageve Window.localStorage. - bunlardan birinin çağrılması, veri öğelerinin ayarlanabileceği, alınabileceği ve kaldırılabileceği bir Storage nesnesi örneği oluşturur. Her başlangıç ​​noktası (etki alanı) için sessionStorageve farklı bir Depolama nesnesi kullanılır localStorage.

Depolama nesneleri, nesnelere benzer basit anahtar / değer depolarıdır, ancak sayfa yükleri boyunca bozulmadan kalırlar .

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

Anahtarlar ve değerler her zaman dizgidir . Herhangi bir türü saklamakconvert it to Stringve sonra saklamak için. Her zamanStorage interfaceyöntemlerinkullanılması önerilir.

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));

Web Depolama içindeki iki mekanizma aşağıdaki gibidir:

• sessionStorage , verilen her kaynak için ayrı bir depolama alanı tutarSayfa oturumu boyunca kullanılabilen ^{aynı kaynak politikası} (sayfa yeniden yükleme ve geri yükleme de dahil olmak üzere tarayıcı açık olduğu sürece).
• localStorage aynı şeyi yapar, ancak tarayıcı kapatılıp yeniden açıldığında bile devam eder.

Depolama « Yerel depolama verileri diske, oturum depolama ise verileri yalnızca belleğe yazar. Oturum depolama alanına yazılan tüm veriler, uygulamanızdan çıkıldığında temizlenir.

Kullanılabilir maksimum depolama alanı tarayıcı başına farklıdır , ancak tarayıcıların çoğu en az w3c önerilen maksimum 5 MB depolama sınırını uygulamıştır .

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

Her zaman LocalStorage güvenliğini yakalayın ve kota aşıldı hataları

• QuotaExceededError : Bu işlevde depolama sınırları aşıldığındawindow.sessionStorage.setItem(key, value);, yeni değer ayarlanamazsa "QuotaExceededError" DOMException istisnası atar. (Örneğin, kullanıcı site için depolamayı devre dışı bıraktıysa veya kota aşıldıysa ayar başarısız olabilir.)

  DOMException. QUOTA_EXCEEDED_ERR 22 , örnek keman .

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

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

StorageEvent «Bir depolama alanı değiştiğinde, depolama olayı bir belgenin Window nesnesinde tetiklenir. Bir kullanıcı aracısı bir Belge için depolama bildirimi gönderecekse, kullanıcı aracısı StorageEvent kullanarak Document nesnesinin Window nesnesinde depolama adlı bir olayı başlatmak için bir görevi sıraya almalıdır.

Not: Gerçek dünya örneği için, bkz. Web Depolama Demosu . ^{kaynak kodu kontrol et}

Depolama alanındaki değişiklikleri yakalamak için dom / Window'daki depolama olayını dinleyin. keman .

Çerezler (web çerezi, tarayıcı çerezi) Çerezler, bilgisayarınızda küçük metin dosyalarında ad-değer çiftleri olarak depolanan verilerdir.

Document.cookie kullanarak JavaScript erişimi

Document.cookie özelliği kullanılarak JavaScript aracılığıyla yeni çerezler de oluşturulabilir ve HttpOnly bayrağı ayarlanmamışsa, mevcut çerezlere JavaScript'ten de erişilebilir.

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

Güvenli ve HttpOnly çerezleri ^{HTTP Durum Yönetim Mekanizması}

Çerezler genellikle web uygulamasında bir kullanıcıyı ve kimlik doğrulaması yapılmış oturumunu tanımlamak için kullanılır

Bir HTTP isteği alırken, sunucu yanıtla birlikte bir Set-Cookie başlığı gönderebilir . Çerez genellikle tarayıcı tarafından saklanır ve daha sonra çerez, Cookie HTTP üstbilgisi içindeki aynı sunucuya yapılan isteklerle gönderilir.

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

Oturum çerezleri , istemci kapatıldığında kaldırılır. Sona Erme veya Maksimum Yaş yönergelerini belirtmezler.

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

Kalıcı çerezlerin süresi belirli bir tarihte (geçerlilik süresi) veya belirli bir süre sonra (Maks-Yaş) sona erer.

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

Çerez HTTP istek üstbilgisi, daha önce sunucu tarafından Set-Cookie üstbilgisi ile gönderilen depolanmış HTTP çerezlerini içerir. Siteler arası komut dosyalarına (XSS) yönelik saldırıları azaltmak için yalnızca HTTP çerezlerine JavaScript aracılığıyla Document.cookie özelliği, XMLHttpRequest ve Request API'leri aracılığıyla erişilemez.

Çerezler temel olarak üç amaç için kullanılır:

• Oturum yönetimi «Girişler, alışveriş sepetleri, oyun puanları veya sunucunun hatırlaması gereken herhangi bir şey
• Kişiselleştirme «Kullanıcı tercihleri, temalar ve diğer ayarlar
• İzleme (Kullanıcı davranışını kaydetme ve analiz etme) «Çerezlerin kendileriyle ilişkili bir alanı vardır. Bu alan adı, bulunduğunuz sayfanın alan adıyla aynıysa, çerezlerin birinci taraf çerezi olduğu söylenir. Alan adı farklıysa, üçüncü taraf çerezi olduğu söylenir. Birinci taraf çerezleri yalnızca bunları ayarlayan sunucuya gönderilirken, bir web sayfasında başka alanlardaki (reklam bannerları gibi) sunucularda depolanan resimler veya başka bileşenler bulunabilir. Bu üçüncü taraf bileşenleri aracılığıyla gönderilen çerezlere üçüncü taraf çerezleri denir ve çoğunlukla web'de reklamcılık ve izleme için kullanılır.

Çerezler, "kullanıcı hakkındaki bilgileri hatırlama" sorununu çözmek için icat edildi:

• Bir kullanıcı bir web sayfasını ziyaret ettiğinde, adı bir çerezde saklanabilir.
• Kullanıcı sayfayı bir sonraki ziyaretinde, isteğe ait sayfaya ait çerezler eklenir. Bu şekilde sunucu, kullanıcılar hakkındaki bilgileri "hatırlamak" için gerekli verileri alır.

GitHubGist Örneği

Özet olarak,

• localStorage, farklı sekmeler veya pencereler üzerinde devam eder ve tarayıcıyı kapatsak bile, etki alanı güvenlik ilkesine ve kota sınırı hakkındaki kullanıcı seçeneklerine göre.
• Sekmeyi (üst düzey tarama bağlamı) kapatırsak sessionStorage nesnesi, başka bir sekme veya pencerede sörf yaptığımızda mevcut olmadığından, devam etmez.
• Web Depolama (oturum, yerel), çerez yoluyla yapılması imkansız olan çok sayıda anahtar / değer çifti ve çok sayıda metni kaydetmemize olanak tanır.
• Hassas eylemler için kullanılan çerezlerin yalnızca kısa bir kullanım ömrü olmalıdır.
• Çerezler genellikle web'de reklam vermek ve izlemek için kullanılır. Örneğin, Google tarafından kullanılan çerez türlerine bakın .
• Çerezler her istekle gönderilir, böylece performansı kötüleştirebilirler (özellikle mobil veri bağlantıları için). İstemci depolama için modern API'ler Web depolama API'sı (localStorage ve sessionStorage) ve IndexedDB'dir.

Yerel Depolama :

• Web depolama, çerezlerde bir iyileştirme olarak basit bir şekilde görüntülenebilir ve çok daha fazla depolama kapasitesi sağlar. Kullanılabilir boyut, tipik bir 4KB çerezinden daha fazla çalışma alanı olan 5 MB'dir.

• Veriler, her HTTP isteği (HTML, resimler, JavaScript, CSS, vb.) İçin sunucuya geri gönderilmez - istemci ve sunucu arasındaki trafik miktarını azaltır.

• LocalStorage'da depolanan veriler, açıkça silinene kadar devam eder. Yapılan değişiklikler kaydedilir ve siteye yapılan mevcut ve gelecekteki tüm ziyaretler için kullanılabilir.

• Aynı köken politikası üzerinde çalışır. Bu nedenle, depolanan veriler yalnızca aynı kaynaktan elde edilebilir.

Kurabiye:

• Her çerez için sona erme süresini ayarlayabiliriz

• 4K sınırı, ad, değer, son kullanma tarihi vb. Dahil tüm çerez içindir. Çoğu tarayıcıyı desteklemek için adı 4000 baytın altında ve genel çerez boyutu 4093 bayt'ın altında tutun.

• Veriler, her HTTP isteği (HTML, resimler, JavaScript, CSS, vb.) İçin sunucuya geri gönderilir; bu da istemci ve sunucu arasındaki trafik miktarını artırır.

sessionStorage:

• LocalStorage'a benzer.

• Değişiklikler yalnızca pencere başına (veya Chrome ve Firefox gibi tarayıcılarda sekme) kullanılabilir. Yapılan değişiklikler kaydedilir ve geçerli sayfa ile aynı pencerede gelecekte yapılacak ziyaretler için kullanılabilir. Pencere kapatıldıktan sonra, depolama alanı silinir Veriler yalnızca ayarlandığı pencerenin / sekmenin içinde bulunur.

• Veriler kalıcı değildir, yani pencere / sekme kapatıldıktan sonra kaybolacaktır. LocalStorage gibi, aynı köken politikası üzerinde çalışır. Bu nedenle, depolanan veriler yalnızca aynı kaynaktan elde edilebilir.

İşte hızlı bir inceleme ve basit ve hızlı bir anlayışla

öğretmen Beau Carnes dan freecodecamp