Написание простого приложения на javascript. Часть 2.
Сохраняем состояние в урле
Для сохранения данных будем использовать хеш часть урла. Сохранять будем объект с введенными пользователем числами. Сначала создадим его
var settings = {}; settings.sum = sum; settings.months = months; settings.percent = percent;
и сохраним в кеш, предварительно завернув в JSON
location.hash = JSON.stringify(settings);
Загрузка состояния из урла
Сначала нужно получить данные из урла. Особенность javascript в том, что location.hash возвращает не то, что в него записали
location.hash = "hello world!"; console.log(location.hash); //#hello world!
решетку нужно убрать
var settings = JSON.parse(location.hash.substring(1));
теперь копируем в инпуты данные из урла
$('#debt_calc_amount').val(settings.sum); $('#debt_calc_period').val(settings.months); $('#debt_calc_percent').val(settings.percent);
и запускаем расчет, чтобы перейдя по ссылке с состоянием, пользователь сразу увидел рассчитанные данные.
Распечатываем результаты
Вывод на принтер запускается командой
window.print();
Но есть проблема. Распечатается вся страница сайта с хедером, сайдбарами и прочим. Нужно скрыть все кроме того, что мы хотим распечатать.
Делать будем с помощью css
@media print { body * { visibility: hidden ; } #debt_calc_section_to_print, #debt_calc_section_to_print * { visibility: visible ; } #debt_calc_section_to_print { position: absolute ; left: 0 ; top: 0 ; } }
Правило @media print указывает на то, что применяться стили будут только при печати. Дальше мы скрываем все содержимое страницы, показываем элемент с id = debt_calc_section_to_print и все что внутри него и сдвигаем этот элемент в левый верхний угол. Теперь оборачиваем все что мы собираемся распечатывать в
< div id="debt_calc_section_to_print"> ... < /div>