Memorizza dati Bootstrap: modali, badge e avvisi

Ho le seguenti linee di codice nella mia pagina web – esempio / demo .

/* Messages Modal */ $(document).ready(function(){ var informsr = $("#messageInformsr a"); var refreshBadge = function(messageCount) { var badge = informsr.find(".badge"); if (messageCount > 0) { if (!badge.length) { informsr.text("Messages "); informsr.append("" + messageCount + ""); } else { badge.text(messageCount); } } else { // informsr.text("No messages"); informsr.text("Messages "); informsr.append("" + messageCount + ""); } }; var buildMessage = function(message) { var htmlMessage = "
"; htmlMessage += "×"; htmlMessage += "" + message.title + ""; htmlMessage += "

" + message.text + "

"; return htmlMessage; } // Messages To Display var messages = [ { id: "1", title: "Title 01:", text: "
    \
  • List Item
  • \
  • List Item
  • \
\
\

Paragraph

\

E-Mail: [email protected]

\ " }, { id: "2", title: "Title 02:", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat velit et vehicula vulputate." }, { id: "3", title: "Title 03:", text: "Quisque viverra nisl ut arcu eleifend aliquam. Ut faucibus efficitur nibh, sit amet tincidunt est volutpat non." } ]; refreshBadge(messages.length); informsr.on("click", function(e) { e.preventDefault(); var modalBody = $(".modal-body"); modalBody.empty(); for (var i = 0; i < messages.length; i++) { modalBody.append(buildMessage(messages[i])); } if (messages.length == 0) { $('.modal-body').text('There are no more messages to display.'); } }); $("body").delegate(".alert .close", "click", function() { var messageId = $(this).data("id"); // AJAX messages = messages.filter(function(el) { return el.id != messageId; }); if (messages.length == 0) { // $("#messagesModal").modal("hide"); $('.modal-body').text('There are no more messages to display.'); } refreshBadge(messages.length); }); });
    

Messages

Come posso memorizzare i dati di modal, badge e avvisi quando la pagina viene aggiornata?

Ad esempio, se si rimuove uno dei tre messaggi e si aggiorna la pagina, dovrebbero essere disponibili solo due messaggi.

Non ho intenzione di modificare la mia risposta perché sopra la risposta a scopo di esempio che vuole implementare sessionStorage . Qui risolverò il tuo problema specifico pubblicando un altro codice in modo che il tuo problema possa essere risolto.

stiamo implementando la tecnica sessionStorage per gestire già rimuovere elementi che funzionano in una singola scheda. A scopo di test, non sto impostando alcun violino per questo, quindi è sufficiente copiare il codice e impostarlo sull’ambiente locale.

    Bootstrap Example         

Messages

È necessario implementare sessionStorage o localStorage per la pagina.

localStorage – memorizza i dati senza data di scadenza

sessionStorage – memorizza i dati per una sessione (i dati vengono persi quando la scheda del browser viene chiusa)

Qui invece di modificare il tuo codice sto semplicemente postando un codice di esempio per il tuo aiuto attraverso il quale puoi svolgere il tuo compito desiderato.

Hai solo bisogno di seguire il concetto logico dal codice sottostante e implementarlo nel tuo codice.

        

Header 1     X

Header 2     X

Header 3     X