JavaScript'te Local Storage kullanarak işlemleri kaydetmek için, verimli bir yöntem öğrenebilirsiniz Bu yöntem sayesinde, kullanıcıların tercihlerini kaydedebilir ve verileri kolayca erişebilirsiniz JavaScript ile web uygulamaları geliştirenler için bu konu oldukça önemlidir İsterseniz hemen bu yöntemi öğrenerek, kullanıcı dostu uygulamalar geliştirmeye başlayabilirsiniz!

JavaScript'in en önemli özelliklerinden biri, kullanıcılar sayfadan çıktığında ya da yeniden sayfaya girip, sayfayı kapatıp açtıklarında kaydedildiğinde verinin korunmasıdır. Bu özellik sayesinde kullanıcıların yarım kalan işlemlerine devam edebilmelerini sağlar. Fakat bu işlemler sunucu tarafında depolanmaz. Bu nedenle, her seferinde sayfayı yeniden yüklemek zorunda kalınır. Bu nedenle, Local Storage kullanarak işlemleri depolayabilir ve devam ettirmek istediğimiz yerden devam edebiliriz.

Local Storage tarayıcıda sınırlı miktarda veri depolama özelliği sunar. Local Storage, 5-10 megabayt veri depolama kapasitesine sahip olan bir tarayıcı özelliğidir. Bu kapasite sayesinde verileri koruyabiliriz. Local Storage kullanarak veri depolama işlemini gerçekleştirdiğimizde veriler tarayıcının belleğinde saklanır. Bu nedenle, kullanıcının işlem yapacağı bilgisayara erişim sağlanmalıdır.

Local Storage Nedir?

Local Storage, web tarayıcısı üzerinde veri depolamak için kullanılan bir API'dir. Bu API sayesinde, internet bağlantısı olmadan da kullanıcının tarayıcısında veriler saklanabilir.

Local Storage'ın kullanım amaçları, kullanıcılara daha iyi bir gezinme deneyimi sunmak için kullanılır. Örneğin, alışveriş sitelerinde kullanıcının sepeti kaybolmadan saklanabilir veya kullanıcının tercih ettiği dil ayarları kaydedilebilir.

Local Storage, HTML5 ile birlikte kullanılmaya başlanmıştır ve tarayıcılar tarafından desteklenmektedir. Kullanıcıların güvenliği için bu veriler sadece kendi tarayıcılarında saklanmaktadır ve diğer sitelerin bu verilere erişimi yoktur.

Local Storage, tarayıcılar için oldukça kullanışlı ve basit bir API'dir. Kullanıcıların hafıza kaybı yaşamadan web siteleri üzerindeki işlemlerine devam etmelerine olanak sağlar.

Kullanımı Nasıldır?

Local Storage, JavaScript ile kullanılan bir özelliktir ve web sayfasında açık olan sayfalar arasında veri saklamanıza olanak tanır. Local Storage, cookies'den farklı olarak herhangi bir veri boyut kısıtlamasına sahip değildir ve sunucu tarafında işlem gerektirmediğinden daha hızlı bir çözümdür.

Local Storage'ı kullanarak veri saklamak oldukça kolaydır. İlk adım, localStorage nesnesiyle veri depolamak istediğimiz değerin anahtarını atamaktır. Bunu yapmak için setItem() fonksiyonu kullanılabilir. Bu fonksiyon, iki parametre alır: anahtar ve değer.

Örneğin, aşağıdaki kodla localStorage'ta 'username' anahtarlı bir veri saklanır:

```localStorage.setItem('username', 'John Doe');```

'username' anahtarlı veriyi almak için getItem() fonksiyonunu kullanabiliriz:

```localStorage.getItem('username');```

Bu fonksiyon, 'John Doe' değerini döndürecektir.

Local Storage'dan bir veriyi silmek için removeItem() fonksiyonu kullanılabilir. Bu fonksiyon, sadece silmek istediğiniz verinin anahtarını alır. Örneğin:

```localStorage.removeItem('username');```

Bu kod, 'username' anahtarlı veriyi Local Storage'dan siler.

Local Storage birçok farklı senaryoda kullanılabilir. Örneğin, web sayfanızın kullanıcı adı gibi bazı bilgileri saklaması gerektiğinde Local Storage ideal bir çözümdür. Bunun dışında, alışveriş sepetleri ve benzeri veriler gibi diğer senaryolarda da kullanılabilir.

Değer Atama ve Alma

Local Storage'a değer atamak ve almak için kullanılabilecek fonksiyonlar oldukça basittir. Bu fonksiyonlar sayesinde, tek bir satırda veri atama ve alma işlemini gerçekleştirebilirsiniz. Local Storage'a veri atamak için, setItem() fonksiyonu kullanılır. Bu fonksiyon, iki parametre alır: bir isim ve bir değer. İsim, verilerin hangi anahtar altında saklanacağını belirtirken, değer ise saklanacak olan verinin kendisidir.

setItem() fonksiyonu aşağıdaki gibi kullanılır:

localStorage.setItem('anahtar', 'değer');

