Как с помощью JavaScript изменить шрифт элемента и запомнить выбор пользователя в cookies?

Question

[Александр Беликов]

Добрый день! Делаю на своём сайте функцию настройки шрифта. Фактически, она готова. Но дело в том, что при обновлении страницы все настройки сбрасываются. Как запомнить выбор пользователя в cookies, например?
Код:

<script>
function fontToPrata() {
var x = document.getElementById("article-post");
x.style.fontFamily = "Prata";
}

function fontToOpenSans() {
var x = document.getElementById("article-post");
x.style.fontFamily = "Open Sans";
}

function fontToComfortaa() {
var x = document.getElementById("article-post");
x.style.fontFamily = "Comfortaa";
}

function ReSize1() {
var x = document.getElementById("article-post");
x.style.fontSize = "80%";
}

function ReSize2() {
var x = document.getElementById("article-post");
x.style.fontSize = "100%";
}

function ReSize3() {
var x = document.getElementById("article-post");
x.style.fontSize = "130%";
}
</script>

<div style="display:inline">
<i>Шрифт: </i>
<a href="#font-edit" style="font-family:'Prata';" title="По умолчанию" onclick="fontToPrata()">Prata</a> | <a href="#font-edit" style="font-family:'Open Sans';" onclick="fontToOpenSans()">OpenSans</a> | <a href="#font-edit" style="font-family:'Comfortaa';" onclick="fontToComfortaa()">Comfortaa</a>
<br>
<i>Размер: </i><a href="#font-edit" onclick="ReSize1()">S</a> | <a href="#font-edit" onclick="ReSize2()">N</a> | <a href="#font-edit" onclick="ReSize3()">B</a>
</div>

Comments

[yarovikov]

Гуглить пробовали, или хотите, чтобы за вас написали?

[Роман]

почему в cookies а не в localstorage?

Answer 1

[Stalker_RED]

Записывайте лучше в localStorage
Это и удобнее, и не отправляется на сервер при каждом запросе.

// save
localStorage.setItem('size', '42px');

// load
let size = localStorage.getItem('size') || '100%'; // default 100%