HTML'de ayarlar sayfasındaki linki bir önceki sayfaya yönlendirmek

Arsen Lüpen

Arsen Lüpen

Hectopat
Katılım
28 Şubat 2021
Mesajlar
80
Daha fazla  
Cinsiyet
Erkek
Merhaba. Web sitemde ayarlar sayfası yapıyorum. Siteme karanlık ve aydınlık mod ekledim. Düzgün bir şekilde çalışıyor. Ama ben ayarlar sayfasındaki linki bir önceki sayfaya yönlendiren bir link veya buton yapmak istiyorum. Link veya buton olması fark etmez. JS ile fonksiyon açıp history.back() diyerek yapmaya çalıştım. Oldu bir önceki sayfaya yönlendirildim. Ama geri gittiğim sayfada yenilemem gerekiyor settings sayfasında yaptığım değişikliğin geçerli olması için. Yani settings sayfasında aydınlıktan karanlığa aldığımda ve geri döndüğümde döndüğüm sayfayı yenilemeden karanlık moda geçsin istiyorum. Yardımcı olursanız sevinirim.

Kod: 
<!DOCTYPE html>
<html lang="en" data-theme="light">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>My Website</title>
 <link rel="stylesheet" href="settings_page.css">
 </head>
 <body>
 <header>
 <h1>My Website</h1>
 <div class="theme-switch">
 <label for="toggle-dark-mode">Dark Mode</label>
 <input type="checkbox" id="toggle-dark-mode">
 </div>
 </header>

 <main>
 <p>Welcome to my website!</p>
 <a href="main_page.php">Learn more</a>
 </main>

 <script src="settings_page.js"></script>
 </body>
</html>

Kod: 
:root {
 --background-color: #fff;
 --text-color: #333;
 --link-color: #06f;
}

[data-theme="dark"] {
 --navbar-background-color: #2B2B2B;
 --background-color: #423F3E;
 --button-text-color: #ddd;
 --text-color: #ddd;
 --link-color: #0cf;
}

Kod: 
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
 document.documentElement.setAttribute('data-theme', currentTheme);

 if (currentTheme === 'dark') {
 toggleSwitch.checked = true;
 }
}

function switchTheme(e) {
 if (e.target.checked) {
 document.documentElement.setAttribute('data-theme', 'dark');
 localStorage.setItem('theme', 'dark');
 } else {
 document.documentElement.setAttribute('data-theme', 'light');
 localStorage.setItem('theme', 'light');
 }
}

toggleSwitch.addEventListener('change', switchTheme, false);

Ben bu şekilde yaptım. Daha kolay bir yolu varsa anlatırsanız teşekkür ederim.
 
Aşağıda ChatGPT cevabını görüyorsunuz:
Merhaba! Yaptığınız şeyin neden çalışmadığını açıklamak için önce biraz tarayıcı geçmişi hakkında bilgi vermek istiyorum. Tarayıcı geçmişi, web sayfaları arasında gezinirken yaptığınız değişiklikleri kaydetmez. Yani, aydınlık/karanlık mod seçimini yaptığınızda, tarayıcı önbelleğine kaydeder ve geri butonuna tıkladığınızda, önbellekten yüklenen önceki sayfayı gösterir. Bu nedenle, değişiklikleri görmek için sayfayı yenilemeniz gerekiyor.

Ancak, ayarlar sayfasına geri döndüğünüzde, otomatik olarak karanlık modda gösterilmesi için birkaç farklı yol vardır. İşte bir örnek:

  1. Ayarları kaydetmek için bir form kullanın:
    • Ayarlarınızı bir formda toplayın.
    • Formu göndermek için bir "Kaydet" düğmesi ekleyin.
    • Form gönderildiğinde, seçtiğiniz ayarları bir yerel depolama alanına kaydedin.
    • Form gönderme işlemi tamamlandığında, önceki sayfaya geri dönün ve sayfayı yenilemeden önceki sayfadaki ayarları yerel depolama alanından alın ve uygulayın.
  2. URL parametrelerini kullanın:
    • Ayarlarınızı URL parametreleri olarak depolayın. Örneğin, ana sayfanın URL'si "main_page.php?theme=dark" şeklinde olabilir.
    • Ayarlar sayfasından önceki sayfaya geri döndüğünüzde, önceki sayfadaki URL'den ayarları alın ve uygulayın.
    • İşte size bir örnek kod, URL parametrelerini kullanarak:


    • Kod: 
      // Ayarları kaydedin
function saveSettings() {
  const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
  const theme = toggleSwitch.checked ? 'dark' : 'light';
  // Ayarları URL parametresi olarak kaydedin
  const urlParams = new URLSearchParams(window.location.search);
  urlParams.set('theme', theme);
  // Yeni URL oluşturun ve önceki sayfaya gitmek için kullanın
  const newUrl = `${window.location.origin}${window.location.pathname}?${urlParams.toString()}`;
  window.location.replace(newUrl);
}

