Windows store apps 如何在页面中保留动态内容？

我有一个windows应用商店，在一个页面中我动态添加内容，当我导航到下一个页面并返回时，动态内容消失

如何在页面中保留动态内容

Resumen.js

：

WinJS.UI.Pages.define('/pages/Resumen/Resumen.html', {
    ready: function () {
        //Evento agregar nueva tarea
        document.querySelector('#agregar-tarea').addEventListener('click', irTarea, false);

        if (!LBR.registros_nuevos.es_primer_tarea) {
            agregarTarea();
        }
    }
});

function irTarea() {
    WinJS.Navigation.navigate('../pages/Tarea/Tarea.html');
}

function agregarTarea() {
    var reg = LBR.registros_nuevos,
        lista = document.getElementById('tareas-agregadas'),
        li = document.createElement('li');

    document.getElementById('resumen').className = '';

    li.innerHTML = '<div><h1>' + reg.tarea.descripcion + '</h1><p>' + reg.tarea.id + '</p></div>';
    li.innerHTML += '<div><h1>' + reg.articulo.descripcion + '</h1></p>' + reg.articulo.id + '</p></div>';
    li.innerHTML += '<div>' + reg.articulo.cantidad + '</div>';
    lista.appendChild(li);
}

WinJS.UI.Pages.define('/pages/Tarea/Tarea.html', {
    ready: function () {
        //Mostrar el boton 'Atras'
        document.getElementById('atras').className = '';
        //Eventos de los buscadores
        document.getElementById('tarea-buscar').onkeyup = buscarTarea;
        document.getElementById('articulo-buscar').onkeyup = buscarArticulo;
        //Evento botón agregar
        document.getElementById('agregar').onclick = agregarTarea;
        //Evento botón atrás
        document.getElementById('atras').addEventListener('click', irAtras, false);
    }
});
function agregarTarea() {
    var tarea = {
        tarea: document.getElementById('tarea-seleccionada').getElementsByTagName('p')[0].innerText,
        item: document.getElementById('articulo-seleccionado').getElementsByTagName('p')[0].innerText,
        cantidad: parseFloat(document.getElementById('cantidad').value),
        item_udm: 'GL',
        mod_usr: 'jjlopez'
    },
        reg = LBR.registros_nuevos;

    reg.tarea.id = document.getElementById('tarea-seleccionada').getElementsByTagName('p')[0].innerText;
    reg.tarea.descripcion = document.getElementById('tarea-seleccionada').getElementsByTagName('h1')[0].innerText;
    reg.articulo.id = document.getElementById('articulo-seleccionado').getElementsByTagName('p')[0].innerText;
    reg.articulo.descripcion = document.getElementById('articulo-seleccionado').getElementsByTagName('h1')[0].innerText;
    reg.articulo.cantidad = parseFloat(document.getElementById('cantidad').value);

    if (reg.es_primer_tarea) {
        reg.agregados[reg.indice_registros] = {
            nodriza: reg.nodriza,
            equipo: reg.equipo.id,
            odometro: 0,
            odometro_udm: 'KM',
            observaciones: 'Ninguna',
            creado_usr: reg.usuario.creado,
            mod_usr: reg.usuario.mod,
            fecha_apunte: new Date().getTime(),
            tareas: []
        }
    }
    reg.agregados[reg.indice_registros].tareas[reg.indice_tareas] = tarea;
    reg.es_primer_tarea = false;
    WinJS.Navigation.navigate('../pages/Resumen/Resumen.html');
}

WinJS中的“页面导航”是一种DOM替换机制，其中PageControlNavigator元素（通常在default.html中定义）中的任何内容都会被每个导航完全替换。因此，当导航离开时，动态添加到一个页面中的任何内容都将从DOM中转储，当导航返回时，您必须再次恢复它

围绕这一点的一个策略是根本不进行真正的导航，而是在nav forward上将上一页隐藏在新页的后面，这样nav back就可以隐藏或删除第二页，从而使第一页再次可见

或者，为了在导航中保留DOM块，当您从页面切换出去时，您需要临时将该内容的根div从PageControlNavigator中移出，然后在导航回来时将其重新设置为父级

您可以使用以下内容构建通用/自动化机制：

• 在default.html中有一个隐藏的div，称之为“Holder1”（如果需要跨多个页面执行此操作，可以有多个这样的holder）
• 在Resumen.html中有一个div，您将在其中创建动态内容，并用类似data holder=“Holder1”的内容进行标记
• 修改navigator.js（在您的项目中），以便_navigation函数在被导航的页面中检查具有数据持有者属性的任何元素的DOM，并将其子元素重新设置为指定的持有者元素（属性值）的父元素。同时，在default.html中将数据目标属性添加到此holder，以包含包含这些子元素的页面元素的id
• 类似地，在_navigating或_navigated中，检查您要导航到的页面是否有一个带有数据持有者属性的空元素。如果是这样，则在default.html中获取该holder元素的子元素，并在加载新页面后将内容重新设置为父元素。（在这里，您需要多个页面的唯一保持架。）