Local Storage'dan veri almak için ise, getItem() fonksiyonu kullanılır. Bu fonksiyon da yine iki parametre alır: bir anahtar ve bir değer. Bu parametreler, setItem() fonksiyonunda olduğu gibi aynı amaçlar için kullanılır.

getItem() fonksiyonu aşağıdaki gibi kullanılır:

localStorage.getItem('anahtar');

Bu fonksiyonların kullanımı oldukça kolaydır ve Local Storage'ın yönetimi için gereklidir. Local Storage, tarayıcıya özgü bir teknolojidir ve bu nedenle herhangi bir sunucuya bağlı değildir. Bu da, verilerin tarayıcıda saklanmasını sağlar ve bu verilere herhangi bir zamanda erişebilirsiniz.

setItem()

Local Storage kullanarak veri saklamak, web uygulamalarında oldukça yaygın bir yöntemdir. Veriler, browser'ın hafızasında saklanır ve sonraki ziyaretlerde de erişilebilir hale gelir. Local Storage'a değer atamak için kullanılabilecek fonksiyon setItem() fonksiyonudur.

Bu fonksiyon, iki parametre alır. İlk parametre, verinin anahtarını belirtirken, ikinci parametre ise değerini belirtir. Örneğin:

```localStorage.setItem('username', 'John');```

Bu kod, Local Storage'a 'username' anahtarına sahip veriyi 'John' adlı değerle kaydedecektir. Veriyi almak için ise getItem() fonksiyonu kullanılır. Bu fonksiyon da bir parametre alır: anahtar.

```const username = localStorage.getItem('username');```

Bu kod, 'username' anahtarına sahip veriyi alma işlemini gerçekleştirir. Eğer bu anahtara sahip bir veri yoksa, getItem() fonksiyonu null döndürecektir. Değerleri Local Storage'dan silmek için removeItem() fonksiyonu kullanılır. removeItem() fonksiyonu da tek parametre alır: anahtar.

```localStorage.removeItem('username');```

Bu kod, 'username' anahtarına sahip veriyi Local Storage'dan siler.

setItem() fonksiyonunun yanı sıra, Local Storage'a değer atamak için kullanılabilen bir diğer fonksiyon da setItem() fonksiyonudur. Bu fonksiyon, bir nesneyi Local Storage'a veri olarak kaydeder. Örneğin:

```const user = { name: 'John', age: 30, city: 'New York'};

localStorage.setItem('user', JSON.stringify(user));```

Bu kod, user adlı nesneyi JSON formatında Local Storage'a kaydeder. Veriyi almak için ise getItem() fonksiyonu kullanılırken, JSON.parse() fonksiyonu da kullanılmalıdır.

```const user = JSON.parse(localStorage.getItem('user'));```

Bu kod, Local Storage'dan 'user' anahtarına sahip veriyi alır ve JSON.parse() fonksiyonu sayesinde nesne formatına çevirir. setItem() fonksiyonunun kullanımı oldukça basittir ve web uygulamalarında sıklıkla kullanılır.

getItem()

Local Storage'dan değer almak için getItem() fonksiyonu kullanılır. Bu fonksiyon, Local Storage içinde belirtilen anahtar değere karşılık gelen değeri döndürür.

Aşağıdaki örnekte, Local Storage'dan "kullaniciAdi" anahtarına karşılık gelen değer alınmaktadır:

var kullaniciAdi = localStorage.getItem("kullaniciAdi");

Bu örnekte, getItem() fonksiyonu "kullaniciAdi" anahtarına karşılık gelen değeri döndürür ve bu değer "kullaniciAdi" değişkenine atanır. Bu değişken daha sonra başka bir amaçla kullanılabilir.

Değer Silme

Local Storage'dan veri silmek için kullanılabilecek iki farklı fonksiyon bulunmaktadır. Bunlar removeItem() ve clear() fonksiyonlarıdır.

Bu fonksiyon, belirtilen anahtarı ve ona bağlı değeri Local Storage'dan siler. Kullanımı oldukça basittir. Örneğin, "ad" adlı anahtara sahip bir veriyi silmek için aşağıdaki kod kullanılabilir:

localStorage.removeItem("ad");

Bu kod, "ad" anahtarına sahip veriyi Local Storage'dan siler.

Bu fonksiyon, Local Storage'daki tüm verileri siler. Kullanımı da oldukça basittir. Sadece aşağıdaki kod satırını kullanmanız yeterlidir:

localStorage.clear();

Bu kod, Local Storage'daki tüm verileri siler. Ancak bu fonksiyonun dikkatli kullanılması gerekir çünkü bir kere çağrıldığında geri dönüşü olmayan bir işlem yapmaktadır.

Örnek Uygulama

Local Storage, web sayfalarında kullanıcı verilerini yerel olarak depolamak için kullanılan bir mekanizmadır. Bu sayede, tarayıcı kapatılıp tekrar açıldığında, kullanıcının daha önce yaptığı işlemler kaydedilebilir. Örneğin, bir kullanıcının alışveriş sepetine eklediği ürünler, tarayıcı kapatılsa bile bir sonraki ziyaretinde sepetine ekli kalabilir.

