JQuery-mobile многостраничные формы

Question

У меня есть главная страница, которая имеет несколько ссылок на вторую страницу. В зависимости от выбранной ссылки вторая страница должна отображать другой заголовок (эта часть, которую я сделал). На новой странице есть форма. Эта форма должна иметь возможность сохранять входные данные в localStorage.

Моя проблема в том, что я не знаю, как сделать форму действующей, как несколько форм (так как существует около 5 различных ссылок). Пользователь должен просто увидеть ту же форму (с точки зрения внешнего вида), но форма должна сохранять данные для этой конкретной страницы.

Скажите, у меня есть ссылки A, B, C на моей домашней странице. Они берут пользователя на тот же # page2. На странице #2 есть форма, ссылка для сохранения данных формы на localStorage и ссылка на получение данных формы. Пользователь должен иметь возможность сохранять несколько записей для ссылок A и B и C (когда пользователь просматривает данные формы из ссылки A, он должен дать им хотя бы последние полдюжины записей для A).

Как бы я смог достичь вышеуказанного?

Answer 1

Поскольку все происходит на одной странице html, вы можете просто иметь глобальную переменную javascript для текущей формы или установить ее как атрибут данных на div2 страницы. Каждый раз, когда вы нажимаете ссылку, а также настраиваете заголовок страницы 2, установите глобальную переменную в форму. Затем, сохраняя форму, используйте глобальную переменную, чтобы указать уникальный идентификатор localstorage.

Например, если у вас есть 3 ссылки, как это:

<div data-role="navbar" id="thenav"> 
     <ul> 
     <li><a href="#page2" data-formid="form1" data-header="The Form 1">Form1</a></li> 
     <li><a href="#page2" data-formid="form2" data-header="The Form 2">Form2</a></li> 
     <li><a href="#page2" data-formid="form3" data-header="The Form 3">Form3</a></li> 
     </ul> 
    </div> 

И страница 2

<div data-role="page" id="page2"> 
    <div data-role="header" id="page2header" data-add-back-btn="true"> 
     <h1>My page 2</h1> 
    </div> 
    <div id="cont" role="main" class="ui-content"> 
     <label for="text-basic">Text input:</label><input type="text" name="text-basic" id="text-basic" value=""> 
     <button id="btnSave">Save</button> 
    </div> 
</div> 

Затем в сценарии

var formid = ''; 
$(document).on("pagecreate","#page1", function(){ 
    $("#thenav a").on("click", function(e){ 
    $("#page2header h1").text($(this).jqmData("header")); 
    formid = $(this).jqmData("formid") 
    }); 
}); 

$(document).on("pageshow","#page2", function(){ 
    //get from locastorage 
    $("#text-basic").val(""); 
    var t = localStorage.getItem(formid); 
    if (t && t != "undefined"){ 
    $("#text-basic").val(t); 
    } 
}); 

$(document).on("pagecreate","#page2", function(){ 
    $("#btnSave").on("click", function(e){ 
    //save to local storage 
    var t = $("#text-basic").val(); 
    localStorage.setItem(formid, t); 
    $(":mobile-pagecontainer").pagecontainer("change", "#page1", { }); 
    }); 
}) 

DEMO