Diskuze: Cookies s dark modem

Petr Toman

Člen

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

Ondřej Šrytr

Člen

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

Petr Toman

Člen

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Peter Mlich

Člen

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;name2=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

Člen

: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

Naučíme tě pracovat z domova.

Zjistit více...

IT kurzy

Naučíme tě pracovat z domova.

Více info »

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.