İşlem Geçmişinizi Görüntüleyin: JavaScript'te Local Storage Kullanarak Alışveriş İşlem Geçmişi Oluşturma

Adı : İşlem Geçmişinizi Görüntüleyin: JavaScript'te Local Storage Kullanarak Alışveriş İşlem Geçmişi Oluşturma

JavaScript, tarayıcıda kullanıcı arayüzü etkileşimli ögeler yaratmak kadar, web uygulamalarında veriyi saklama ve işleme konusunda da çok güçlü bir dil. Bu yazıda, JavaScript kullanarak alışveriş işlem geçmişini saklamak için yerel depolama (localStorage) özelliğini kullanarak nasıl kolayca yapabileceğimizi ele alacağız.

LocalStorage, JavaScript'in bir API'sidir ve web sayfalarında sınırsız sayıda anahtar-değer çiftleri saklamak için kullanılabilir. Bu veriler, sayfayı kapatıp açtığımızda bile kaybolmaz bir şekilde tarayıcıda saklanır. Bu özellik, yerel depolama yöntemine ihtiyacı olan çeşitli uygulamalarda kullanılabilir.

Alışveriş işlem geçmişi için, her bir öğenin birkaç özelliği (örneğin ad, fiyat, miktar vb.) vardır. Bu bilgileri tutmak için, her bir öğenin bir anahtar-değer çifti olarak kaydedilebileceği bir dizi kullanabiliriz. İlk olarak, bu verileri saklamak için kullanacağımız bir dizin değişkeni oluşturacağız. Daha sonra, her bir alışveriş işlemi tamamlandığında, alınan öğelerin dizine eklenmesini sağlamak için bir fonksiyon yazacağız.

```javascript
let shoppingHistory = [];

function addToHistory(itemName, itemPrice) {
let newItem = {
name: itemName,
price: itemPrice,
date: new Date().toLocaleString() // Tarih ve saat
};

shoppingHistory.push(newItem);
localStorage.setItem('shopping-history', JSON.stringify(shoppingHistory));
}
```

Yukarıdaki kodda ilk satırda boş bir dizi oluşturuyoruz. addToHistory fonksiyonu, üç parametre alarak çalışır: öğenin adı, fiyatı ve tarih/saat. Bu bilgiler bir nesne (newItem) olarak toplanır ve dizine eklenir. Son olarak, localStorage.setItem metodunu kullanarak alışveriş geçmişimizi yerel depolama alanına kaydederiz.

Bu aşamada, kullanıcının alışveriş geçmişini görmek istediğinde sakladığımız verileri HTML'de göstermek için bir işlev oluşturmamız gerekiyor.

```javascript
function showHistory() {
let historyList = document.getElementById('shopping-history');

shoppingHistory = JSON.parse(localStorage.getItem('shopping-history'));

for (let i = 0; i < shoppingHistory.length; i++) {
let item = document.createElement('li');
item.innerHTML = `
${shoppingHistory[i].name}
${shoppingHistory[i].date}
${shoppingHistory[i].price} TL
`;
historyList.prepend(item);
}
}
```

Yukarıdaki kod, HTML'de göstermek için bir listeleme oluşturur. Bu kodda, local storage'dan alışveriş geçmişini çekip HTML listesi elementleri oluşturarak, alışveriş işlem geçmişini gösterme işlemini yapıyoruz.

Bundan sonra, HTML'de bir buton ve div elementi ekleyerek, kullanıcının alışveriş geçmişini görmesini sağlamak için her iki fonksiyonu da tetikleyelim.

```html
Alışveriş Geçmişini Göster

```

Yukarıdaki HTML kodu, showHistory fonksiyonunun çalışması için bir buton ekler ve alışveriş geçmişini göstermek için bir div oluşturur. Şimdi, butona tıkladığımızda, kullanıcının alışveriş geçmişi listesi, shopping-history id'ye sahip olan divde gösterilir.

Sıkça Sorulan Sorular (SSS)

S: Local storage bir çerez midir?
C: Hayır, yerel depolama ve çerezler farklıdır. Yerel depolama daha güçlü bir özelliğe sahiptir ve daha fazla veri saklamak için kullanılabilir.

S: Local storage'daki veriler ne kadar süre kalır?
C: Local storage verileri, tarayıcı önbelleği temizlendiği ya da verileri elle silmediğiniz sürece kalır.

S: localStorage veri depolama yöntemi şifreli mi?
C: Hayır, localStorage verileri şifrelemek için bir yöntem sağlamaz. Bu nedenle, hassas verilerin saklanması için kullanılmamalıdır.

S: localStorage verisi kullanıcı arayüzü için kullanılabilir mi?
C: Hayır, localStorage verileri sağdan soldan HTML ile birlikte kullanılmaz. Bu verilerin işlenmesi ve HTML içersinde gösterimi için JavaScript kullanılır.

S: Local storage, diğer tarayıclar için de geçerli midir?
C: Evet, localStorage tüm modern tarayıcılarda kullanılabilir."