How to set cookies session per visitor?

Hey guys I need help about cookies modal with JavaScript

Below is a modal about cookies that appears after 5 seconds you open website, but once you close the modal by clicking button “Close”, it will appear after I reload my page.

How I can set this modal to not appear anymore unless a visitor clears caches & cookies from his own browser because i tried with localStorage but as an beginner to JavaScript I had no idea how to do it.

let cokies = document.querySelector('.kokies');
let closeBtn = document.querySelector('.kokie-btn');

closeBtn.addEventListener('click', closeModal);

function closeModal () {
    document.querySelector('.kokies').style.display = 'none'; 
}
setTimeout( function() {
    document.querySelector('.kokies').style.display = 'block';
}, 3200);

so the modal you’ve given the class of kokies has nothing to do with cookies or localstorage. A quick soundbite about the two, and the differences:

  • cookies, while they can be created on the front end, are passed to the server with each request (only those cookies related to the current subdomain, IIRC). So if the modal is a thing that the back end needs to know about, then that makes sense.
  • localStorage, on the other hand, does not get sent to the server. It is a space within the browser’s cache where information can be stored and later retrieved. Typically, information is stored as a JSON string, though that is not a requirement - it can be data of just about any type. For your use, a simple boolean value will suffice.

Read more about them both on MDN, or on the devdocs site: localStorage vs cookies. (I specifically reference the devdocs here, but simply googling “MDN cookies” and “MDN localStorage” will also help.

So I built something around your code, that gets a value out of localStorage, and sets that same value. Hopefully, the comments will make some sense.

// Before anything else, let's get the key we store in localStorage. If that doesn't exist,
//   we'll set modalShown to false (because, if we didn't set that value yet, we haven't
//   shown the modal).
let modalShown = localStorage.getItem("modal_shown") || false;

let cokies = document.querySelector('.kokies');
let closeBtn = document.querySelector('.kokie-btn');

closeBtn.addEventListener('click', closeModal);

function closeModal () {
  // So we have showed the modal (otherwise we wouldn't be in the close handler),
  //  now we want to set the localStorage value for the modal shown to true. 
  modalShown = true;
  // and we'll stick the value of modalShown into localStorage. Doing so will, on our
  //   NEXT visit, set modalShown to true in that first line above.
  localStorage.setItem("modal_shown", modalShown);

    document.querySelector('.kokies').style.display = 'none'; 
}
setTimeout( function() {
  // So here, if modalShown is false, we want to display the modal. It is only false if we
  //  have not explicitly set it to true, and the only place we do that is in the modal's
  //  close handler -- thus we only set it to true if the modal has actually displayed.
  if(!modalShown){
    document.querySelector('.kokies').style.display = 'block';
  }
}, 3200);

class .kokies was the class i named in HTML file
btw the code you added should work to not show modal of cookies unless I clear caches from browser right?

exactly right. Clearing the cache should also clear the localStorage.

oh thanks man it works as i just tried thanks a lot
btw do you have any idea why this code on github about cookies is more longer than this one even it has the same function to set cookies ?

Sure – because cookies expire. They have a “lifetime”, while localStorage (if I remember right) do not. So the bulk of that function is setting an expiration date/time for the cookie.

oh got it thank you, you made it look so easy for me to set cookies session thanks again

remember, they’re not cookies. Cookies are set by the server (usually) and passed to the server on every request. This is not that. This is purely localStorage. And the mechanism to use localStorage is pretty much exactly that simple – you use localStorage.setItem() to save something, then later you localStorage.getItem() to retrieve that same thing.

1 Like

Can i set an expiry date on localStorage so it will show my modal after some days like after 7 days inside localStorage.setItem() ?

It would get a little complex – rather than simply setting a boolean (true or false) as I’ve done, you could create an object:

let modalData = {
  shown: true,
  expires: /* here, you'd want to create a Date object some interval into the future */
}
localStorage.setItem("modalData", modalData);

That would become a pretty complicated conversation, though.

1 Like

thanks for your explanation man :slight_smile:

Hope it helped. If expiration is a thing you want automatically, then perhaps cookies WOULD make sense. Best of luck!

1 Like