HTML5 Web Depolama ile Alışveriş Sepeti Oluşturma

HTML5'in ortaya çıkmasıyla birlikte, birçok site JavaScript eklentisini ve kodlarını ses, video, coğrafi konum vb. gibi basit ve daha verimli HTML kodlarıyla değiştirebildi. HTML5 etiketleri, sayfa yükleme süresini ve site performansını artırırken geliştiricilerin işini çok daha kolay hale getirdi. Özellikle HTML5 web depolama, kullanıcıların tarayıcılarının bir sunucu kullanmadan kullanıcı verilerini depolamasına izin verdiği için oyunun kurallarını değiştirdi. Böylece web depolamanın oluşturulması, ön uç geliştiricilerin sunucu tarafı kodlamayı veya veritabanını bilmeden veya kullanmadan web sitelerinde daha fazlasını başarmalarına izin verdi.

Çevrimiçi e-ticaret web siteleri, kullanıcıların verilerini depolamak ve bir sayfadan diğerine aktarmak için ağırlıklı olarak PHP gibi sunucu tarafı dilleri kullanır. Node.js gibi JavaScript arka uç çerçevelerini kullanarak aynı hedefe ulaşabiliriz. Ancak bu eğitimde size adım adım HTML5 ve bazı küçük JavaScript kodları ile bir alışveriş sepetinin nasıl oluşturulacağını göstereceğiz. Bu eğitimdeki tekniklerin diğer kullanımları, kullanıcı tercihlerini, kullanıcının favori içeriğini, istek listelerini ve ad ve parola gibi kullanıcı ayarlarını web sitelerinde ve yerel mobil uygulamalarda bir veritabanı kullanmadan depolamak olacaktır.

Birçok yüksek trafikli web sitesi, performansı ve kullanılabilirliği optimize etmek için sunucu kümeleme, DNS yük dengeleyiciler, istemci tarafı ve sunucu tarafı önbelleğe alma, dağıtılmış veritabanları ve mikro hizmetler gibi karmaşık tekniklere güvenir. Aslında, dinamik web siteleri için en büyük zorluk, bir veritabanından veri almak ve bunları işlemek için PHP gibi bir sunucu tarafı dili kullanmaktır. Ancak, uzak veritabanı depolaması yalnızca makaleler ve kullanıcı kimlik bilgileri gibi temel web sitesi içeriği için kullanılmalıdır. Kullanıcı tercihleri ​​gibi özellikler, çerezlere benzer şekilde kullanıcının tarayıcısında saklanabilir. Benzer şekilde, yerel bir mobil uygulama oluşturduğunuzda, uygulamanızın hızını artırmak için yerel bir veritabanıyla birlikte HTML5 web depolama alanını kullanabilirsiniz. Bu nedenle, ön uç geliştiriciler olarak, geliştirmenin ilk aşamalarında uygulamalarımızda HTML5 web depolamanın gücünden yararlanmanın yollarını keşfetmemiz gerekiyor.

Büyük ölçekli bir sosyal web sitesi geliştiren bir ekibin parçasıydım ve HTML5 web depolama alanını yoğun bir şekilde kullandık. Örneğin, bir kullanıcı oturum açtığında, karma kullanıcı kimliğini bir HTML5 oturumunda saklarız ve bunu korumalı sayfalarda kullanıcının kimliğini doğrulamak için kullanırız. Bu özelliği aynı zamanda yeni sohbet mesajları, web sitesi mesajları ve yeni beslemeler gibi tüm yeni anlık bildirimleri depolamak ve bir sayfadan diğerine iletmek için de kullanıyoruz. Bir sosyal web sitesi yüksek trafik aldığında, yük dengeleme için sunucuya tamamen güvenmek işe yaramayabilir, bu nedenle sunucularınız yerine kullanıcının tarayıcısı tarafından ele alınabilecek görevleri ve verileri tanımlamanız gerekir.

proje geçmişi

