Javascript-форум - Как хранить свойства выбранных элементов, что бы они были выбраны при повторном вывод

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Как хранить свойства выбранных элементов, что бы они были выбраны при повторном вывод (https://javascript.ru/forum/jquery/74740-kak-khranit-svojjstva-vybrannykh-ehlementov-chto-oni-byli-vybrany-pri-povtornom-vyvod.html)

Как хранить свойства выбранных элементов, что бы они были выбраны при повторном вывод

Привет, стоит такая задача я вывожу на сайт элементы, при нажатии на любой из них выводятся их дополнительные свойства, когда нажимаешь на следующий элемент эти свойства стираются и выводятся новые. Мне нужно запоминать выбранные свойства каждого элемента, что бы при повторном выводе они сохранялись.
Как это можно реализовать?

Выбранные свойства выделаются с помощью toggleClass, при нажатии на каждое свойство я запоминаю в переменные ид основного элемента и ид свойства

Вот что есть сейчас, нужно запоминать выбор свойств(то что под чертой) при повторном нажании на элемент
https://codepen.io/Speculant/pen/MBBeZb

Speculant,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
.el, .svs{
    height: 20px;
    width: 20px;
    border-radius: 100%;
    background-color: #000000;
    margin-bottom: 5px;
}
.el.active {
background-color:bisque;
}

.svs{
background-color: yellow;
}
.svs.active{
background-color: red;
}
  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
    var el = $(".el"),
        opt = $(".option"),
        k = 3,
        temp;
    for (var i = 0; i < k; i++) $('<div class="svs" ><img src=""></div>').appendTo(opt);
    temp = $(".svs", opt).detach();
    el.click(function() {
        var elem = $(this);
        el.not(elem.toggleClass("active")).removeClass("active");
        if (elem.is(".active")) {
            var key = elem.data("key");
            temp.appendTo(opt).removeClass("active");
            if (key != void 0) temp.eq(key).addClass("active")
        } else temp.detach()
    });
    opt.on("click", ".svs", function() {
        var elem = $(this);
        var key = elem.index();
        temp.not($(this).toggleClass("active")).removeClass("active");
        var block = el.filter(".active");
        if (elem.is(".active")) block.data({
            key: key
        });
        else block.removeData("key");
        show();
    })
   function show()
   {
    var data = $.map(el, function(elem) {
        var key = $(elem).data("key");
        return key != void 0 ? key : "no"
   });
   $('.out').html(JSON.stringify(data, null, 4))
   }
});
</script>
</head>

<body>
<div class="el" ><img src=""></div>
<div class="el" ><img src=""></div>
<div class="el" ><img src=""></div>
-----------------------
<div class="option"></div>
<div class="out"></div>

</body>

</html>

рони,
Вау, огромное спасибо