Basit bir alışveriş sepeti uygulaması oluşturmak için Local Storage kullanabiliriz. Öncelikle, her ürünün adı, fiyatı ve stok bilgisi gibi bilgilerini bir obje içinde tutmalıyız. Ardından, bu objeleri bir dizi halinde saklayabiliriz.

Sepete ürün eklemek için, kullanıcının seçtiği ürünün bilgilerini alıp, bu bilgileri bir objeye ekleyebiliriz. Daha sonra, bu objeyi diziye ekleyerek sepete ürünü eklemiş oluruz. Bu işlemi yaparken, dizimizi Local Storage'a kaydederek, kullanıcının sepeti sonraki ziyaretlerinde de kaybolmaz.

Sepetten ürün silmek için ise, bir fonksiyon oluşturup bu fonksiyona silinecek ürünün adını gönderebiliriz. Fonksiyonumuz bu ürünü diziden silecek ve güncel verileri Local Storage'a kaydedecektir.

Son olarak, kullanıcının sepetini görmesi için bir fonksiyon oluşturup, dizimizdeki ürünleri görsel olarak sayfada gösteren bir liste oluşturabiliriz. Bu şekilde, kullanıcının sepetindeki ürünler Local Storage'tan alınarak her zaman güncel olarak gösterilebilir.

Ürünlerin Eklenmesi ve Silinmesi

Alışveriş sepeti uygulamasında ürünlerin eklenmesi ve silinmesi işlemleri Local Storage kullanarak kolayca yapılabilir. Sepete herhangi bir ürün eklemek için öncelikle ürünle ilgili bazı bilgileri almak gerekiyor. Bu bilgileri bir obje içinde toplayıp, Local Storage'a kaydedebiliriz. Bunun için setItem() fonksiyonunu kullanabiliriz. Örneğin:

Bu bilgileri bir obje içinde topladıktan sonra Local Storage'a kaydedebiliriz:

localStorage.setItem("urunler", JSON.stringify({    "Masa": {        "fiyat": "500 TL",        "adet": "1"    }}));

Bu şekilde, bir ürünü Local Storage'a kaydettik. Ürünü sepette göstermek için Local Storage'tan bu verileri alıp listelememiz gerekiyor. getItem() fonksiyonu kullanarak ürünlerimizi alabiliriz:

var urunler = JSON.parse(localStorage.getItem("urunler"));

Eklenen ürünlerin listelenmesi işlemi tamamlandıktan sonra, sepetten bir ürün silmek istediğimizde Local Storage'dan bu ürünü kaldırmamız gerekiyor. Bunun için removeItem() fonksiyonunu kullanabiliriz. Sepetten bir ürünü silmek için şöyle bir kod yazabiliriz:

localStorage.removeItem("urunler");

Bu şekilde Local Storage'dan sepetimizdeki bir ürünü kaldırmış olduk. Alışveriş sepeti uygulamamızı Local Storage kullanarak tamamlamış olduk.

Sepetin Gösterilmesi

Alışveriş sepetindeki ürünlerin Local Storage'tan alındıktan sonra sayfada gösterilmesi oldukça kolaydır. İlk olarak, sayfa yüklendiğinde Local Storage'tan sepet verileri alınmalıdır. Daha sonra, alınan bu veriler kullanılarak sayfa üzerinde sepet gösterilmelidir.

Bunun için, öncelikle sepetin gösterileceği bir bölüm oluşturmak gerekiyor. Bunun için bir

(sıralı olmayan liste) elementi kullanabiliriz. Bu elementin içine, sepet verileri dinamik olarak eklenebilir.

Kod	Açıklama
<ul id="sepet"></ul>	Sepetin gösterileceği elementi oluşturma

Bu kod, sepetin gösterileceği boş bir

elementi oluşturur ve "sepet" id'siyle tanımlar. Sonrasında, JavaScript kodu ile bu elemente dinamik olarak sepet ürünleri eklenir.

Örneğin, aşağıdaki kod sepetten bir ürünün silindiği durumda, sepetin güncellenmesini sağlar:

Kod	Açıklama
var sepet = JSON.parse(localStorage.getItem("sepet"));	Local Storage'tan sepet verilerini alır
var sepetListesi = document.getElementById("sepet"); sepetListesi.innerHTML = ""; for(var i=0; i<sepet.length; i++){ var li = document.createElement("li"); li.appendChild(document.createTextNode(sepet[i].ad)); sepetListesi.appendChild(li); }	Sepet verilerini elementine ekler ve sayfada gösterir

Bu kodda, öncelikle Local Storage'tan sepet verileri alınır ve "sepet" id'si ile tanımlanmış olan

elementi sepetListesi değişkenine atanır. Daha sonra, sepetListesi elementinin innerHTML özelliği boşaltılır ve for döngüsü ile sepet ürünleri
• (sıralı olmayan liste elemanı) elementi olarak oluşturularak
  elementine eklenir.

  Bu şekilde, Local Storage'ta kaydedilen sepet verilerini sayfada gösterebilir ve kullanıcının sepetindeki ürünleri görebilirsiniz.