0
Kayıt Ol

Javascript LocalStorage düzenlemesi +R10

6

●

81

  • 04-08-2021, 17:26:25
    #1
    Misafir
    Misafir
    Elimde şöyle bir kod mevcut;

    <link id="pagestyle" rel="stylesheet" type="text/css" href="style1.css">
    Şö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.onload = loadbackground();
</script>
    Şu şekilde kullanımda sorunsuz şekilde çalışıyor.
    <button onclick="swapStyleSheet('style2.css')">Dark Style Sheet</button>
    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?
  • Kabul Edilen Cevap
    • Anathory
      0 Beğeni
      Mesaja Git 
      <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 () {
      let sheetKey = localStorage.getItem('sheetKey');
      if (!sheetKey) {
           sheetKey = 'https://bootswatch.com/5/sketchy/bootstrap.min.css'
      }
      document.getElementById('pagestyle').setAttribute('href', sheetKey);
}

    window.onload = loadbackground();
</script>

      Altta localStorage'dan çekmeye devam etmiş, onu gözden kaçırmışız hocam deneyin bu şekilde düzelir
  • 04-08-2021, 17:47:02
    #2
    Anathory
    Anathory
    Sorununuz loadBackground'da saklı, bu fonksiyon localStorage'dan sheetKey'i çekiyor ama; ya yoksa? Bunun için burada ufak bir düzenleme yapıp eğer bu değer undefined ise default değeri yüklemesini sağlamalısınız.

       var loadbackground = function () {
       let sheetKey = localStorage.getItem('sheetKey');
       if (!sheetKey) {
            sheetKey = 'style1.css'
       }
       document.getElementById('pagestyle').setAttribute('href', localStorage.getItem('sheetKey'));
}
  • 04-08-2021, 18:01:48
    #3
    Misafir
    Misafir
    Anathory adlı üyeden alıntı: mesajı görüntüle
    Sorununuz loadBackground'da saklı, bu fonksiyon localStorage'dan sheetKey'i çekiyor ama; ya yoksa? Bunun için burada ufak bir düzenleme yapıp eğer bu değer undefined ise default değeri yüklemesini sağlamalısınız.

       var loadbackground = function () {
       let sheetKey = localStorage.getItem('sheetKey');
       if (!sheetKey) {
            sheetKey = 'style1.css'
       }
       document.getElementById('pagestyle').setAttribute('href', localStorage.getItem('sheetKey'));
}
    Verdiğiniz kodu şu şekilde düzenledim ancak sorun hala aynı hocam 

    <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 () {
      let sheetKey = localStorage.getItem('sheetKey');
      if (!sheetKey) {
           sheetKey = 'https://bootswatch.com/5/sketchy/bootstrap.min.css'
      }
      document.getElementById('pagestyle').setAttribute('href', localStorage.getItem('sheetKey'));
}

    window.onload = loadbackground();
</script>
  • 04-08-2021, 18:03:58
    #4
    Bu cevap, konu sahibi tarafından kabul edilebilir bir cevap olarak işaretlendi.
    Anathory
    Anathory 
    <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 () {
      let sheetKey = localStorage.getItem('sheetKey');
      if (!sheetKey) {
           sheetKey = 'https://bootswatch.com/5/sketchy/bootstrap.min.css'
      }
      document.getElementById('pagestyle').setAttribute('href', sheetKey);
}

    window.onload = loadbackground();
</script>

    Altta localStorage'dan çekmeye devam etmiş, onu gözden kaçırmışız hocam deneyin bu şekilde düzelir
  • 04-08-2021, 18:10:45
    #5
    Misafir
    Misafir
    Anathory adlı üyeden alıntı: mesajı görüntüle 
    <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 () {
      let sheetKey = localStorage.getItem('sheetKey');
      if (!sheetKey) {
           sheetKey = 'https://bootswatch.com/5/sketchy/bootstrap.min.css'
      }
      document.getElementById('pagestyle').setAttribute('href', sheetKey);
}

    window.onload = loadbackground();
</script>
    Altta localStorage'dan çekmeye devam etmiş, onu gözden kaçırmışız hocam deneyin bu şekilde düzelir 
    <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 () {
      let sheetKey = localStorage.getItem('sheetKey');
      if (!sheetKey) {
           sheetKey = 'https://bootswatch.com/5/sketchy/bootstrap.min.css'
      }
      document.getElementById('pagestyle').setAttribute('href', localStorage.getItem('sheetKey'));
}


</script>
    Bu şekilde düzenledim ancak sayfayı yenileyince eski haline dönmekte. Css dosyaları site içinde barınmıyor aslında istediğim şey;
    Default temamız; https://bootswatch.com/5/sketchy/bootstrap.min.css
    https://bootswatch.com/5/flatly/bootstrap.min.css
    https://bootswatch.com/5/journal/bootstrap.min.css

    bu şekilde cssleri localstroage olacak şekilde değiştirmek. Mantıken tüm tema 1 css dosyasının yolu değişmesiyle değişmil oluyor.
  • 04-08-2021, 18:15:00
    #6
    Anathory
    Anathory
    Misafir adlı üyeden alıntı: mesajı görüntüle 
    <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 () {
      let sheetKey = localStorage.getItem('sheetKey');
      if (!sheetKey) {
           sheetKey = 'https://bootswatch.com/5/sketchy/bootstrap.min.css'
      }
      document.getElementById('pagestyle').setAttribute('href', localStorage.getItem('sheetKey'));
}


</script>
    Bu şekilde düzenledim ancak sayfayı yenileyince eski haline dönmekte. Css dosyaları site içinde barınmıyor aslında istediğim şey;
    Default temamız; https://bootswatch.com/5/sketchy/bootstrap.min.css
    https://bootswatch.com/5/flatly/bootstrap.min.css
    https://bootswatch.com/5/journal/bootstrap.min.css

    bu şekilde cssleri localstroage olacak şekilde değiştirmek. Mantıken tüm tema 1 css dosyasının yolu değişmesiyle değişmil oluyor.
    Hocam alttaki localStorage.getItem() kısmını kaldırıp sheetKey variable'ını koymanız gerekiyor.
  • 04-08-2021, 18:50:07
    #7
    Misafir
    Misafir
    Anathory adlı üyeden alıntı: mesajı görüntüle 
    <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 () {
      let sheetKey = localStorage.getItem('sheetKey');
      if (!sheetKey) {
           sheetKey = 'https://bootswatch.com/5/sketchy/bootstrap.min.css'
      }
      document.getElementById('pagestyle').setAttribute('href', sheetKey);
}

    window.onload = loadbackground();
</script>
    Altta localStorage'dan çekmeye devam etmiş, onu gözden kaçırmışız hocam deneyin bu şekilde düzelir
    Mükemmelsiniz hocam. Sorunsuz şekilde çalışıyor.
    • Anathory
    Anathory bunu beğendi.
    1 kişi bunu beğendi.