Как я могу сохранить готовые изображения после обновления страницы?

Question

Я создаю образовательное приложение с серией ссылок на внешний контент в rails и использую jquery / javascript.

Мне бы хотелось, чтобы после посещения пользователем ссылки рядом со ссылкой появлялся значок, показывающий, что он ее прочитал.В настоящее время я делаю это, сохраняя информацию в файлах cookie - идентификатор тега в качестве ключа и источник изображения в качестве значения.Тик будет длиться до тех пор, пока cookie.

В настоящее время, после того, как пользователь нажимает на ссылку, его идентификатор (ключ в cookie) передается в массив.Затем я перебираю массив, и если этот ключ совпадает с идентификатором, появляется галочка ... (этот бит в порядке)

Моя проблема заключается в том, что при перезагрузке страницы галочки исчезают, даже если моикуки в браузере.Они также исчезают из массива cookie-файлов

Мои просмотры ...

<%= javascript_include_tag "setCookies" %>
Read some stuff <br />
<a id="a" class="link" href="http://www.google.co.uk"
target="_blank">Google says this...</a>
<br />
<a id="b" class="link" href="http://www.bbc.co.uk/sport"
target="_blank">BBC says this...</a>

Мой Jquery ...

$ (документ) .ready (function (){var cookies = [];

$(".link").click(function() {
  var id = $(this).attr('id');
  var href = $(this).attr('href');
  setCookie(id, href, 1);
  cookies.push(id)

  for(var i = 0; i < cookies.length; i++) {
    var elem = document.createElement("img");
    elem.setAttribute("src", "https://www.freepik.com/free-icon/correct-symbol_744179.htm");
    if (cookies[i] == id) {
      document.getElementById(id).prepend(elem);
    }
  }
})

function setCookie (cname, cvalue, exhours) {
  var date = new Date();
  date.setTime(date.getTime()+exhours*60*60*1000);
  var expires = "; expires=" + date.toGMTString();
  document.cookie = cname+"=" + cvalue+expires + ";path=/";
}
});

Любая помощь будет принята с благодарностью. Спасибо!