localStorage ve sessionStorage ve Çerezler – Ayrıntılı Bir Karşılaştırma

Çerezler uzun zamandır bizimle birlikteydi (Internet Explorer v2, Ekim 1995'te onları destekliyordu). Onlarda yanlış bir şey yok ve kesinlikle web'i daha hoş bir yer haline getirdiler, ancak yaklaşık 25 yıl sonra çok şey değişti.

Yerel Depolama (W3'te Web Depolama altında bulacaksınız) tanımlama bilgilerinin yerine geçer ve değildir. Bu konuda en kafa karıştırıcı olan şey bu. Çoğu durumda, tanımlama bilgileri yerine localStorage'ı güvenle kullanabilir ve aynı oldukları halde (yanlış) aynı oldukları izlenimini edinebilirsiniz. Çerezleri değiştirmek için localStorage'ın nasıl ve ne zaman kullanılacağına dair mantıklı bir döküm görmek için okumaya devam edin.

Devrim mi, evrim mi?

Yerel depolama veya localStorage veya DOM depolama veya web depolama (bu isimleri uydurmuyorum; hepsi kullanımda ve hepsi aynı şeye atıfta bulunuyor) 2012'de popüler tarayıcılar arasında “HTML5” olarak gerçek dünyada benimsendi. özellik". Çerezler için ilahi bir ikame gibi görünüyordu. Her zaman gereksiz verileri taşıyan şişirilmiş istekler ve boyut sınırlamaları için bir düzeltme. Bu sorunları “çözmesine” rağmen, çerezler için elma yerine elma değildir.

Ve biz gereksiz veriler konusuna gelmişken. Gereksiz şişkinliğe sahip olabilecek tek şeyin istekler olmadığını biliyor muydunuz, siteniz de olabilir. Neyse ki, bir çözüm var ve buna WP Sıfırlama deniyor.

WP Reset, birikmiş verileri ve/veya eklentileri (eklentiler, temalar, kullanıcılar, widget'lar, içerik vb.) sitenizden kaldırmak gibi şeyler yapmanızı sağlayacak bir dizi sıfırlama seçeneğiyle birlikte gelen bir eklentidir ve hatta tüm sitenizi silerek temizleyin. İnanılmaz, değil mi? Ama hepsi bu değil. Diğer özelliklerin yanı sıra, bu eklenti, bir tıklamayla istediğiniz kadar yükleyebileceğiniz eklenti ve tema koleksiyonlarının yanı sıra veritabanı anlık görüntüleri oluşturabilir. Kesinlikle incelemeye değer bir araç.

Ama şimdi localStorage hakkında konuşmaya geri dönelim.

Adından da anlaşılacağı gibi, veriler kullanıcının cihazında yerel olarak depolanır. Bu nedenle, ayak izini azaltan ve bize verileri kaydetmek için çok daha fazla alan sağlayan her HTTP isteğiyle ağ üzerinden aktarılması gerekmez. Bu "yalnızca yerel" paradigması, çerezler ve yerel depolama arasındaki en önemli farktır. Çerezler hem sunucu tarafında hem de istemci tarafında okunabilir, yerel depolama yalnızca istemci tarafında okunabilir. Hepsi bu kadar. Uygulamanız büyük ölçüde sunucu tarafı çerezleri okumaya ve buna dayalı içerik oluşturmaya bağlıysa, yerel depolamaya geçmek, uygulamayı yeniden yazmak anlamına gelir. Çerezleri yalnızca arayüzde hangi sekmenin etkin olduğu gibi ayarları depolamak için kullanıyorsanız, yerel depolama ideal bir alternatiftir.

Aldatıcı derecede benzer

Aşağıdaki tablo, çerezler, localStorage ve sessionStorage arasındaki farklar ve kullanım durumları hakkında net bir fikir vermektedir. İhtiyacınız olan cevabı almak ve oradan ayrılmak için hızlıca göz atabilirken, daha fazla ayrıntıya giren biraz uzun dipnotları okumanızı tavsiye ederim. Evet, meşgul olduğunuzu ve bir sonraki kedi videosunu izlemek istediğinizi biliyorum, ancak işler siyah beyaz değil, bu yüzden biraz daha derine inmek size iyi gelecektir.

Web depolama ve çerezlere daha derine inme

Yerel olarak depolayabileceğiniz maksimum veri miktarı tarayıcıya bağlıdır. Hiçbir garanti yoktur ve güvenli bir bahis istiyorsanız, 5 MB'ın altına, yaklaşık 2 MB'a gidin. Tarayıcınızda izin verilen maksimum yerel depolama boyutunu test etmek için bu kullanışlı aracı kullanın.

Kullanıcıların 3. taraf veya tüm çerezleri engellemesi yaygın bir senaryodur. Aynı kural yerel depolama için de geçerlidir. Hiçbir garanti yoktur ve uygulamanızın yerel depolamanın bulunmadığı bir ortamda çalışması (veya en azından bozulmaması) gerekir.

Tüm çerezlerin süresi bir noktada sona erer, ancak insanlar kullanım ömrünü birkaç yıl olarak belirleme eğilimindedir, bu da internet zamanında sonsuza kadar sürer. Öte yandan yerel depolamanın süresi asla dolmaz ve uygulama veya kullanıcı onu silene kadar kullanılabilir. Sekme veya pencere kapatıldığında oturum depolaması temizlenir - istisna yok.

“ Yalnızca dizeler kaydedilebilir de ne demek? Her zaman nesneleri kurtarırım!” JSON, nesneleri ve diğer veri türlerini bir dize biçiminde kaydetmenize olanak tanır. Dönüşüm, bilginiz olmadan okuma ve yazma üzerine yapılır. Tanımlama bilgileri ve yerel depolama ile başa çıkmak için sağlam bir kitaplık ile veri türleri hakkında düşünmek zorunda kalmayacaksınız. Ancak bu, yalnızca dizelerin yerel olarak desteklendiği gerçeğini değiştirmez.

Tüm tarayıcıların desteklediği tek bir istemci tarafı özelliği yoktur. Bu üzücü bir gerçek, ama yine de bir gerçek. Kullanabilir miyim'de belirli numaraları kontrol edebilirsiniz, ancak çerezler ve yerel depolama söz konusu olduğunda, onları desteklemeyen tüm tarayıcıları görmezden gelirim. Bunlar marjinaldir ve %1'in altındadır.

localStorage'a yalnızca sunucu tarafı işleme yoluyla erişemezsiniz. JS'ye de ihtiyacınız var. Kullanıcı bir sayfa istediğinde ve PHP onu oluşturmak için devreye girdiğinde (veya hangi sunucu tarafı dilini kullanırsanız kullanın), herhangi bir yerel veriye, oturuma veya kalıcıya erişiminiz olmaz. Sayfa yüklendiğinde ve JS başladığında, yerel verilere erişebilir ve ne gerekiyorsa yapabilirsiniz - kullanıcı arayüzünü ayarlayın veya yerel verileri sunucuya geri göndermek için AJAX'ı kullanın. Yani evet, yerel verileri sunucuya geri alabilirsiniz, ancak bir tanımlama bilgisi ile aynı şekilde ve aynı anda değil. Gereksinimlerinize bağlı olarak, çerezlerden yerel depolamaya geçiş söz konusu olduğunda bu bir anlaşma kırıcı olabilir, bu nedenle lütfen – önceden plan yapın!

Yerel depolama ile , istemci ve sunucu arasında hiçbir veri aktarılmaz (bunu açıkça yapan bir kod olmadığı sürece). Yük boyutunu azaltmak için harika. Çerezler ise ayarlanan etki alanındaki her istekte HTTP başlık alanı olarak aktarılır. Bu değiştirilemez veya seçici olarak kapatılamaz.

Kullanıcılar yerel verilere erişmemeli ve bunları doğrudan (uygulamanızın dışında) değiştirmemelidir, ancak bunu yaparken hiçbir şey onları durduramaz. Yerel olarak depolanan verileri düzenlemek için kullanılabilecek çok sayıda hata ayıklama aracı vardır. Bu nedenle yerel verilere güvenmeyin veya kullanıcının bunlara dokunmadığını varsaymayın. Her zaman daha kötüsünü varsayın.

Tanımlama bilgileri, ayarlayabileceğiniz bir "güvenli" özniteliğe sahip olsa da, bu, uygulamadan tarayıcıya geçiş sırasında tanımlama bilgisini korumaz. Yani hiç yoktan iyidir ama güvenli olmaktan uzaktır. Yalnızca istemci tarafı teknolojisi olan yerel depolama, HTTP veya HTTPS kullanıp kullanmadığınızı bilmez veya umursamaz. Güvenlik, verileri işleme biçiminizden gelmelidir. Kredi kartı numaraları veya parolalar gibi hassas verileri herhangi bir yerel depolama biçiminde saklamayın! Durmadan!

Başlamanız için biraz kod

Bu makale bir JavaScript web depolama öğreticisi olmayı amaçlamamaktadır, ancak sizi bu dertten kurtarmak için yerel depolama ile bir Merhaba Dünya örneği;

// store a value
localStorage.setItem( 'name', 'John' );

// retrieve a value
localStorage.getItem( 'name' );

// remove the value
localStorage.removeItem( 'name' );

// only string values can be stored so for objects, use JSON
var post = {
  title: 'Cookies are old',
  author: 'Gordan'
}
localStorage.setItem( 'post', JSON.stringify( post ) );

// and to retrieve
var post = JSON.parse( localStorage.getItem( 'post' ) );

Yukarıdaki kod çalışıyor ve mümkün olduğunca basit. Ancak, kullanmanızı tavsiye etmiyorum. Çerezlerde olduğu gibi, kimse onlarla etkileşim kurmak için document.cookies kullanmaz. Göz önünde bulundurulması gereken küçük tarayıcılar arası farklılıklar vardır ve bunlar yalnızca dizeleri sakladıklarından, her okuma ve yazma işleminde JSON ile dizelemeniz ve ayrıştırmanız gerekir. Bu nedenle, js-cookie gibi tanımlama bilgilerini işlememize yardımcı olması için küçük kitaplıklar kullanıyoruz. Aynı şey yerel depolama için de geçerlidir. Kodunuzla API arasına küçük bir soyutlama katmanı koymak, uzun vadede yardımcı olacaktır. store.js'yi tavsiye ederim. Bir süredir buralarda, tarayıcılar arası saçmalıklarla ve geri dönüşlerle ilgileniyor ve hatta özelliklerini genişleten kullanışlı eklentilere sahip. Bazı kodlama uygulamalarıyla ilgileniyorsanız, kendi kitaplığınızı oluşturun ve onu bir jQuery eklentisine dönüştürün.

Çerezler kötü, değil mi? Yeni bir şeye ihtiyacımız var!

Çerezler kötü değil. Onlarca yıldır amaçlarına hizmet ediyorlar ve yerel depolama "elma yerine elma" yerine geçmediği için bunu yapmaya devam edecekler. Ancak çerezler yaşlanma belirtileri gösteriyor. Bunun dışında, bazı tasarım eksiklikleri de yakın zamanda ortadan kalkmıyor. Yani, çerez yükü ve küçük maksimum yük boyutu ile etki alanındaki her isteği "kirletmek".

Yetersiz ve eski ya da değil, çerezler burada kalacak, bu nedenle yerel depolamanın yakın zamanda tamamen devralacağını düşünmeyin. Ancak bazı kullanım durumlarında yerel depolama şüphesiz daha iyi bir seçimdir.

İstemci tarafında depolamak için nadiren sunucuya aktarılan (çok fazla) verileriniz varsa ve bu veriler hassas hiçbir şey içermiyorsa – yerel depolamayı kullanmaya başlayın ! Bu tam olarak bunun için yaratıldı. Etki alanındaki tüm HTTP isteklerini daha hafif hale getirerek daha hızlı bir uygulama oluşturacak ve yeni bir şey kullanmanın o sıcacık bulanık hissini elde edeceksiniz.