JavaScript'te Local Storage Kullanarak Alışveriş İşlem Geçmişi Oluşturmak için gösterdiğimiz adımları takip ederek işlem geçmişinizi görüntüleyin Bu yazıda Local Storage kullanarak e-ticaret işlemlerinizin takibini yapmanızı sağlayacak kod bloklarını paylaştık

Web siteleri ve uygulamaları üzerinde alışveriş yapan kullanıcılar, yaptıkları işlemlerin detaylarını daha sonra görmek isteyebilirler. Bu noktada, kullanıcıların önceki işlemlerine kolayca erişebilmeleri için bir işlem geçmişi oluşturulabilir. Bu yazıda, Local Storage kullanarak alışveriş işlem geçmişi oluşturmak ve görüntülemek için nasıl bir JavaScript kodu yazılacağı açıklanıyor.

Local Storage, web sayfalarında veri depolamak için kullanılan bir mekanizmadır. Local Storage, verilerin düzenli bir şekilde tutulmasını ve kullanışlı bir şekilde görüntülenmesini sağlayarak kullanıcılara zaman kazandıran bir araçtır. Kullanıcı verilerini kaydetmek ve daha sonra kullanıcıların işlemlerini göstermek için Local Storage kullanabilirsiniz. Local Storage'a veri eklemek için setItem() yöntemi kullanılır. Local Storage'daki verilere getItem() ile ulaşılarak, işlemler görüntülenebilir. İşlem geçmişini temizlemek için ise Local Storage kullanımını bitiren removeItem() yöntemi kullanılabilir.

Local Storage Nedir?

Web sayfalarında veri depolama işlemi, Local Storage mekanizması sayesinde gerçekleştirilir. Bu sayede, herhangi bir sunucu bağlantısı olmadan veriler tarayıcı tarafında saklanabilir ve ileride kullanılabilir. Local Storage, JavaScript ile iletişim kurarak verileri yönetmektedir. Web sayfalarında kullanıcıya özel verilerin depolanması veya uygulamaların ayarlarının saklanılması gibi birçok amaç için kullanışlıdır. Ayrıca, Local Storage'da depolanan veriler sürekli olarak kullanılabilir ve oturum sonrası bile durmaktadır. Bu nedenle, zaman kazanımı sağlar ve yüksek kullanım kolaylığına sahiptir.

Local Storage Kullanmanın Avantajları Nelerdir?

Local Storage, kullanıcıların web üzerindeki verilerini depolayabilmesine izin veren ve bu verilere istenildiği zaman erişilebilmesini sağlayan bir araçtır. Bu sayede, kullanıcılara zaman kazandırabilirsiniz. Örneğin, bir web sitesi kullanılarak alışveriş yapılırken, bir kullanıcının alışveriş işlemleri ve ödemeleri için tekrar tekrar veri girmesi gerekmez. Bu işlemler saklanabilir ve daha sonradan görüntülenebilir veya düzenlenebilir.

Local Storage ayrıca, verilerin düzgün bir şekilde tutulmasını sağlar. Veriler, bir anahtar-değer çifti olarak saklanabilir ve daha sonra JavaScript kodu kullanarak bu veriler çekilebilir. Bu sayede, verilerin düzenli bir şekilde tutulması ve saklanmış verilerin hızlı bir şekilde görüntülenebilmesi mümkündür. Bu kullanışlı ve güçlü bir araçtır.

Local Storage Nasıl Kullanılır?

Local Storage kullanarak web sayfanızda veri saklamak çok kolaydır. JavaScript kodu kullanarak Local Storage'a veri kaydı yapabilirsiniz. Bu veriler daha sonra kullanıcı işlemlerini göstermek için kullanılabilir.

Veri kaynağı, setItem() yöntemiyle yapılır. Bu yöntem, iki parametre alır: anahtar ve veri. Anahtar, depolanan verilere bir isim verir. Veri ise kullanıcıya sunulacak veridir. Örneğin:

localStorage.setItem("isim", "Emre");

Bu örnekte "isim" anahtar kelimesiyle "Emre" verisi depolanmıştır.

Local Storage'da saklanan verilere ulaşmak ve işlemleri göstermek için getItem() yöntemi kullanılır. getItem(), sadece anahtar kelime alır ve depolanan veriyi geri döndürür. Örneğin:

localStorage.getItem("isim");	Emre

Bu örnekte getItem() yöntemi "isim" kelimesine bakar ve varsa geri döndürür. Bu şekilde kullanıcıların işlemleri her zaman saklanabilir ve daha sonra görüntülenebilir.

Local Storage'a Veri Nasıl Eklenebilir?

Local Storage'a veri eklemek için JavaScript kodu kullanarak setItem() yöntemi kullanılır. Bu yöntem, Local Storage için bir anahtar-değer çifti belirler. Anahtar, veriye erişmek için kullanılırken, değer asıl veriyi temsil eder. Örneğin, bir ürünün adını ve fiyatını Local Storage'a eklemek için şu şekilde bir kod kullanılabilir:

