Fatal编程技术网
  • javascript/
  • Javascript 存储引导数据-模式、徽章和警报

Javascript 存储引导数据-模式、徽章和警报

javascript jquery html css twitter-bootstrap

Javascript 存储引导数据-模式、徽章和警报,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我的网页中有以下代码行- /*信息模态*/ $（文档）.ready（函数（）{ var informer=$（“#消息informer a”）； var refreshBadge=函数（messageCount）{ var badge=告密者。查找（“.badge”）； 如果（messageCount>0）{ 如果（！徽章长度）{ 告密者。文本（“消息”）； append（“+messageCount+”）； } 否则{ badge.text（messageCount）； } } 否则{

我的网页中有以下代码行-


/*信息模态*/
$（文档）.ready（函数（）{
var informer=$（“#消息informer a”）；
var refreshBadge=函数（messageCount）{
var badge=告密者。查找（“.badge”）；
如果（messageCount>0）{
如果（！徽章长度）{
告密者。文本（“消息”）；
append（“+messageCount+”）；
} 
否则{
badge.text（messageCount）；
}
} 
否则{
//告密者。文本（“无消息”）；
告密者。文本（“消息”）；
append（“+messageCount+”）；
}
};
var buildMessage=函数（消息）{
var htmlMessage=“”；
htmlMessage+=“”；
htmlMessage+=“”+message.title+””；
htmlMessage+=“”+message.text+“
”；
返回HTML消息；
}
//要显示的消息
变量消息=[
{ 
id:“1”，
标题：“标题01:”，
正文：“
    \

  • 列表项
    • \

  • 列表项
    • \

\

\
段落
\
电子邮件：
\
" 
},
{ 
id:“2”，
标题：“标题02:”，
正文：“知识同一性不受尊重，是一种高尚的信仰，是一种无价值的行为。”
},
{ 
id:“3”，
标题：“标题03:”，
课文：“我的生命是永恒的，我的生命是永恒的，我的生命是永恒的，我的生命是永恒的。”
}
];
refreshBadge（消息长度）；
告密者。关于（“点击”，功能（e）{
e、 预防默认值（）；
var modalBody=$（“.modalBody”）；
modalBody.empty（）；
对于（var i=0；i






信息
接近

您需要为页面实现
会话存储
或
本地存储


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


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

在这里，我没有编辑你的代码，我只是发布了一些示例代码供你帮助，通过这些代码你可以完成你想要的任务

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


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




$（函数（）{
var id=sessionStorage.getItem（“id”）；
如果（id！=null）{
var temp=id.split（'，'）；
$。每个（温度、函数（索引、值）{
$（'#'+value）.hide（）；
});
}
});
函数deleteItem（对象，对象）{
var id=sessionStorage.getItem（“id”）；
if（id==null）{
sessionStorage.setItem（“id”，obj）；
}否则{
var str=id.split（'，'）.join（）；
str=str+'，'+obj
sessionStorage.setItem（“id”，str）；
}
$（对象）.parent（）.hide（）；
}
标题1
标题2
标题3

我不会编辑我的答案，因为上面的答案是为了示例目的，谁想实现
会话存储
。在这里，我要解决您的具体问题，所以张贴另一个代码，以便您的问题可以得到解决

我们正在实施
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>




引导示例
$（文档）.ready（函数（）{
var informer=$（“#消息informer a”）；
var refreshBadge=函数（messageCount）{
var badge=告密者。查找（“.badge”）；
如果（messageCount>0）{
如果（！徽章长度）{
告密者。文本（“消息”）；
append（“+messageCount+”）；
} 
否则{
badge.text（messageCount）；
}
} 
否则{
//告密者。文本（“无消息”）；
告密者。文本（“消息”）；
append（“+messageCount+”）；
}
};
var buildMessage=函数（消息）{
var htmlMessage=“”；
htmlMessage+=“”；
htmlMessage+=“”+message.title+””；
htmlMessage+=“”+message.text+“
”；
返回HTML消息；
}
//要显示的消息
变量消息=[
{ 
id:“1”，
标题：“标题01:”，
正文：“
    \

  • 列表项
    • \

  • 列表项
    • \

\

\
段落
\
电子邮件：
\
" 
},
{ 
id:“2”，
标题：“标题02:”，
正文：“知识同一性不受尊重，是一种高尚的信仰，是一种无价值的行为。”
},
{ 
id:“3”，
标题：“标题03:”，
课文：“生命的代价是生命的代价，生命的代价是生命的代价，生命的代价是生命的代价。”