[Warycooper]

Есть два скрипта и кнопка которые меняют фон в заданном месте <div id="col">ТЕКСТ</div>

/* МЕНЯЕТ ФОН СТАТЬИ ПРИ НАЖАТИИ НА КНОПКУ */
window.onload = function() {
    document.getElementById('SuperButton').onclick = function()
    {
        if(document.getElementById('col').className != 'whitefon')
        {
            document.getElementById('col').className = 'whitefon';
        }
        else
        {
            document.getElementById('col').className = 'topic-content';
        }
    }
}

/* КНОПКА МЕНЯЮЩАЯ ФОН И САМУ СЕБЯ */
$(function(){
  $('.button1, .button2').click(function(){
    $('.button1, .button2').toggleClass('active');
  });
});

И сама кнопка, которая не только меняет фон в id=col, но и меняет текст и цвет при нажатии.

<div id="SuperButton" class="exemple">
<span class="button1 active">сделать белый фон</span>
<span class="button2">сделать тёмный фон</span>
</div>

.exemple {
 float: right;
 }
 
.imgEx1, .imgEx2 {
 display: none;
 }
 
/* КНОПКА ПЕРЕКЛЮЧЕНИЯ ФОНА */
.button1 {
 display: none;
 width: 160px;
 color: #000000;
 cursor: pointer;
 background: #ffffff;
 font-style: 8px;
 text-align: center;
 padding: 0px 0px 0px 0px;
 }
        
.button2 {
 display: none;
 width: 160px;
 color: #fff;
 cursor: pointer;
 background: #000000;
 font-style: 8px;
 text-align: center;
 padding: 0px 0px 0px 0px;
 }
 
.button1:hover, .button2:hover {
 opacity: 0.8;
 }
 
.active {
 display: block;
 }
 
/* ПЕРЕКЛЮЧАЕМЫЙ ФОН */ 
.whitefon { 
 font-size: 14px; 
 background-color: #ffffff;
 color: #000000;
 font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
 line-height: 15pt;
 text-align: justify;
 padding: 10px 10px 10px;
 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
 }

Я не силён в программировании, только учусь, но уже голову сломал. Подскажите пожалуйста, как мне всё это записать в cookie? Что бы при одном клике по кнопке производилась запись в cookie, а при повторном удалялось.