Как записать/получить массив данных в cookie [JS/jQuery]

Question

Хеллоу человечеству за компьютерами!
Имеется онлайн-кинотеатр на котором хотим реализовать функционал:
После просмотра фильма, возвращаешься на главную страницу (список всех фильмов) и видишь какие уже посмотрел (изменить стиль). При этом записывать куку будет только через 5 минут пребывания на странице фильма, что бы было время промотать, а не добавлять в "просмотренные" все открытые и сразу же закрытые фильмы.

Для этой задачи конечно же нам пригодятся cookie's.
Но поскольку просмотренных фильмов будут сотни, если даже не тысячи в отдельных случаях. То постал вопрос: "как записать и получить массив куки?"

Answer 1

Cookie's получают на запись только строку. Получить массив или объект они не могут.
Поэтому существующий массив данных конвертируем в строку JSON и записываем.
Так же мы сможем конвертировать полученный JSON обратно в обычный массив для работы с ним.

function GetCookies(key) {
  // Получаем значение с document.cookie по 'key'
  var getFullCookieJSON = document.cookie.match(new RegExp("(?:^|; )"+key.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
  
  // если null, тогда создаем пустой массив
  if (getFullCookieJSON == null) {
    var arrFilms = [];
  }
  // иначе если доступный, тогда конвертируем JSON в массив
  else {
    var arrFilmsJSON = getFullCookieJSON[1];
    var arrFilms = JSON.parse(arrFilmsJSON);
  }
  console.log('получили: ' +arrFilms);

  return arrFilms;
}

// принимаем на вход массивФильмов, youtubeID, дни существования куков
function SetCookies(arrFilms, youtubeID, days) {
  // если в массиве нет совпадений по youtubeID
  if (arrFilms.indexOf(youtubeID) == -1) {
    console.log(youtubeID+ ' - нет совпадения');
    arrFilms.unshift(youtubeID);           // добавляем youtubeID в начало массива
    var setCookie = JSON.stringify(arrFilms);   // конвертируем массив у JSON
    document.cookie = 'твой_ключ='+setCookie+';path=/;max-age=+(60*60*24*'+days+')';     // устанавливаем куки на количество days
    console.log('установили: ' +setCookie);
  }
  // если совпадение
  else {
    console.log(youtubeID+ ' - совпадение');
  }
}

Теперь используем эти функции по предназначению.

// Вариант #1111 Начинаем действия при нахождении блока
// если на странице есть <тег id="твойID">, тогда работаем с куками
if ($('тег').is('#твойID')) {
  // записали полученный массив с куками
  var newArrFilms = GetCookies('твой_ключ');
  // нашли и записали в значение data-youtube-id
  var currentFilmId = $('#iframeYoutube').attr('data-youtube-id');

  // передали в функцию записи кукисов
  SetCookies(newArrFilms, currentFilmId, 7);
}


// Вариант #2222 При клике на фильм записываем его data-youtube-id в cookie's
var newArrFilms = GetCookies('твой_ключ');
$('.films__item').on('click', function() {
  // получаем data-youtube-id у фильма
  var filmId = $(this).attr('data-youtube-id');

  // таймер сработает через 5мин, что бы было время прогортать фильм
  // а не делать "просмотренными" всех которые только открыли и закрыли
  setTimeout(function() {
    SetCookies(newArrFilms, filmId, 7);
  }, 1000*60*5);
});


// Вариант #3333 Разбить получение и запись кукисов в otdelniye.js
// и подключать на разных страницах, как это сделали мы


// Получить кукисы и проверить на совпадения (в списке фильмов)
console.log('проверяем: ');
// проверяем каждый эллемент в массиве куков
$.each(newArrFilms, function name(i, val) {
  console.log('('+i+') '+val);
  // находим <li> с data-youtube-id, которая имеет совпадение с кукисами
  // добавляем класс .films__visited для просмотренных фильмов
  $('.films__item[data-youtube-id='+val+']').addClass('films__visited');
});

БЛОГ НА HUSL

Как записать/получить массив данных в cookie [JS/jQuery]

Ответы (1 шт):