// Geri dönüş butonuna tıklandığında, ayarları uygulayın
window.addEventListener('popstate', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const theme = urlParams.get('theme') || 'light';
  document.documentElement.setAttribute('data-theme', theme);
  const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
  toggleSwitch.checked = theme === 'dark';
});

// Ayarları uygulayın
const urlParams = new URLSearchParams(window.location.search);
const theme = urlParams.get('theme') || 'light';
document.documentElement.setAttribute('data-theme', theme);
const toggleSwitch = document.querySelector('.theme-switch
Konudan anlamıyorum. Sadece belki yardımcı olur diye yazmak istedim. :)
 
sagatagat dedi:
'.Theme-
Genişletmek için tıkla...

sagatagat dedi:
Aşağıda ChatGPT cevabını görüyorsunuz:
Merhaba! Yaptığınız şeyin neden çalışmadığını açıklamak için önce biraz tarayıcı geçmişi hakkında bilgi vermek istiyorum. Tarayıcı geçmişi, web sayfaları arasında gezinirken yaptığınız değişiklikleri kaydetmez. Yani, aydınlık/karanlık mod seçimini yaptığınızda, tarayıcı önbelleğine kaydeder ve geri butonuna tıkladığınızda, önbellekten yüklenen önceki sayfayı gösterir. Bu nedenle, değişiklikleri görmek için sayfayı yenilemeniz gerekiyor.

Ancak, ayarlar sayfasına geri döndüğünüzde, otomatik olarak karanlık modda gösterilmesi için birkaç farklı yol vardır. İşte bir örnek:

  1. Ayarları kaydetmek için bir form kullanın:
    • Ayarlarınızı bir formda toplayın.
    • Formu göndermek için bir "kaydet" düğmesi ekleyin.
    • Form gönderildiğinde, seçtiğiniz ayarları bir yerel depolama alanına kaydedin.
    • Form gönderme işlemi tamamlandığında, önceki sayfaya geri dönün ve sayfayı yenilemeden önceki sayfadaki ayarları yerel depolama alanından alın ve uygulayın.
  2. URL parametrelerini kullanın:
    • Ayarlarınızı URL parametreleri olarak depolayın. Örneğin, ana sayfanın URL'si "main_page.php?theme = Dark" şeklinde olabilir.
    • Ayarlar sayfasından önceki sayfaya geri döndüğünüzde, önceki sayfadaki URL'den ayarları alın ve uygulayın.
    • İşte size bir örnek kod, URL parametrelerini kullanarak:
    • Kod: 
      // Ayarları kaydedin.
function saveSettings() {
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const theme = toggleSwitch.checked ? 'dark' : 'light';
// Ayarları URL parametresi olarak kaydedin.
const urlParams = new URLSearchParams(window.location.search);
urlParams.set('theme', theme);
// Yeni URL oluşturun ve önceki sayfaya gitmek için kullanın.
const newUrl = `${window.location.origin}${window.location.pathname}?${urlParams.toString()}`;
window.location.replace(newUrl);
}

// Geri dönüş butonuna tıklandığında, ayarları uygulayın.
window.addEventListener('popstate', () => {
const urlParams = new URLSearchParams(window.location.search);
const theme = urlParams.get('theme') || 'light';
document.documentElement.setAttribute('data-theme', theme);
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
toggleSwitch.checked = theme === 'dark';
});

// Ayarları uygulayın.
const urlParams = new URLSearchParams(window.location.search);
const theme = urlParams.get('theme') || 'light';
document.documentElement.setAttribute('data-theme', theme);
const toggleSwitch = document.querySelector('.theme-switch
Konudan anlamıyorum. Sadece belki yardımcı olur diye yazmak istedim. :)
Genişletmek için tıkla...

Çok teşekkür ederim yardımcı oldunuz gerçekten.
 

Benzer konular

İ
  • Soru
HTML'de sayfaya resim eklemek
Mesaj
3
Görüntüleme
280
682784
6
Mucosoft
  • Soru
Tarayıcıda bir önceki sayfaya geldiğimde sayfa açılıyor
Mesaj
1
Görüntüleme
184
Kxaan
Kxaan
Mucosoft
  • Çözüldü
Çözüldü  htaccess ile olmayan bir sayfadan olan bir sayfaya yönlendirme
Mesaj
2
Görüntüleme
454
Mucosoft
Mucosoft
Yeniçocuk
HTML'de Nasıl Gelişilir?
2
Mesaj
14
Görüntüleme
2B
Darksandor
Darksandor
Agartha
  • Çözüldü
Çözüldü  Asp.Net ile Bir Sayfadaki Verileri Diğer Sayfaya Aktarma
Mesaj
2
Görüntüleme
2B
fozbek
F

Yeni konular

Yeni mesajlar

Geri
Yukarı