Alışveriş sepeti, bir web sitesinin ziyaretçisinin ürün sayfalarını görüntülemesine ve sepetlerine ürün eklemesine olanak tanır. Ziyaretçi, tüm ürünlerini inceleyebilir ve sepetini güncelleyebilir (örneğin, ürün ekleme veya çıkarma). Bunu başarmak için, web sitesinin ziyaretçinin verilerini saklaması ve ziyaretçi ödeme sayfasına gidip bir satın alma işlemi yapana kadar bunları bir sayfadan diğerine geçirmesi gerekir. Veri depolama, sunucu tarafı dil veya istemci tarafı dil aracılığıyla yapılabilir. Sunucu taraflı bir dilde, sunucu veri depolamanın ağırlığını taşırken, istemci taraflı bir dilde ziyaretçinin bilgisayarı (masaüstü, tablet veya akıllı telefon) verileri depolar ve işler. Her yaklaşımın artıları ve eksileri vardır. Bu eğitimde, HTML5 ve JavaScript'e dayalı basit bir istemci tarafı yaklaşımına odaklanacağız.

Not : Bu öğreticiyi takip edebilmek için temel HTML5, CSS ve JavaScript bilgisi gereklidir.

Proje Dosyaları

Projenin kaynak dosyalarını indirmek için buraya tıklayın. Canlı bir demo da görebilirsiniz.

HTML5 Web Depolamasına Genel Bakış

HTML5 web depolama, web uygulamalarının, tıpkı çerezler gibi, tarayıcı oturumunda hayatta kalabilen değerleri tarayıcıda yerel olarak saklamasına olanak tanır. Her HTTP isteğiyle birlikte gönderilmesi gereken tanımlama bilgilerinin aksine, web depolama verileri hiçbir zaman sunucuya aktarılmaz; bu nedenle, web depolama, web performansında çerezlerden daha iyi performans gösterir. Ayrıca çerezler, alan başına yalnızca 4 KB veri depolamanıza izin verirken, web depolama alanı, alan başına en az 5 MB veri depolamanıza izin verir. Web depolama basit bir dizi gibi çalışır, anahtarları değerlerle eşler ve iki türü vardır:

• Oturum depolama
  Bu, verileri tarayıcı veya tarayıcı sekmesi kapatılana kadar kullanılabilir hale geldiği bir tarayıcı oturumunda depolar. Aynı pencereden açılan açılır pencereler, oturum depolamasını görebilir ve aynı pencere içindeki iframe'leri görebilir. Ancak, aynı kaynaktan (URL) birden çok pencere birbirinin oturum deposunu göremez.
• Yerel depolama
  Bu, verileri son kullanma tarihi olmayan web tarayıcısında depolar. Veriler, tarayıcı veya tarayıcı sekmeleri yeniden açıldığında veya kapatıldığında bile, aynı kökene (etki alanına) sahip tüm pencerelerde kullanılabilir.

Her iki depolama türü de şu anda tüm büyük web tarayıcılarında desteklenmektedir. Her iki tarayıcı da aynı etki alanını ziyaret etse bile depolama verilerini bir tarayıcıdan diğerine aktaramayacağınızı unutmayın.

Temel Bir Alışveriş Sepeti Oluşturun

Alışveriş sepetimizi oluşturmak için önce, öğeleri göstermek için basit bir sepet ve sepeti eklemek veya düzenlemek için basit bir form içeren bir HTML sayfası oluştururuz. Ardından, HTML web deposunu ve ardından JavaScript kodlamasını ekliyoruz. HTML5 yerel depolama etiketleri kullanmamıza rağmen, tüm adımlar HTML5 oturum depolaması ile aynıdır ve HTML5 oturum depolama etiketlerine uygulanabilir. Son olarak, jQuery kullanmak isteyenler için JavaScript koduna alternatif olarak bazı jQuery kodlarını gözden geçireceğiz.

Alışveriş Sepetine HTML5 Yerel Depolama Ekle

HTML sayfamız, harici JavaScript ve CSS etiketlerinin baş kısmında atıfta bulunulan temel bir sayfadır.

 <!doctype html> <html lang="en-US"> <head> <title>HTML5 Local Storage Project</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="rating" content="General"> <meta name="expires" content="never"> <meta name="language" content="English, EN"> <meta name="description" content="Shopping cart project with HTML5 and JavaScript"> <meta name="keywords" content="HTML5,CSS,JavaScript, html5 session storage, html5 local storage"> <meta name="author" content="dcwebmakers.com"> <script src="Storage.js"></script> <link rel="stylesheet" href="StorageStyle.css"> </head>

