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

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

7 голосов
/ 05 ноября 2011

Я следую примеру в 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>

Ответы [ 2 ]

5 голосов
/ 05 ноября 2011

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

Fiddle: http://jsfiddle.net/fE7pC/

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

$(window).unload(saveSettings);

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

0 голосов
/ 09 марта 2017

Вы также можете увидеть 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();
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...