Python týden Python týden
Další šance dokončit svůj projekt a získat ceny v hodnotě 10.000 Kč! Pokračování úspěšné letní soutěže - ITnetwork winter

Diskuze: Cookies s dark modem

JavaScript JavaScript Cookies s dark modem American English version English version

Aktivity (2)
Avatar
Petr Toman
Člen
Avatar
Petr Toman:29. listopadu 22:27

Ahoj, vytvořil jsem si tlačítko pro tmavý režim a poté navrácení na světlý režim, ovšem bych chtěl, aby uživateli se tato možnost uložila a při každé návštěvě webu nemusel toto znova měnit.. Nemám vůbec tušení, jak s cookies pracovat a tudíž bych nejlépe potřeboval jak to zapsat..

Kod na dark režim:

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
        $(document).ready(function(){
                $('ul').click(function(){
                        $('ul').toggleClass('active')
                        $('body').toggleClass('dark')
                })
        })
</script>

V CSS potom:

body.dark{
        background: rgb(24, 24, 24);
        transition: all 0.1s ease-in;
        color: #cfcfcf
}

Zkusil jsem: Nic, napsal jsem na forum

Chci docílit: Aby si uživateli uložila možnost a nemusel ji znova opakovat.

 
Odpovědět
29. listopadu 22:27
Avatar
Ondřej Šrytr
Člen
Avatar
Odpovídá na Petr Toman
Ondřej Šrytr:1. prosince 11:45

Ahoj,

doporučím ti js-cookie https://github.com/…ie/js-cookie, práce s ním je velice jednoduchá. :)

 
Nahoru Odpovědět
1. prosince 11:45
Avatar
Petr Toman
Člen
Avatar
Odpovídá na Ondřej Šrytr
Petr Toman:1. prosince 23:03

Ahoj,

snažil jsem se o jakýsi svůj hokus pokus, lámal jsem si nad tím nějakou dobu hlavu, ale nepřišel jsem jak s tím pracovat. Mohl bys mi prosím pomoct jak to zapsat? Tudíž přímo aby to uložilo ten tmavý-režim a nedocházelo k resetování nastavení?

Moc by mi to pomohlo, děkuju

 
Nahoru Odpovědět
1. prosince 23:03
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:2. prosince 7:47

google = jquery cookies example
https://www.sitepoint.com/…-pause-wait/

  <script src="path/to/jquery.js"></script>
  <script src="path/to/jquery.cookie.js"></script>
<script>
$.cookie("visits", 10);
$.cookie("favourite-city", "London", {path: "/", domain: "jspro.com"});
$.cookie("name", "Aurelio", {expires: new Date(2013, 10, 29, 11, 00, 00), secure: true});
console.debug($.cookie("visits")); // print "10"
console.debug($.cookie("favourite-city")); // print "London"
console.debug($.cookie("name")); // print "Aurelio"
$.removeCookie("favourite-city", {path: "/", domain: "jspro.com"}); // successfully deleted

Cookies je string oddeleny stredniky (name=value;na­me2=value2), ktery se uklada zvlast pro domenu (ip) a nastavuje se cas expirace. Aby se s tim dalo pohodlne pracovat, tak si udelej vlastni funkce nebo zkopiruj nekoho jineho, treba pro to jquery. String musi byt kodovany tak, aby prosel v url, proto tam jsou vsude encodeURIComponent a podobne funkce.
google = js cookies example
https://developer.mozilla.org/…ument/cookie

A pekny kod je i na tom githubu, co ti poslal
https://github.com/…s.cookie.mjs
api.get()
api.set('name', 'value')

 
Nahoru Odpovědět
2. prosince 7:47
Avatar
Vladislav Ladicky
Člen
Avatar
Vladislav Ladicky:2. prosince 14:04

Skús toto:

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
  const $ul = $('ul')
  const $body = $('body')

  function toggleDarkMode () {
    $ul.toggleClass('active')
    $body.toggleClass('dark')

    if ($body.hasClass('dark')) {
      localStorage.darkMode = true
    } else {
      localStorage.darkMode = false
    }
  }

  function restoreDarkMode () {
    if (typeof localStorage.darkMode === 'undefined') {
      localStorage.darkMode = false
    } else {
      if (localStorage.darkMode) {
        toggleDarkMode()
      }
    }
  }

  $(function () {
    restoreDarkMode()
    $ul.click(toggleDarkMode)
  })
</script>
 
Nahoru Odpovědět
2. prosince 14:04
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.