Sayfanın gövdesinde görünen HTML içeriği aşağıdadır:

 <form name="ShoppingList"> <fieldset> <legend>Shopping cart</legend> <label>Item: <input type="text" name="name"></label> <label>Quantity: <input type="text" name="data"></label> <input type="button" value="Save"> <input type="button" value="Update"> <input type="button" value="Delete"> </fieldset> <div> <h2>Shopping List</h2> <table></table> <label><input type="button" value="Clear"> * Delete all items</label> </div> </form>

Alışveriş Sepetine JavaScript Ekleme

Tarayıcı desteğini kontrol etmek ve depolama adı-değer çiftini gösteren tabloyu dinamik olarak oluşturmak için onload() olayında doShowAll() JavaScript işlevini oluşturup çağıracağız.

 <body onload="doShowAll()">

Alternatif olarak, bunu JavaScript koduna ekleyerek JavaScript onload olayını kullanabilirsiniz:

 window.load=doShowAll();

Veya bunu jQuery için kullanın:

 $( window ).load(function() { doShowAll(); });

CheckBrowser() işlevinde, tarayıcının HTML5 depolamayı destekleyip desteklemediğini kontrol etmek istiyoruz. Çoğu modern web tarayıcısı desteklediği için bu adımın gerekli olmayabileceğini unutmayın.

 /* =====> Checking browser support. //This step might not be required because most modern browsers do support HTML5. */ //Function below might be redundant. function CheckBrowser() { if ('localStorage' in window && window['localStorage'] !== null) { // We can use localStorage object to store data. return true; } else { return false; } }

doShowAll() içinde, CheckBrowser() işlevi önce tarayıcı desteğini değerlendirirse, sayfa yükleme sırasında alışveriş listesi için tabloyu dinamik olarak oluşturur. Aşağıda gösterildiği gibi, bir JavaScript döngüsü içinde yerel depolamada depolanan anahtar/değer çiftlerinin anahtarlarını (özellik adlarını) yineleyebilirsiniz. Bu yöntem, depolama değerine bağlı olarak, yerel depolamada depolanan anahtar/değer çiftini göstermek için tabloyu dinamik olarak doldurur.

 // Dynamically populate the table with shopping list items. //Step below can be done via PHP and AJAX, too. function doShowAll() { if (CheckBrowser()) { var key = ""; var list = "<tr><th>Item</th><th>Value</th></tr>\n"; var i = 0; //For a more advanced feature, you can set a cap on max items in the cart. for (i = 0; i <= localStorage.length-1; i++) { key = localStorage.key(i); list += "<tr><td>" + key + "</td>\n<td>" + localStorage.getItem(key) + "</td></tr>\n"; } //If no item exists in the cart. if (list == "<tr><th>Item</th><th>Value</th></tr>\n") { list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n"; } //Bind the data to HTML table. //You can use jQuery, too. document.getElementById('list').innerHTML = list; } else { alert('Cannot save shopping list as your browser does not support HTML 5'); } }

Not : Siz veya çerçeveniz, yeni DOM düğümleri oluşturmak ve olayları işlemek için tercih edilen bir yönteme sahip olacaksınız. Her şeyi net ve odaklı tutmak için, normalde üretim kodunda bundan kaçınmamıza rağmen , örneğimizde .innerHTML ve satır içi olay işleyicileri kullanılır.

