NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
Avatar
Petr Toman
Člen
Avatar
Petr Toman:29.11.2019 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.11.2019 22:27
Avatar
Ondřej Šrytr
Člen
Avatar
Odpovídá na Petr Toman
Ondřej Šrytr:1.12.2019 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.12.2019 11:45
Avatar
Petr Toman
Člen
Avatar
Odpovídá na Ondřej Šrytr
Petr Toman:1.12.2019 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.12.2019 23:03
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:2.12.2019 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.12.2019 7:47
Avatar

Člen
Avatar
:2.12.2019 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.12.2019 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.