Javascript LocalStorage düzenlemesi

Elimde şöyle bir kod mevcut;





Şöyle de bir javascript;





<script>

var swapStyleSheet = function (sheet) {

document.getElementById('pagestyle').setAttribute('href', sheet);

storebackground(sheet);

}



var storebackground = function (swapstylesheet) {

localStorage.setItem("sheetKey", swapstylesheet); //you need to give a key and value

}



var loadbackground = function () {

document.getElementById('pagestyle').setAttribute('href', localStorage.getItem('sheetKey'));

}



window.loadbackground();

</script>


Şu şekilde kullanımda sorunsuz şekilde çalışıyor.

Dark Style Sheet


CSS değiştiğinde diğer tüm kodlar önce eski css'i gösteriyor sonra yenisi geliyor bunda ise sanki hiç değişmemiş gibi yenisi gözüküyor ancak sorun şu ki bu kodu çalıştırdığımda tema seçene kadar site temasız hale dönüyor. Bunu default olarak nasıl ayalarız ne gibi bir kod eklemeliyiz?

Onload event'ında çalıştırılan method' taki localStorege'lı kısmı direkt olarak style2.css ile değiştirmeniz yeterli olur. Site açılır açılmaz localStorage'taki sheetKey boş olduğundan doğal olarak style yüklenmiyor. Alternatif olarak sheetKey property'sine "style2.css" setlenerek de problem çözülebilir.


Çözüm 1:


var loadbackground = function () {

document.getElementById('pagestyle').setAttribute('href', 'style2.css');

}



Çözüm 2: (