У меня есть четыре скрипта, через который пользователь может производить изменение 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 пользователю, либо предлагают сделать на сервере для всех пользователей, либо вообще не в курсе задания (хотя сами отметились в теме задания). Но мне не нужны никакие сохранения на сервере. Я хочу, чтобы весь этот стиль сохранялся у пользователя в браузере. Такое вообще возможно сделать без сохранения на сервер?
Простой
