What is the correct way to write a cookie script that hides a button for the user who clicked "forever"?

Question

JavaScript

There is a task to hide "forever" a button for the user after pressing it (or downloading a file, as an option). As I understand it, for this you need to set a cookie after clicking, and if the user returns to the page again, then the treasured button will no longer be displayed for him.
Button code:

var $ = jQuery.noConflict();
$(".button").click(function(){
  setTimeout(function(){
         downloadFile('/uploads/test.zip');
         var date = new Date();
               document.cookie="Test=yes; expires="+date.setMonth(date.getMonth()+1);
  },15000)
});

After pressing the button: 1) after 15 seconds the file is downloaded; 2) cookie Test=yes is set for a month; 3) a modal window is called (another script of the site engine is responsible for this).
Can't read cookie and hide element (or set additional .invisible class). The code is like this:

function getCookie() {
    var cookies = document.cookie.match ( '(^|;) ?test=([^;]*)(;|$)' );
    if (cookies) { $('.data').hide(); }
    else
    return null;
  }

Answer 1

Expanded the issue a bit.
The user enters the site. The date of the visit is recorded in the Cookie. Under the button, the end date of the free period is displayed, which is calculated from the date of the visit +2 days, for each visitor. After 2 days have passed since the visit or the file has been downloaded (button pressed), the date text and button are no longer shown.
Solution:
https://jsfiddle.net/pb89nhvk/9/
Based on https://github.com/js-cookie/js-cookie

$(function(){
  
  var 
  	free_btn = $('#free_btn'),
    time_off = $('#time_off');
  
  free_btn.click(function(){
    setTimeout(function(){ 
       //downloadFile('/uploads/test.zip'); 
       
     },15000)
     
     if (Cookies.get('free_period1')) {
       var date_off = new Date(Cookies.get('free_period1'));
       date_off.setDate(date_off.getDate() - 3);

       Cookies.set('free_period1', date_off, { expires: 365, path: '/' });



     } else {
       // узнаем текущую дату
       var curr_date = new Date();
       // добавляем к ней 2 дня
       curr_date.setDate(curr_date.getDate() - 2);
       // записываем в куки на +1 год
       Cookies.set('free_period1', curr_date, { expires: 365, path: '/' });
     }

    free_btn.hide();
    time_off.hide();
      
  })

  if (Cookies.get('free_period1')) {
    
    /* Повторный заход пользователя */
    
    
  	
    // берем куку даты 1 захода
    var date_off = new Date(Cookies.get('free_period1'));
    // берем текущую дату
    var curr_date = new Date();
    
    
    // выводим дату окончания пользователю
    var date_off_month = date_off.getMonth() + 1;
    if (date_off_month < 10) date_off_month = '0'+date_off_month;
    
    var date_str = date_off.getDate()+"."+date_off_month+"."+date_off.getFullYear()
    time_off.find('span').text(date_str);
          
    // сравниваем текущую дату и дату окончания периода
    // если текущая дата меньше, то показываем кнопку и текст
    if (curr_date<date_off) {
      free_btn.show();
    	time_off.show();
  	}
    
  } else {
  
  	/* Первый заход пользователя */
    
    // узнаем текущую дату
  	var curr_date = new Date();
    // добавляем к ней 2 дня
    curr_date.setDate(curr_date.getDate() + 2);
    // записываем в куки на +1 год
    Cookies.set('free_period1', curr_date, { expires: 365, path: '/' });
    
    
    
    
    // выводим дату окончания пользователю
    var date_off_month = curr_date.getMonth() + 1;
    if (date_off_month < 10) date_off_month = '0'+date_off_month;
    
    var date_str = curr_date.getDate()+"."+date_off_month+"."+curr_date.getFullYear()
    time_off.find('span').text(date_str);
    
    
    // показываем кнопку и текст
    free_btn.show();
    time_off.show();
    
  }
  
})

Don't forget to put it in CSS

#free_btn, #time_off {
  display:none
}

HTML

<button id="free_btn">Free</button>
<div id="time_off">
  Бесплатный период заканчивается: <span></span>
</div>

Answer 2

What for to fasten cookie if there is local/sessionStorage?

Answer 3

Use the normal library https://github.com/js-cookie/js-cookie

Answer 4

You need a plugin https://plugins.jquery.com/cookie/ , which will need to be included after the jQuery library:
When I click on the button, I would create a cookie (not for a month, but for a year) with the date of the first visit:

var $ = jQuery.noConflict();
$(".button").click(function(){
    if(!!$.cookie('firstVisit')) $.cookie('firstVisit', $.now(), { expires: 365 });
    setTimeout(function(){
        downloadFile('/uploads/test.zip');
    },15000)
});

And in the code would then check if the date has expired:

function getCookie() {
    if ($.cookie('firstVisit', Number) + 2 * 24 * 60 * 60 * 1000 < $.now()) { $('.data').hide(); }
}