The General Data Protection Regulation from the Data Protection Act from the year 2018 made many website owners to implement the privacy policy notification. This is the one that keeps coming back till you accept it, like an irritating commercial break on Youtube.
This article won’t cover any CSS code, you are free to design and implement the visual part of a cookie policy as your heart desires. So how to implement a privacy policy notification panel that’s:
- acceptance expires in half a year and after that it will resurface the website demanding for a new confirmation of the privacy policy
- acceptance will remove the panel from the website by checking on each load if the cookies_enabled property has the value 1
For this operation we will use the Web Storage API and more exactly of it’s mechanisms called localstorage. One important thing to mention here is that localstorage never expires unless you define it so.
Using localstorage we will be able to store key, value pairs with javascript, just like in a cookie. These key, value pairs will be stored in a sqlite file in the user’s profile folder.
The syntax is pretty simple, it has a setItem() for adding, getItem() for retrieving data from the file, removeItem() to delete a specific key-value in a storage, clear() which clears all localstorages and also 1 additional method: key() that accepts a number as argument, returning the key by order.
The clear() method is not safe ! If you are running multiple projects on localhost, then you’ll wipe all of your values out in an instant. It’s better to use removeItem() to keep it safe, by individually removing storages of your choice.
Now, let’s start with the code and deconstruct it:
First step is to set up an expiry countdown in hours representing half a year (in this case). In the now variable we put the today’s date and in setupTime we try to retrieve expiration data from local storage.
We have to verify if today the local storage already expired. We subtract from today’s date the date when we accepted the cookie policy. The result will be in milliseconds and it should be bigger then half a year converted to millisecond in order to delete the localstorage and show again the privacy policy.
So in simple terms, if from a certain date till today more then half a year passed(now – setupTime) then delete localstorage.
Of course we can use localStorage.removeItem(‘cookies_enabled’); to avoid deleting other local storages from same domain.
Then we add a click event listener to that privacy policy panel and as a callback we add the following:
- remove cookie policy panel from DOM or that is not even necessary because it has a display: none style initially anyway
- we set again the value 1 to cookie_enabled and the setupTime with start date from where the countdown starts (half a year)
Conclusion: localstorage can store values to hide or display a cookie policy panel and setting an expiration date will make it sure that you haven’t changed your mind since half year ago.
