@HexJean

Как изменения css стиля загрузить в localstorage?

У меня есть четыре скрипта, через который пользователь может производить изменение css страницы:
Меняет стиль на выбранный файл .css
<script>
function setStyle(css) {
  document.querySelector('link#style').href = css;
}
</script>

Раскрывает/закрывает спойлеры:

<script>
	var isUnfolded = false;

	function toggleSpoilers() {
    jQuery(".sp-head").each(function(){
    $this = jQuery(this);
    if(isUnfolded) {
      $this.removeClass("unfolded");
      $this.next().slideUp("fast");
      $this.next().addClass("folded");
      $this.prop('title', title.unfolded);
    } else {
      $this.addClass("unfolded");
      $this.next().slideDown("fast");
      $this.next().removeClass("folded");
      $this.prop('title', title.folded);
    }
  });
  isUnfolded = !isUnfolded;
}
</script>


Изменяет размер шрифта:
<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>

Расширяет страницу с контентом
<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>


Управление производится через элементы ссылок:
<a href="#" class="fontSizePlus">A+</a> | <a href="#" class="fontSizeMinus">A-</a>
<a id="WideButton" name="WideButton">Wide mode</a>
<a href="#" onClick="toggleSpoilers()"> Spoil-despoil </a>

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


Сам стиль задается у меня в :
<link id="style" href="https://site.com/wp-content/themes/theme1/style1.css" rel="stylesheet">


Проблема: На странице все эти изменения отлично работают. Но стоит перейти по ссылке или обновить страницу - все сбивается.
Желание: Надо как-то сделать так, чтобы оно сохранялось на стороне пользователя и не обнулялось при обновлении страницы или переходе по ссылке.

Я пытался написать код, но ничего не получилось. Я знаю, что такое реализовывают через куки или localstorage. Но как применить ко всему этому объему - не знаю.
Я пытался к фрилансу обращаться, но там предлагают сделать через сохранение данных на сервер по id пользователю, либо предлагают сделать на сервере для всех пользователей, либо вообще не в курсе задания (хотя сами отметились в теме задания). Но мне не нужны никакие сохранения на сервере. Я хочу, чтобы весь этот стиль сохранялся у пользователя в браузере. Такое вообще возможно сделать без сохранения на сервер?
  • Вопрос задан
  • 59 просмотров
Пригласить эксперта
Ответы на вопрос 1
hzzzzl
@hzzzzl
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы