存储引导数据 – 模态，徽章和警报

我的网页中有以下几行代码 – example / demo 。

/* Messages Modal */ $(document).ready(function(){ var informer = $("#messageInformer a"); var refreshBadge = function(messageCount) { var badge = informer.find(".badge"); if (messageCount > 0) { if (!badge.length) { informer.text("Messages "); informer.append("" + messageCount + ""); } else { badge.text(messageCount); } } else { // informer.text("No messages"); informer.text("Messages "); informer.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: [e-mail]
 \ " }, { 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); informer.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  
  
 
  
 
 
Messages
 
 
 
 
 
 
 
 Close 
 
 
 
  

如何在刷新页面时存储模式，徽章和警报的数据？

例如，如果删除三个消息中的一个然后刷新页面，则只有两个消息可用。

Answer 1

我不打算编辑我​​的答案，因为上面的答案是为了实现sessionStorage示例目的。 在这里，我将解决您的具体问题，以便发布另一个代码，以便您的问题得到解决。

我们正在实现sessionStorage技术来管理已删除的单个选项卡中的元素。 出于测试目的，我没有为它设置任何小提示，所以你只需要复制代码并在本地环境中设置它。

             
Messages  
  
 
  
 
 
Messages
 
 
 
 
 
 
 
 Close 
 
 
 
 
   

Answer 2

您需要为您的页面实现sessionStorage或localStorage 。

localStorage – 存储没有过期日期的数据

sessionStorage – 存储一个会话的数据（关闭浏览器选项卡时数据丢失）

在这里，我只是发布示例代码，而不是编辑代码，您可以通过它来完成您的愿望任务。

您只需要遵循以下代码中的逻辑概念并在代码中实现。

        
Header 1     X
 
Header 2     X
 
Header 3     X