Форум

anton1990 · #1 (**permalink**) 31.07.2014, 19:34

Здрасте

Например, есть сайт. По нему что-то ищет пользователь. Но вот размер ему не нравится. Он нажимает на кнопку (14px, 16px, 18px) и путём магии jQuery текст увеличивается. Но как только пользователь переходит на другую страницу, то текст снова стандартный.
Вопрос: как запомнить размер текста, который выбрал пользователь?
Пример магии

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").animate({fontSize:"3em"});
  });
  $(".btn2").click(function(){
    $("p").animate({fontSize:"1em"});
  });
});
</script>
</head>
<body>

<button class="btn1">Animate</button>
<button class="btn2">Reset</button>

<p>This is a paragraph.</p>

</body>
</html>

рони · #2 (**permalink**) 31.07.2014, 20:13

anton1990,
ам!!! )))
Сохранение установленного размера шрифта

anton1990 · #3 (**permalink**) 31.07.2014, 21:26

Это конечно крутая штука, спасибо

А для приведенного мною примера есть что-то по проще?

рони · #4 (**permalink**) 31.07.2014, 21:31

anton1990,
проще localStorage мне способ неизвестен

anton1990 · #5 (**permalink**) 31.07.2014, 21:35

Проще, в смысле без increment, skip. Есть две кнопки. Два размера шрифтов. Нажимаем на одну - сохранили в localStorage. Это я имею ввиду.

dmitry.c · #6 (**permalink**) 31.07.2014, 21:42

После изменения размера текста можно сделать ajax запрос и сохранить размер в сессию или cookies. Это уже не javascript но всё таки быстро и очень легко.

anton1990 · #7 (**permalink**) 31.07.2014, 21:49

Подойдёт и localStorage.
У меня немного иная задача и проще, чем тот скрипт.
Просто впервые сталкиваюсь с localStorage.

anton1990 · #8 (**permalink**) 31.07.2014, 22:49

С записью разобрался

<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").animate({fontSize:"3em"});
    localStorage.setItem('fontsize', '3em');
  });
  $(".btn2").click(function(){
    $("p").animate({fontSize:"1em"});
    localStorage.setItem('fontsize', '1em');
  });
});
</script>

А вот с изменением шрифта после обновления страницы / открытия другой страницы не пойму.
Извлекаем через var fontsize = localStorage.getItem('fontsize');
Делаю так

$(document).ready(function(){
	var fontsize = localStorage.getItem('fontsize');
         $("p").animate({
            fontSize: "fontsize"
         });
    $(".btn1").click(function(){
    $("p").animate({fontSize:"3em"});
    localStorage.setItem('fontsize', '3em');
  });
  $(".btn2").click(function(){
    $("p").animate({fontSize:"1em"});
    localStorage.setItem('fontsize', '1em');
  });
});

И ничего не работает

anton1990 · #9 (**permalink**) 31.07.2014, 22:55

Надо было fontSize: "fontsize" без кавычек!

Всё, всем спасибо!)

Форум

Справочник

Discord чат

Курсы javascript