Магазин Bootstrap Data - Модальные, значки и оповещения

Question

У меня есть следующие строки кода на моей веб-странице - 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 = [ 
 
     { 
 
\t   id: "1", 
 
\t   title: "Title 01:", 
 
    \t   text: "<ul> \ 
 
    \t   <li>List Item</li> \ 
 
    \t   <li>List Item</li> \ 
 
    \t   </ul> \ 
 
    \t   <br/> \ 
 
\t \t <p>Paragraph</p> \ 
 
\t \t <p>E-Mail: <a href=\"mailto:email@address.com\">email@address.com</a></p> \ 
 
\t   " 
 
     }, 
 
     { 
 
\t   id: "2", 
 
\t   title: "Title 02:", 
 
\t   text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat velit et vehicula vulputate." 
 
     }, 
 
     { 
 
\t   id: "3", 
 
\t   title: "Title 03:", 
 
\t   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>

Как я могу хранить данные модальной, пропуска и оповещения при обновлении страницы?

Например, если вы удалите одно из трех сообщений и затем обновите страницу, тогда будут доступны только два сообщения.

Answer 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> 

Answer 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>