主页 / 问题 / 1320228
Accepted
Kobets Matviy
Asked:2022-08-22 15:13:29 +0000 UTC2022-08-22 15:13:29 +0000 UTC

如何在 cookie [JS/jQuery] 中写入/获取数据数组

  • 772

向计算机背后的人类问好！
有一个在线电影院，我们要在其上实现该功能：
观看电影后，您返回主页（所有电影的列表）并查看您已经看过哪些电影（更改样式）。同时，cookie 只会在出现在电影页面 5 分钟后才被记录下来，这样就有时间挥霍，不会将所有打开和立即关闭的电影都添加到“已观看”的电影中。

当然，对于这项任务，cookie 对我们很有用。
但是由于将有数百部电影观看，在某些情况下如果不是数千部电影。这就提出了一个问题：“如何写下并获得一系列 cookie？”

javascript

1 个回答

  1. Best Answer

    Cookie 只获取一个要写入的字符串。他们无法接收数组或对象。
    因此，我们将现有的数据数组转换为 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');
});

    • 0

相关问题