```javascriptlocalStorage.setItem("ürün1", JSON.stringify({ ad: "Masa", fiyat: 200 }));```

Bu kod, "ürün1" anahtarını kullanarak bir JSON nesnesi ekler. JSON.stringify() yöntemi, JavaScript nesnesini bir JSON dizgisine dönüştürür. Bu sayede veri Local Storage'a kaydedilebilir.

setItem() yöntemi, Local Storage'a birkaç farklı veri türü ekleyebilir. String, sayı ve boolean verileri setItem() yöntemi ile eklenebilir. Ancak, setItem() yöntemi nesne veya dizi gibi karmaşık veri tiplerini kaydedemez. Böyle bir durumda, JSON.stringify() yöntemi kullanarak veriyi önce bir JSON dizgisine çevirmek gerekmektedir.

Birden fazla veri eklemek için, setItem() yöntemi defalarca çağrılabilir. Her bir çağrıda, bir anahtar-değer çifti belirlenir ve Local Storage'a eklenir.

```javascriptlocalStorage.setItem("ürün1", JSON.stringify({ ad: "Masa", fiyat: 200 }));localStorage.setItem("ürün2", JSON.stringify({ ad: "Sandalye", fiyat: 100 }));localStorage.setItem("ürün3", JSON.stringify({ ad: "Koltuk", fiyat: 500 }));```

Bu kod, üç farklı ürünün isimlerini ve fiyatlarını Local Storage'a ekler.

Verileri güncellemek için, setItem() yöntemi yeniden kullanılabilir. Anahtar aynı kalırken, değer değiştirilir.

```javascriptlocalStorage.setItem("ürün1", JSON.stringify({ ad: "Masa", fiyat: 250 }));```

Bu kod, "ürün1" anahtarına sahip değeri 250 olan yeni bir JSON nesnesi ekler.

Local Storage'dan veri silmek için, removeItem() yöntemi kullanılır. Bu yöntem, belirtilen anahtar-değer çiftini Local Storage'dan kaldırır.

```javascriptlocalStorage.removeItem("ürün1");```

Bu kod, "ürün1" anahtarına sahip veriyi Local Storage'dan kaldırır.

Local Storage'daki Veriler Nasıl Okunur ve Gösterilir?

Local Storage'a eklenmiş verileri almak ve görüntülemek için getItem() fonksiyonu kullanılır. Bu fonksiyon, ismi verilen anahtar kelimeye karşılık gelen değeri alır ve bu değeri string formatında döndürür.

Örneğin, bir kullanıcının alışveriş işlem geçmişi Local Storage'a kaydedilmişse, getItem() fonksiyonu kullanarak bu verilere erişebilirsiniz. Örneğin, "transactionHistory" anahtar kelimesine sahip verilere erişmek için aşağıdaki gibi bir kod kullanabilirsiniz:

```javascriptvar transactionHistory = localStorage.getItem("transactionHistory");```

Daha sonra, transactionHistory değişkenine atanan değer string formatında olduğu için, bu verileri işlemek için JSON.parse() kullanabilirsiniz. Örneğin, bir tablo içinde işlem geçmişini görüntülemek istiyorsanız, aşağıdaki gibi bir kod yazabilirsiniz:

```javascriptvar transactionHistory = localStorage.getItem("transactionHistory");var table = document.createElement('table');var tr1 = document.createElement('tr');var th1 = document.createElement('th');var th2 = document.createElement('th');th1.innerHTML = 'Tarih';th2.innerHTML = 'Miktar';tr1.appendChild(th1);tr1.appendChild(th2);table.appendChild(tr1);

var data = JSON.parse(transactionHistory);for (var i=0; i

document.body.appendChild(table);```

Bu kod, Local Storage'dan transactionHistory verilerini alır, JSON.parse() kullanarak bu verilere erişir ve daha sonra bir HTML tablosu içinde işlem geçmişini görüntüler.

Alışveriş İşlem Geçmişi Nasıl Oluşturulur?

Alışveriş işlem geçmişi oluşturmak oldukça kolaydır. İlk olarak, bir HTML formu oluşturmanız gerekiyor. Bu form, kullanıcının tercih ettiği ürün adı, fiyatı ve miktarı gibi verileri toplayacak. Bu verileri toplamak için, birkaç input etiketi (input tag) kullanmanız yeterlidir.

Etiket	Açıklama
input type="text" name="productName"	Kullanıcının seçtiği ürünün adını tutar
input type="number" name="quantity"	Kullanıcının seçtiği ürünün miktarını tutar
input type="number" name="price"	Kullanıcının seçtiği ürünün fiyatını tutar

Bu etiketler sayesinde, kullanıcının seçtiği ürüne ait bilgileri toplayabileceğiz.

Ardından, JavaScript kodu yazarak bu verileri Local Storage'a kaydedebiliriz. Bunun için, kaydedilecek verileri bir obje içinde tutmanız ve setItem() yöntemini kullanmanız gerekiyor. Örneğin:

