JavaScript için Yerel Depolama Nasıl Kullanılır

Bir yapılacaklar uygulaması oluşturmak genellikle JavaScript'te nasıl oluşturulacağını öğrendiğiniz ilk uygulamadır, ancak tüm bu uygulamalardaki sorun, sayfayı yeniden yüklediğinizde tüm yapılacaklar kaybolur.

Yine de basit bir çözüm var ve bu da yerel depolama alanını kullanmak. Yerel depolama ile ilgili iyi bir şey, bu veri bitlerini kullanıcının bilgisayarına kaydedebilmenizdir, böylece sayfayı yeniden yüklediklerinde, tüm todo'ları hala orada olacaklar ve verilerin saklanması söz konusu olduğunda yerel depolama aslında oldukça basittir. sayfada mevcut.

Yerel depolama nedir?

Yerel depolama alanı, HTML5 spesifikasyonunun bir parçası olan web depolama biriminin bir parçasıdır. Belirtimde veri depolamak için iki seçenek vardır:

• Yerel Depolama: son kullanma tarihi olmayan verileri depolar ve kullanacağımız budur çünkü yapılacaklarimizin sayfada mümkün olduğunca uzun süre kalmasını isteriz.
• Oturum Saklama: sadece bir oturum için veri kaydeder, böylece kullanıcı sekmeyi kapatır ve tekrar açarsa tüm verileri silinir.

Basit bir şekilde, tüm bu web depolama alanı, yerel / anahtar çiftlerini yerel olarak adlandırılan mağazadır ve çerezleri farklı olarak tarayıcınızı kapatsanız veya bilgisayarınızı kapatsanız bile bu veriler devam eder.

HTML

Bir yapılacaklar listesi hakkında düşünürsek, ihtiyacımız olan şey:

• Yapılacak işimizi yapmak için bir giriş.
• Yapmamızı eklemek için bir giriş düğmesi.
• Tüm yapılacaklar temizlemek için bir düğme.
• Yapılacaklar listelerinin liste öğelerine yerleştirileceği yer tutucu sırasız listesi.
• Son olarak, yapmak için boş bir giriş yapmaya çalıştığınızda bir uyarı göstermek için bir yer tutucu div'a ihtiyacımız var.

Yani HTML’imiz böyle bir şeye benzemeli:

  
      Clear All  
  
  

Oldukça standart bir yer tutucu HTML'si ve javascript ile tüm bunları dinamik içerikle doldurabiliriz.

Bu örnekte jQuery kullanacağımızdan, HTML belgenize de eklemelisiniz.

JavaScript

Basit bir yapılacaklar uygulamasının yapısını düşünürsek, yapmamız gereken ilk şey, kullanıcı ekleme düğmesine tıkladığında ve girişin boş bir değere sahip olup olmadığını kontrol etmektir:

$('#add').click( function() {var Description = $('#description').val();//if the to-do is emptyif($("#description").val() == '') {$('#alert').html("Warning! You left the to-do empty");$('#alert').fadeIn().delay(1000).fadeOut();return false;}

Tek yaptığımız, ekleme düğmesine bir kez tıklamak ve kullanıcının girişi bir şeyle doldurup doldurmadığını kontrol etmek için basit bir test yapmaktı. Değilse, uyarı divi söner ve 1000 ms için kalır ve sonra söner. Sonunda, tarayıcı, komut dosyasının geri kalanını okumadığı ve liste öğesini ekleyeceği için yanlış döndürüyoruz.

Yapmamız gereken bir sonraki şey, girişteki değerle bir liste öğesi eklemektir ve biz bunu hazırlayacağız, böylece kullanıcı bir yapılacaklar eklediğinde, her zaman listenin başına gidip o liste öğesini Yerel depolama, şöyle ki:

   // add the list item$('#todos').prepend("
" + Description + "
");// delete whatever is in the input$('#form')[0].reset();var todos = $('#todos').html();localStorage.setItem('todos', todos);return false;});

Gördüğünüz gibi oldukça standart jQuery ve yerel depolama söz konusu olduğunda bir anahtar ve bir değer kaydetmemiz gerekiyor. Anahtar, kendimiz için belirlediğimiz bir isim ve bu durumda 'todos' dedim ve daha sonra kaydetmek istediğimiz şeyi belirtmemiz gerekiyor ve bu durumda, todos unordered listesinin içine yerleştirilmiş olan tüm HTML'ler . Gördüğünüz gibi jQuery'yi kullanarak bunu yakaladık ve sonunda formun gönderilmemesi ve sayfamızın yeniden yüklenmemesi için yanlış döndük.

Bir sonraki adımımız, makinemizde zaten kayıtlı olan yerel depolama biriminde bir şey olup olmadığını kontrol etmektir ve eğer bunu yaparsak, bu sayfaya yerleştirmemiz gerekir. Bu nedenle, anahtarımızı todos olarak verdiğimiz için varlığını kontrol etmemiz gerekir:

// if we have something on local storage place thatif(localStorage.getItem('todos')) {$('#todos').html(localStorage.getItem('todos'));}

Kontrol etmek için basit bir ifade kullandık ve sonra yerel depolamada sahip olduğumuz şeyi aldık ve bunu yapılacaklar sırasız listenin HTML'si olarak yerleştirdik.

Basit uygulamamızı test ederseniz ve zaten çalıştığını gördüğümüz sayfayı yeniden yükledik ve geriye kalan tek şey, kullanıcının tüm yapılacakları temizlemek için seçtiği işlevi yaratmaktır; Bu olduğunda, tüm yerel depolama alanlarını temizleriz, değişikliklerin yürürlüğe girmesi için sayfayı yeniden yükler ve ardından URL’nin önündeki karma’yı önlemek için false değerini döndürür:

// clear all the local storage$('#clear').click( function() {window.localStorage.clear();location.reload();return false;});

Bu bitti ile bizim app tamamen çalışıyoruz. Tam kod şöyle görünür:

$('#add').click( function() {var Description = $('#description').val();if($("#description").val() == '') {$('#alert').html("Warning! You left the to-do empty");$('#alert').fadeIn().delay(1000).fadeOut();return false;}  $ ( '# Todos'). Başa getirebilir (" 
  "+ Açıklama +" 
  "); $ ('# form') [0] .reset (); var todos = $ ('# todos'). html (); localStorage.setItem ('todos', todos); false döndürür;}); if (localStorage.getItem ( 'todos')) {$('#todos').html(localStorage.getItem('todos'));}  $ ('# clear'). tıklatın (function () {window.localStorage.clear (); location.reload (); false;}); 

Tarayıcı desteği

Web depolama desteği, bir HTML5 spesifikasyonu için oldukça iyidir; tüm büyük tarayıcılar ve hatta IE8 tarafından desteklenmektedir, bu yüzden hala dikkatli olmanız gerekebilecek tek şey, hala destekliyorsanız IE7'dir.

Sonuç

Bunun gibi küçük uygulamalarda yerel depolama, veritabanlarının yerine geçebilir. Küçük miktarlardaki verilerin saklanması karmaşık olmamalıdır.

Verileri JavaScript’ten nasıl saklıyorsunuz? Çerezleri veya veritabanlarını yerel depolamaya mı tercih edersiniz? Yorumlarda bize bildirin.

Öne çıkan görsel / küçük resim, depolama resmi Shutterstock üzerinden.