存储Bootstrap数据-模态，徽章和警报 [英] Store Bootstrap Data - Modal, Badges and Alerts

问题描述

我的网页中包含以下代码行-示例/演示.

I have the following lines of code in my web page - 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("<span class=\"badge\">" + messageCount + "</span>");
            } 
            
            else {
                badge.text(messageCount);
            }
        } 
        
        else {
            // informer.text("No messages");
            informer.text("Messages ");
            informer.append("<span class=\"badge\">" + messageCount + "</span>");
        }
    };

    var buildMessage = function(message) {
        var htmlMessage = "<div class=\"alert fade in\">";
        
        htmlMessage += "<a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-lable=\"close\" data-id=\"" + message.id + "\">&times;</a>";
        htmlMessage += "<strong>" + message.title + "</strong>";
        htmlMessage += "<p>" + message.text + "</p>";
        
        return htmlMessage;
    }

    // Messages To Display
    var messages = [
        { 
	        id: "1", 
	        title: "Title 01:",
 	        text: "<ul> \
 	        <li>List Item</li> \
 	        <li>List Item</li> \
 	        </ul> \
 	        <br/> \
		<p>Paragraph</p> \
		<p>E-Mail: <a href=\"mailto:[e-mail]\">[e-mail]</a></p> \
	        " 
        },
        { 
	        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);
    });
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<p data-toggle="modal" data-target="#messagesModal" id="messageInformer"><a href="#">Messages <span class="badge"></span></a>
</p>

<!-- Modal -->
<div class="modal fade" id="messagesModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Messages</h4>
      </div>

      <div class="modal-body">
      </div>

      <div class="modal-footer">
        <div class="col-md-8 pull-left">
        </div>

        <div class="col-md-4">
          <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div> 

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

How can I store the data of the modal, badge and alerts when the page is refreshed?

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

For example, if you remove one of the three messages and then refresh the page, only two messages should then be available.

推荐答案

我不会编辑我的答案，因为以上答案出于示例目的，谁想实现sessionStorage.在这里，我将解决您的特定问题，因此发布另一个代码，以便可以解决您的问题.

I am not gonna edit my answer because above answer for sample purpose who wanna implement sessionStorage. Here I am gonna solve your specific problem so posting another code so that your problem can be resolve.

我们正在实施sessionStorage技术，以管理已在单个选项卡中工作的已删除元素. 出于测试目的，我没有为此设置任何麻烦，因此您只需要复制代码并将其设置在本地环境中即可.

we are implementing sessionStorage technique to manage already remove elements which works in a single tab. For testing purpose I am not setting any fiddle for it so you just need to copy code and set it on local environment.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</head>

<script>

$(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("<span class=\"badge\">" + messageCount + "</span>");
            } 

            else {
                badge.text(messageCount);
            }
        } 

        else {
            // informer.text("No messages");
            informer.text("Messages ");
            informer.append("<span class=\"badge\">" + messageCount + "</span>");
        }
    };

    var buildMessage = function(message) {
        var htmlMessage = "<div class=\"alert fade in\">";

        htmlMessage += "<a href=\"javascript:;\" class=\"close\" data-dismiss=\"alert\" aria-lable=\"close\" data-id=\"" + message.id + "\" onclick='deleteIds(this)'>&times;</a>";
        htmlMessage += "<strong>" + message.title + "</strong>";
        htmlMessage += "<p>" + message.text + "</p>";

        return htmlMessage;
    }

    // Messages To Display
    var messages = [
        { 
            id: "1", 
            title: "Title 01:",
            text: "<ul> \
            <li>List Item</li> \
            <li>List Item</li> \
            </ul> \
            <br> \
        <p>Paragraph</p> \
        <p>E-Mail: <a href=\"mailto:[e-mail]\">[e-mail]</a></p> \
            " 
        },
        { 
            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." 
        }
    ];


    removeDeletedItem(messages);

    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);
    });
});

function deleteIds(obj){
    var currentId = $(obj).attr('data-id');
    var id = sessionStorage.getItem("id");

    if(id == null){
        sessionStorage.setItem("id", currentId);
    }else{
        var str = id.split(',').join();
        str = str + ','+ currentId
        sessionStorage.setItem("id", str);
    }
    $(obj).parent().hide();
}

function removeDeletedItem(obj){
    var id = sessionStorage.getItem("id");
    if(id != null){
        var temp = id.split(',');   
        $.each(temp, function(index, value){

                var i = -1;
            $.each(obj, function(ind,val){
                if(val.id == value)
                i = ind;
            });

            if(i != -1){
                obj.splice(i,1);
            }
        });
    }
}

</script>
<body>
<p data-toggle="modal" data-target="#messagesModal" id="messageInformer"><a href="#">Messages <span class="badge"></span></a>
</p>

<!-- Modal -->
<div class="modal fade" id="messagesModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Messages</h4>
      </div>

      <div class="modal-body">
      </div>

      <div class="modal-footer">
        <div class="col-md-8 pull-left">
        </div>

        <div class="col-md-4">
          <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div> 
 </body>
</html>

这篇关于存储Bootstrap数据-模态，徽章和警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！