First off I just want to say: "Excellent questions all-around". I wish more people weren't afraid to simply ask questions. It's what smart people do.
I didn't know about localStorage
NOT too surprising. Even though it's about a decade old now, it's still considered a "new' technology.
Why is server side cookie management so important in this application?
So you aren't wasting bandwidth sending things client-side -- like the agreement and its associated scripting -- once it's already accepted on each and every sub-page. It could even be implemented as a stage based load (two separate pages) for scripting off behavior.
Not everyone browses with JavaScript enabled, or from UA's where JavaScript is even relevant. See my "bad days" where I'm increasingly reliant on my braille reader.
I've added some lorem ipsum paragraphs to the example inside .modalFix div but the scroll bars are still showed.
They should be overlaid, but that could also be an issue with the modal scripting handling. Modals are ... fragile.
If the modals were moved after the .modalFix they will guaranteed behave when modals, but since the agreement could also be static content it can go bits-up face-down scripting off. It's often hard to balance the two.
Position:fixed on .modal may alleviate that woe. I'd have to play with it. What I gave you was a quick drive-by recode, not my best work.
Could be possible to load Google Adsense scripts only after the modal is accepted?. This should be the correct behaviour to comply with the law, but I'm not sure if this is viable.
Absolutely, I do it on cutcodedown. Elementals even has a _.Load.script function for this very purpose.
The trick? Remove the script that looks something like this from your markup:
<script data-ad-client="ca-pub-yourNumberHere" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Make sure your <ins> tag where you want the advert has data-ad-client on it.
<ins class="adsbygoogle" data-ad-client="ca-pub-yourNumberHere" data-ad-slot="slotNumberHere" data-ad-format="auto" style="display:block;"></ins>
Where we localStorage.setItem in the scripting? Add this:
_.Load.script('//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', { async : true} );
For those not using elementals.js, vanilla scripting for this would go something like:
var adsByGoogle = document.createElement('script');
adsByGoogle.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
adsByGoogle.async = true;
document.body.appendChild(adsByGoogle);
I actually like to put that in my onload chain, so it doesn't even try to load their scripting until after everything else of mine is done and a "meaningful paint" has been completed.
Late loading non-essential scripts can really help with speed rankings, and with Google now treating speed rankings on mobile as part of your search weight, every bit helps.