Bu yazıda javaScript ile bir butona basında bastığımızda rastgele renk değiştirme işlemi yapacağız. Daha önceki yazılarımızda rastgele renk değiştirme nasıl yapılacağını açıklamıştık. Bu örnekteki fark ise değiştirdiğimiz rengi tarayıcının hafızasında tutup, sayfayı tekrar açtığımızda kayıtlı olan rengi tekrar butona vermek olacak.
Tarayıcıda veri tutmak için cookie yada localStore nesneleri kullanılır. Biz örneğimizde LocalStorege nesneni kullanacağız.
LocalStorage Nedir?
HTML5 yerel depolama, Web depolama uygulaması programlama arabiriminin bir bileşenidir. Web sayfalarının yerel olarak bir müşterinin Web tarayıcısında adlandırılmış anahtar / değer çiftleri olarak depoladığı bir yöntemdir. Çerezlere benzer şekilde, bu kaydedilmiş veriler mevcuttur; bir tarayıcı sekmesini kapattığınızda, geçerli bir web sitesinden ayrıldığınızda, bir tarayıcı sekmesinden çıkarken veya bir ana tarayıcıyı kapatsanız bile. Çerezlerin aksine, bu veriler elle gönderilmediği sürece uzak Web sunucusuna taşınmaz. HTML5 yerel depolaması yerel olarak Web tarayıcılarına entegre olduğundan, üçüncü taraf tarayıcı eklentileri olmadan kullanılabilir. HTML5 özelliklerinde açıklanmıştır.
Yerel depolama, çoğunlukla aynı etki alanındaki HTML sayfalarındaki verileri depolamak ve almak için kullanılır. Tarayıcıyı yeniden başlattıktan sonra bile, veriler aynı etki alanındaki tüm pencerelerden kurtarılabilir. Bu depolama türü, Web uygulamaları için sayısız seçenek sunar.
YouTube videosu:
Button ve LocalStorage Örneği:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tasarım Kodlama</title> <style> #btn{ display: block; position: absolute; top:100px; bottom:100px; left:100px; right:100px; width: calc(100% - 200px); height: calc(100% - 200px); font-size:3em; font-weight: 600; border:0; } </style> </head> <body> <button id="btn">Rastgele Renk Değiştirme</button> <script> const btn= document.querySelector("#btn"); btn.onclick=function(){ let kirmizi=Math.floor(Math.random()*255); let yesil=Math.floor(Math.random()*255); let mavi=Math.floor(Math.random()*255); let renk=`rgb(${kirmizi},${yesil},${mavi})`; btn.style.background=renk; //seçilen rengi tarayıcıya kaydedelim. localStorage.setItem('renk',renk);//renk olarak kaydettik } //renk adında kayıtlı değer varsa tarayıcıda onu çağıralım if(localStorage.getItem('renk')) { btn.style.background=localStorage.getItem('renk');//sayfa yüklendiğinde rengi butona aktarıyoruz. } </script> </body> </html> |
1 Yorum