Input Değerlerini Ön Belleğe Alma [ localStorage ]  Input Değerlerini Ön Belleğe Alma [ localStorage ] | Googleda Görüntüle

Input Değerlerini Ön Belleğe Alma [ localStorage ]
 BEĞEN
  YORUM YAP

WallpaperPlay | Ücretsiz HD Masaüstü ve Mobil Wallpaper Duvar Kağıdı

Bir form doldurma esnasında tarayıcının yanlışlıkla veya herhangi bir hata sonucu kapanması, ya da bir elektrik kesintisi durumunda, formda ki input değerlerinin silinmemesi ve korunması için güzel bir eklenti ile tanıştırıcam sizi.

Dilerseniz önce kodlarımızı görelim.

HTML



JAVASCRIPT

var inputstorage={
  save:function(e){
    $(e).keypress(function(a){
      var o=String.fromCharCode(a.keyCode);
      save=$(e).val(),
        save+=o,
        localStorage.setItem(e,save)
    })
  }
};

// For döngüsündeki "<" ibaresinde tırnakları siliniz.
$(document).ready(function(){
  for(i=0;i"<"localStorage.length;i++){
    var e=localStorage.key(i),
        a=localStorage.getItem(e);
    $(e).val(a)
  }
});

//Koruma altına alınacak inputlar
inputstorage.save(".test");

Koruma altına alacağımız input'un class ya da id'yi "inputstorage.save(".test");" (tırnaklar olmadan) javascript kodumuzun en altına ekliyoruz.

Butona tıklandığında koruma altına alınan içeriğimizin temizlenmesi için butona onclick="localStorage.clear()" komutunu vermemiz yeterlidir.

Demo için Buraya tıklayınız.

Etiketler

Yorumlar

Bu Konuya Ait 1 Onaylı Yorum Bulunuyor.

Emre Acar

Emre Acar

  1 yıl önce

Emre merhaba; oldukça sağlıklı bir yönteme benziyor, sanırım 5 MB'lık bir depolama limitimiz var diye biliyorum ancak bu hafızaya alınan değerleri ne kadar uzun saklıyor bilgin var mı ?

Emre Ceyhan

Emre Ceyhan | Admin

  1 yıl önce

Merhaba, Local storage yani yerel depolama durumu cookie gibi çalışır.Bazı farklarını söyleyecek olursak, Local Storage daha hızlı ve daha güvenlidir.Bunun hakkında bir makale yazacağım en kısa sürede.
Tarayıcı çerezlerini temizleyene kadar gitmezler.

Yorum Yap

CSS3 -webkit / -moz / -o Nedir ? CSS3 ve Tarayıcı İlişkisi

Belki daha önce karşılaşmız olabilirsiniz.Bazı CSS3 kodları birkaç defa aynı yazılıp baş...

  905   2 ay önce

CSS3 Geçiş Efektleri - Transition Nedir? Nasıl Kullanılır?

Merhaba arkadaşlar, çoğu sitelerde gördüğümüz daha yumuşak ve animasyonlu şekilde geçiş ...

  584   2 ay önce

3. İndir.com Mobil Uygulama Yarışması ABD'ye Götürüyor

İNDİR.COM MOBİL UYGULAMA YARIŞMASI ABD’ YE GÖTÜRÜYOR Geçtiğimiz ik...

  971   1 yıl önce

CSS [ text-transform:uppercase ] Karakter Sorunu Çözümü

Css'de metin (text) biçimlendirme özelliklerinden biri olan text-transform:uppercase parametresini...

  3424   1 yıl önce

isimsizler 3 gün önce demiş ki;


Sayın NEJDET ACAR, veri tabanı bağlantısınıda unutuyorsanız bırakın bu işleri kardes
Yoruma Git

ömer güzelyurt 1 ay önce demiş ki;


çok teşekkür ederim işime yaradı sağolsan :)
Yoruma Git

Mesut Hocaoglu 2 ay önce demiş ki;


İnternet ortamında " bu işin piriyim " diye geçinenlere nazaran kısa ve açıklayıcı anlatım...
Yoruma Git

Kutay Erten 2 ay önce demiş ki;


Kardeşim seni tebrik ediyorum bu kadar kısa bir kodu uzun uzun anlatmışşın , renk geçişleri...
Yoruma Git