set cookie via javascript

[ngrmm]

My clients wants a modal to show up on every page. But when a user clicks inside the modal -> a session-cookie is set and the modal gets a class.

// user clicks on modal button
$('.modal_button').click(function(){

	// 1. set PW session cookie
	
	// 2. toggle class
	$('.modal').toggleClass('off');

});

I know how to set a cookie on page-load via PW-API. But the click on the modal button does not force a page-load. So i have to set the cookie through javascript. Is there a way to do that?

[MoritzLost]

You can't save data to the session in the browser, because session data is stored server-side. The only thing the browser stores regarding the session is the cookie that identifies the current session for the server. If you need to access the stored value both client- and server-side, you can just use a regular cookie. By omitting the expires field it will only be valid for the current browser session, the same as ProcessWire's sessions.

However, if you don't need to access the value server-side (which I assume you don't for a modal), you can use sessionStorage or localStorage instead, which do the same thing as cookies but with a cleaner API. Use localStorage if you want the stored value to persist across sessions (for a dismissable modal this is probably what you want) or sessionStorage to store a value only for the current browser session.

const dismissalKey = 'modal-dismissed';

// user clicks on modal button
$('.modal_button').click(function(){

	// 1. store dismissal in the sessionStorage OR the localStorage
    localStorage.setItem(dismissalKey, '1');
  
	// 2. toggle class
	$('.modal').toggleClass('off');

});

// somewhere else, check if the modal has been dismissed
const modalIsDismissed = Boolean(localStorage.getItem(dismissalKey));

 

[ngrmm]

i found a solution here: https://processwire.com/blog/posts/pw-3.0.141/

as ryan writes, you can use this script to set a cookie in javascript: 
https://github.com/processwire/processwire/blob/master/wire/modules/Jquery/JqueryCore/jquery.cookie.js

[MoritzLost]

@ngrmm Yes, you can set regular cookies as mentioned in my first paragraph, though they won't be accessible through ProcessWire's $session API.

But why would you load 87kB of library bloat for something that you can do in one line? ?

[ngrmm]

3 minutes ago, MoritzLost said:

@ngrmm Yes, you can set regular cookies as mentioned in my first paragraph, though they won't be accessible through ProcessWire's $session API.

But why would you load 87kB of library bloat for something that you can do in one line? ?

you're right. I'll use the localStorage and hide/minify the modal with js/css if modal is dismissed.