var product = {    name: productName,    quantity: quantity,    price: price};localStorage.setItem('product', JSON.stringify(product));

Bu kod, Local Storage'a kaydedilecek ürünün adı, miktarı ve fiyatını obje içinde toplar ve setItem() yöntemi ile kaydeder. Kaydedilecek verileri JSON.stringify metodu ile bir string haline getirdiğimiz için, verileri alırken JSON.parse() metodu kullanmamız gerekiyor.

Son olarak, kullanıcının alışveriş işlem geçmişini göstermek için, Local Storage'dan verileri okuyup bir tablo içinde gösterebiliriz. Bu işlem için oluşturacağımız HTML dosyasında bir tablo oluşturmalıyız. Ayrıca, JavaScript kodu ile Local Storage'dan verileri okuyup tablonun içine eklemeliyiz:

var productHistory = JSON.parse(localStorage.getItem('product'));document.getElementById('productHistoryTable').innerHTML += '<tr><td>' + productHistory.name + '</td><td>' + productHistory.quantity + '</td><td>' + productHistory.price + '</td></tr>';

Bu kod, Local Storage'dan verileri okur ve tablonun sonuna, yeni bir satır olarak ekler.

Bu şekilde, kullanıcının alışveriş işlem geçmişini kolayca takip edebilir ve kaydedebilirsiniz.

İşlem Geçmişini Göstermek İçin Nasıl Bir Kullanıcı Arayüzü Tasarlanır?

Alışveriş işlem geçmişini oluşturduğunuzda veya kaydettiğinizde, bunu kullanıcılara göstermek ve onların siteyi daha rahat kullanmasını sağlamak önemlidir. İşlem geçmişini göstermek için tasarlanmış bir kullanıcı arayüzü ile, kullanıcılar geçmişlerini daha kolay bir şekilde görüntüleyebilirler, böylece gelecekteki işlemlerden faydalanabilirler. İşlem geçmişini göstermek için birkaç yol vardır, ancak en yaygın olanları CSS kullanarak tasarım oluşturma, HTML sayfasına bir div eklemek ve JavaScript kodu kullanarak verileri görüntülemektir.

Bir işlem geçmişi göstericisi tasarlarken, div öğesi kullanarak işlem geçmişini göstermek istediğimiz alana bir bölge belirleyebiliriz. Bu alana, örneğin tablo öğesi kullanarak işlem verilerini ekleyebiliriz. Bir CSS dosyası oluşturarak tasarımı özelleştirebilir ve görüntülenecek verilerin yerleştirilmesini kontrol edebilirsiniz. Ayrıca, kullanıcılara seçim yapma veya işlem geçmişini arama gibi işlevler de ekleyebilirsiniz.

JavaScript'in hızını ve işlevselliğini kullanarak, işlem geçmişini göstermek için değişik seçenekler de mevcuttur. Örneğin, önceki işlemlerin bir listesini gösteren bir menü oluşturabilir veya kullanıcıların tarih veya kategori gibi belirli kriterlere göre işlem geçmişini filtrelemesine izin verebilirsiniz. Ayrıca, kullanıcılara işlem geçmişlerini düzenleme veya silme seçeneği sunabilirsiniz.

İşlem geçmişi göstericilerinin tasarlanması, alışveriş sitelerinde veya şirketlerin web sitelerinde sıklıkla kullanılır. Bu, geçmişlerinde daha önceki işlemlerine kolayca erişebilmelerini ve gelecekte doğru kararlar almalarını sağlar. Doğru şekilde tasarlanan bir işlem geçmişi göstericisi, kullanıcı deneyimini önemli ölçüde artırabilir ve sitenizin veya şirketinizin güvenilirliğini de artırabilir.

İşlem Geçmişini Temizlemek İçin Nasıl Bir Kod Yazılır?

Alışveriş işlem geçmişini Local Storage kullanarak oluşturma konusunda oldukça bilgilendik. Ancak işlem geçmişindeki verilerin temizlenmesi de bir o kadar önemlidir. Bu sayede kullanıcılar istedikleri zaman işlem geçmişini düzenleyebilir veya sadece gereksiz olduğunu düşündükleri verileri temizleyebilirler. İşte bu noktada Local Storage'daki verileri kaldıran removeItem() yöntemleri devreye girer.

removeItem(), Local Storage'daki belirli bir anahtar tarafından depolanan verileri silmek için kullanılır. İşlem geçmişindeki her bir alışveriş için bir anahtar oluşturulduğu için, removeItem() yöntemi kullanarak istenmeyen anahtarları silmek mümkündür.

Örneğin, "removeItem('keyAdi')" yöntemi kullanılarak "keyAdi" anahtarlı veri silinebilir. Bu şekilde, kullanıcının istediği herhangi bir anahtarı kaldırması mümkündür. Ancak, tüm verileri silmek istiyorsanız, Clear() yöntemi kullanılabilinir.