How to implement data storage in local storage or in cookie set by users?

I have three scripts through which the user can change the css page: Changes the style to the selected .css file:

<script>
function setStyle(css) {
  document.querySelector('link#style').href = css;
}
</script>

Changes the font size:

<script>
$(document).ready(function () {

  //Минимальный размер шрифта
  var min=9;    

  //Максимальный размер шрифта
  var max=16;   

  //Сохраняем заданное в таблице стилей значение размера шрифта
  var reset = $('p').css('fontSize'); 

  //Изменение размера будет проводиться для указанных элементов
  var elm = $('p, h1, a, ul, li, div.sp-head, h2.widgettitle, label, h3.comment-reply-title, input.submit, span, h4.comments');  

  //Устанавливаем в переменной значение шрифта по умолчанию (удаляем px)
  var size = str_replace(reset, 'px', ''); 
  var size_reset = size;

  //Функция увеличения размера шрифта
  $('a.fontSizePlus').click(function() {

    //Если размер шрифта меньше или равен максимальному значению
    if (size<=max) {

      //Увеличиваем размер шрифта
      size++;

      //Устанавливаем размер шрифта
      elm.css({'fontSize' : size});
    }

    //Прерываем передачу события далее по дереву DOM
    return false;   

  });

  //Функция уменьшения размера шрифта
  $('a.fontSizeMinus').click(function() {

    //Если размер шрифта больше или равен минимальному значению
    if (size>=min) {

      //Уменьшаем размер
      size--;

      //Устанавливаем размер шрифта
      elm.css({'fontSize' : size});
    }

    //Прерываем дальнейшую передачу события по дереву DOM
    return false;   

  });

  //Функция сброса к значению по умолчанию
  $('a.fontReset').click(function () {

    //Устанавливаем значение размера шрифта по умолчанию
     size = size_reset;
     elm.css({'fontSize' : reset});     
  });

});

//Функция замена строки
function str_replace(haystack, needle, replacement) {
  var temp = haystack.split(needle);
  return temp.join(replacement);
}
</script>

Extends content page:

<script type="text/javascript">
window.onload = function() {
    document.getElementById('WideButton').onclick = function()
    {
        if(document.body.className != 'wide_class')
        {
            document.body.className = 'wide_class';
        }
        else
        {
            document.body.className = '';
        }
    }
}
</script>

Management is done through link elements:

<a href="#" class="fontSizePlus">A+</a> | <a href="#" class="fontSizeMinus">A-</a>
<a id="WideButton" name="WideButton">Wide mode</a>

<a onclick="setStyle('sitecom/wp-content/themes/theme1/style1.css')" href="#">style1</a> 
<a onclick="setStyle('sitecom/wp-content/themes/theme1/style2.css')" href="#">style2</a>
<a onclick="setStyle('sitecom/wp-content/themes/theme1/style3.css')" href="#">style3</a>
<a onclick="setStyle('sitecom/wp-content/themes/theme/style4.css')" href="#">style4</a>

The style itself is set in:

<link id="style" href="sitecom/wp-content/themes/theme1/style1.css" rel="stylesheet">

On the page, all of these changes work fine. But if you follow the link or refresh the page, everything goes astray. How to make changes made to the site by the user stored in cookies or in localstorage? So that after reloading the css page the properties do not get off?