İpucu: Verileri bağlamak için jQuery kullanmak istiyorsanız, sadece document.getElementById('list').innerHTML = list; ile değiştirebilirsiniz. $( ' $('#list').html()=list; .

Alışveriş Sepetini Çalıştırın ve Test Edin

Önceki iki bölümde, HTML başlığına kod ekledik ve alışveriş sepeti formuna ve sepete HTML ekledik. Ayrıca tarayıcı desteğini kontrol etmek ve sepeti sepetteki ürünlerle doldurmak için bir JavaScript işlevi oluşturduk. Sepet öğelerini doldururken JavaScript, değerleri bir veritabanı yerine HTML web deposundan alır. Bu bölümde, verilerin HTML5 depolama motoruna nasıl eklendiğini göstereceğiz. Yani, alışveriş sepetine yeni öğeler eklemek ve sepetteki mevcut bir öğeyi düzenlemek için JavaScript ile birlikte HTML5 yerel depolamayı kullanacağız.

Not : JavaScript kodlarına alternatif olarak jQuery kodunu göstermek için aşağıya ipuçları bölümleri ekledim.

Kullanıcı girdisini ve gönderimini yakalamak için ayrı bir HTML div öğesi oluşturacağız. Düğmeler için onClick olayına karşılık gelen JavaScript işlevini ekleyeceğiz.

 <input type="button" value="Save"> <input type="button" value="Update"> <input type="button" value="Delete">

Normal bir JavaScript nesnesine benzer şekilde localStorage nesnesindeki özellikleri ayarlayabilirsiniz. myProperty yerel depolama özelliğini myValue değerine nasıl ayarlayabileceğimize dair bir örnek:

 localStorage.myProperty="myValue";

Yerel depolama özelliğini şu şekilde silebilirsiniz:

 delete localStorage.myProperty;

Alternatif olarak, yerel depolamaya erişmek için aşağıdaki yöntemleri kullanabilirsiniz:

 localStorage.setItem('propertyName','value'); localStorage.getItem('propertyName'); localStorage.removeItem('propertyName');

Anahtar/değer çiftini kaydetmek için ilgili JavaScript nesnesinin değerini alın ve setItem yöntemini çağırın:

 function SaveItem() { var name = document.forms.ShoppingList.name.value; var data = document.forms.ShoppingList.data.value; localStorage.setItem(name, data); doShowAll(); }

Aşağıda SaveItem işlevi için jQuery alternatifi bulunmaktadır. İlk olarak, form girişlerine bir kimlik ekleyin:

 <label>Item: <input type="text" name="name"></label> <label>Quantity: <input type="text" name="data"></label>

Ardından, form girişlerini ID'ye göre seçin ve değerlerini alın. Aşağıda görebileceğiniz gibi, JavaScript'ten çok daha basittir:

 function SaveItem() { var name = $("#name").val(); var data = $("#data").val(); localStorage.setItem(name, data); doShowAll(); }

Alışveriş sepetindeki bir öğeyi güncellemek için, önce o öğenin anahtarının yerel depoda olup olmadığını kontrol etmeniz ve ardından aşağıda gösterildiği gibi değerini güncellemeniz gerekir:

 //Change an existing key-value in HTML5 storage. function ModifyItem() { var name1 = document.forms.ShoppingList.name.value; var data1 = document.forms.ShoppingList.data.value; //check if name1 is already exists //Check if key exists. if (localStorage.getItem(name1) !=null) { //update localStorage.setItem(name1,data1); document.forms.ShoppingList.data.value = localStorage.getItem(name1); } doShowAll(); }

Aşağıda jQuery alternatifi gösterilmektedir.

 function ModifyItem() { var name1 = $("#name").val(); var data1 = $("#data").val(); //Check if name already exists. //Check if key exists. if (localStorage.getItem(name1) !=null) { //update localStorage.setItem(name1,data1); var new_info=localStorage.getItem(name1); $("#data").val(new_info); } doShowAll(); }

Depodan bir öğeyi silmek için removeItem yöntemini kullanacağız.

 function RemoveItem() { var name=document.forms.ShoppingList.name.value; document.forms.ShoppingList.data.value=localStorage.removeItem(name); doShowAll(); }

İpucu: Önceki iki işleve benzer şekilde, RemoveItem işlevinde jQuery seçicilerini kullanabilirsiniz .

Yerel depolama için tüm yerel depolamayı temizlemenize izin veren başka bir yöntem daha vardır. “Clear” düğmesinin onClick olayında ClearAll() işlevini çağırıyoruz:

 <input type="button" value="Clear">

Yerel depolamayı temizlemek için aşağıda gösterildiği gibi clear yöntemini kullanıyoruz:

 function ClearAll() { localStorage.clear(); doShowAll(); }

Oturum Depolama

sessionStorage nesnesi, localStorage ile aynı şekilde çalışır. Bir oturumdan sonra verilerin süresinin dolması için yukarıdaki örneği sessionStorage nesnesiyle değiştirebilirsiniz. Kullanıcı tarayıcı penceresini kapattığında, depolama alanı temizlenecektir. Kısacası, localStorage ve sessionStorage API'leri aynıdır ve aşağıdaki yöntemleri kullanmanıza izin verir:

• setItem(key, value)
• getItem(key)
• removeItem(key)
• clear()
• key(index)
• length

Diziler ve Nesneler ile Alışveriş Sepetleri

HTML5 web depolama alanı yalnızca tek ad-değer depolamayı desteklediğinden, dizilerinizi veya nesnelerinizi tek bir dizeye dönüştürmek için JSON veya başka bir yöntem kullanmanız gerekir. Bir kategoriniz ve öğe alt kategorileriniz varsa veya müşteri bilgileri, ürün bilgileri vb. gibi birden fazla veri içeren bir alışveriş sepetiniz varsa, bir diziye veya nesneye ihtiyacınız olabilir. Dizinizi veya nesne öğelerinizi bir dizeye yerleştirmeniz yeterlidir. bunları web deposunda depolamak ve ardından başka bir sayfada göstermek için bir diziye patlatmak (veya bölmek) için. Üç grup bilgi içeren temel bir alışveriş sepeti örneğini inceleyelim: müşteri bilgisi, ürün bilgisi ve özel posta adresi. İlk olarak, nesneyi bir dizgeye dönüştürmek için JSON.stringify kullanıyoruz. Ardından, onu geri döndürmek için JSON.parse kullanırız.

İpucu : Anahtar adının her etki alanı için benzersiz olması gerektiğini unutmayın.

 //Customer info //You can use array in addition to object. var obj1 = { firstname: "John", lastname: "thomson" }; var cust = JSON.stringify(obj1); //Mailing info var obj2 = { state: "VA", city: "Arlington" }; var mail = JSON.stringify(obj2); //Item info var obj3 = { item: "milk", quantity: 2 }; var basket = JSON.stringify(obj3); //Next, push three strings into key-value of HTML5 storage. //Use JSON parse function below to convert string back into object or array. var New_cust=JSON.parse(cust);

Özet

Bu eğitimde, HTML5 web depolama ve JavaScript kullanarak adım adım alışveriş sepeti oluşturmayı öğrendik. JavaScript'e alternatif olarak jQuery'nin nasıl kullanılacağını gördük. Bir alışveriş sepetindeki dizileri ve nesneleri işlemek için stringify ve parse gibi JSON işlevlerini de tartıştık. Verileri bir JavaScript çok boyutlu dizisinde depolarken ürün kategorileri ve alt kategoriler eklemek gibi daha fazla özellik ekleyerek bu öğreticiyi geliştirebilirsiniz. Ayrıca, tüm JavaScript kodunu jQuery ile değiştirebilirsiniz.

Geliştiricilerin HTML5 web depolama ile başka neler başarabileceklerini ve web sitelerine başka hangi özellikleri ekleyebileceklerini gördük. Örneğin, bu öğreticiyi, bir veritabanı kullanmadan web sitelerinde ve yerel mobil uygulamalarda kullanıcı tercihlerini, favori içeriği, istek listelerini ve adlar ve parolalar gibi kullanıcı ayarlarını depolamak için kullanabilirsiniz.

Sonuç olarak, HTML5 web depolamayı uygularken göz önünde bulundurulması gereken birkaç konu:

• Bazı kullanıcılar, tarayıcının veri depolamasını engelleyen gizlilik ayarlarına sahip olabilir.
• Bazı kullanıcılar tarayıcılarını gizli modda kullanabilir.
• DNS sızdırma saldırıları, dizinler arası saldırılar ve hassas veri güvenliği ihlali gibi birkaç güvenlik sorununun farkında olun.

İlgili Okuma

• “Tarayıcı Depolama Sınırları ve Tahliye Kriterleri,” MDN web belgeleri, Mozilla
• “Web Depolama”, HTML Yaşam Standardı,
• WHATWG Blogu "HTML 5'te Bu Hafta"