I found several articles on working with cookie , they all described some difficult cases in the end that little was understood. I don’t need it now, I want to start with a simple one:

How to assign a class to a block, and after reloading the page should the class remain?

 $("input").click(function() { $(this).siblings('.block').toggleClass('active') }); 
 .block { display: block; position: relative; width: 80%; height: 100px; margin: 0 auto; background: #4DB6AC; } .block.active { background: #FFC107; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="block"></div> <input type='button' value='Переключатель'>

also read that cookie are only saved for one session,

  1. How to make them stored there until the user cleans up the browser?
  2. How to make cookie stored 24 hours?

    1 answer 1

    Question 1.
    When installing cookies, you can specify the expires parameter for expires . Then they will live as long as you tell them, unless of course the server overwrites.

    If you specify a date in the past, the cookie will be deleted immediately. If you do not specify, the cookie is considered to be session and when it closes the browser goes out.

    You cannot see when the cookie expires in js. But you can through the developer console. In chrome, this is on the "Resources" tab

    Endless cookies can not be set, but you can tell them to live a couple of years, this is enough for your eyes.

    You can read more details like here.

    Question 2.
    Something like that:

     var now, expirationDate = new Date(), newCookie; // Страшное число - это один день в миллисекундах. expirationDate.setTime(now.getTime() + 24*60*60*1000); newCookie = "myCookie=testCookieValue;expires=" + expirationDate.toUTCString(); document.cookie = newCookie;

    Point 3.
    Cookies should be used for the data that the server should know. If this is information that the server does not need at all, you should use localStorage or sessionStorage . The data in sessionStorage live browser session. The data in localStorage live until they are killed forcibly. That is, there is no expirationDate parameter for localStorage , you can implement it yourself if you wish.

    Storaj has functions setItem(key, value) and getItem(key, value) with which you can get and remove values ​​from them.

    That is, to solve your main task:
    By the time your item is loaded (onLoad), you need to check the data that is stored in the stack and hang the necessary class depending on it.
    When you switch a class on an item, you need to change the value in the store accordingly.

    • And you can give the answer to the most important question?) He wrote the code for him, and 2 questions are in addition to the main one) - Yevgeny Shevtsov
    • that is, if I switch a class on an element should it be recorded in localStorage ?? and from this localStorage the browser should retrieve data on the state of the element? - Evgeny Shevtsov
    • @ YevgenyShevtsov, well, in general, you correctly said what to do, leave leave to you. The difference between localStorage and sessionStorage ot cookie besides the fact that cookies go to the server and the size is that for storage you need to write expirationDate with your hands if you need to. - Duck Learns to Take Cover
    • now, then ask a new question, after all there are incomprehensible moments. - Evgeny Shevtsov
    • @ YevgenyShevtsov, I’m straightforward to write the code for you now, because jsFiddle doesn’t work with a lot of things, and on my laptop I don’t need anything except a notebook) - Duck Learns to Hide