存储引导数据 - 模态、徽章和警报答案

【问题标题】：Store Bootstrap Data - Modal, Badges and Alerts存储引导数据 - 模态、徽章和警报
【发布时间】：2015-08-14 15:07:08
【问题描述】：

我的网页中有以下代码行 - 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:email@address.com\">email@address.com</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>

页面刷新时如何存储modal、badge和alerts的数据？

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

【问题讨论】：

我会使用 localStorage 或 cookie
我不太熟悉使用localStorage 以及我将如何进行，或者我应该修改哪些行以使其在我的项目中工作。如果您能提供一个工作示例，那就太好了。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

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

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

<!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:email@address.com\">email@address.com</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>

【讨论】：

仅供参考，我在您的代码中添加了两个函数 deleteIds 和 removeDeletedItem

【解决方案2】：

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

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

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

这里不是编辑你的代码，我只是发布示例代码来帮助你完成你想要的任务。

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

    <html>
<head>
<script src=" http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function(){

    var id = sessionStorage.getItem("id");
    if(id != null){
        var temp = id.split(',');   
        $.each(temp, function(index, value){
                        $('#'+value).hide();
        });
    }
});

function deleteItem(obj, object){

var id = sessionStorage.getItem("id");

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

</head>
<body>

<h2 id="1">Header 1 &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="deleteItem('1', this)">X</a></h2>
<h2 id="2">Header 2 &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="deleteItem('2', this)">X</a></h2>
<h2 id="3">Header 3 &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="deleteItem('3', this)">X</a></h2>

</body>
</html>

【讨论】：

说实话，我还是有点困惑。我没有接受过任何正式的编码/编程培训 - 但根据我收集到的信息，我需要使用 localStorage 或 sessionStorage 和 if 语句，然后以某种方式将其附加到 id 的我要存储的每个元素。我仍在通过一些试验和错误来解决这个问题，但非常感谢您迄今为止的帮助。
还是没有运气。您是否可以改用我在原始帖子中提供的代码，以便我可以看到哪里出错了？
@user1752759 给我一些时间，我正在编辑你的代码并会尽快发布