Сохранить значения в HTML5 localStorage -> заполнить при загрузке страницы

Я следую примеру из O'Reilly "Создание приложений для iPhone с помощью HTML, CSS и Javascript», я хочу, чтобы значения, введенные из формы, заполнялись после закрытия и перезагрузки приложения, аналогично «липкой форме» php.

Единственные аспекты, которые я изменил по сравнению с примером, это то, что saveSettings вызывается при отправке, а здесь он вызывается при выгрузке (ранее при размытии ввода).

Загрузка настроек вызывается при готовности документа, а не при его отправке.

РЕДАКТИРОВАТЬ Я удалил лишний знак решетки, я показал код с включенным jquery (он был включен раньше), я привязал saveSettings к выгрузке. Значения все еще не липкие. Когда я закрываю окно и снова открываю его, их уже нет.

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script>
$(document).ready(function(){
    $('#current-age').blur(saveSettings);
    loadSettings();
});
function loadSettings() {
    $('#monthly-income').val(localStorage.income);
    $('#saving-per-month').val(localStorage.saving);
    $('#current-age').val(localStorage.age);
}
function saveSettings() {
    localStorage.age = $('#current-age').val();
    localStorage.saving = $('#saving-per-month').val();
    localStorage.income = $('##monthly-income').val();
}             
</script>
</head> 
<body> 
<div data-role="content">   
    <div data-type="horizontal"  data-role="controlgroup">
        <a href="#foo"   data-role="button">Input</a>
        <a href="#foo1"  id="output-button" data-role="button">Output</a>
    </div>
    <input type="number" min="500" max="10000" step="100" name="monthly-income" id="monthly-income" value=""/>
    <input type="number"  min="500" max="10000" step="100" name="saving-per-month" id="saving-per-month" value=""/>
    <input type="number" min="16" max="75" step="1" name="current-age" id="current-age" value=""/>
</body>
</html>

iphone html jquery local-storage
person Alex Borsody    schedule 05.11.2011    source источник
comment
Ваш блок кода может использовать правильное форматирование...   -  person Šime Vidas    schedule 06.11.2011

Ответы (2)


arrow_upward
5
arrow_downward

Чтобы заставить ваш код работать, вы должны применить два изменения:

  • Включите фреймворк jQUery. Пример:
    <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.css"></script>
  • Замените localStorage.income = $('##monthly-income').val(); на
    localStorage.income = $('#monthly-income').val(); (=пропустите один диез, #).

Скрипт: http://jsfiddle.net/fE7pC/

Примечание: Вместо того, чтобы привязывать прослушиватель событий к blur, рекомендую привязать его к onload, чтобы настройки автоматически сохранялись при выходе со страницы:

$(window).unload(saveSettings);

Еще одно замечание: jQuery mobile рекомендует pageInit, а не $().ready. См.: http://jquerymobile.com/test/docs/api/events.html

person Rob W    schedule 05.11.2011
comment
pageInit говорит, что функция не определена, по какой-то причине ее нет в этой версии JQuery Mobile. code.jquery.com/jquery-1.6.4.min.js - person Alex Borsody; 06.11.2011
comment
я имею в виду эту ссылку, ее pageinit здесь нет code .jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js - person Alex Borsody; 06.11.2011
comment
@alex_borsody .live('pageInit', ...). Событие должно запускаться мобильным браузером. Это не специфичное для jQuery событие. - person Rob W; 06.11.2011
comment
как вы используете событие pageInit()? трудно найти информацию ;( - person Daniel Magnusson; 02.02.2012
comment
@DanielMagnusson Согласно документам (внизу), событие oageInit для привязки к элементу страницы с помощью $('#id-of-page').live('pageInit', function(ev) {/*Code here*/});. - person Rob W; 02.02.2012

arrow_upward
0
arrow_downward

Вы также можете посмотреть DEMO здесь: - JSFIDDLE

Если вы используете jQuery один раз, не смешивайте его с чистым javascript, например document.getElementById(). И не создавайте переменную height для хранения $('#height').val(), вы можете использовать ее напрямую. Код стал более читаемым.

$(document).ready(function() {
    $(window).unload(saveSettings);
    loadSettings();
});

function loadSettings() {
    $('#height').val(localStorage.height);
    $('#weight').val(localStorage.weight);
    $('#dateOfBirth').val(localStorage.dateOfBirth);
    $('input[value="' + localStorage.gender + '"]').prop('checked', true);
    $("#sportive").val(localStorage.sportive);
}

function saveSettings() {
    localStorage.height = $('#height').val();
    localStorage.weight = $('#weight').val();
    localStorage.dateOfBirth = $('#dateOfBirth').val();
    localStorage.sportive = $("#sportive").val();
    localStorage.gender = $('input[type=radio]:checked').val();
}
person Vishal Thakur    schedule 09.03.2017