setItem

setItem

关注
发信
关注(28)粉丝(399)

sessionStorage.setItem不能在Firefox中工作/不能将第1页的div的ID传递到第2页

本文介绍了sessionStorage.setItem不能在Firefox中工作/不能将第1页的div的ID传递到第2页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

下面的代码适用于Chrome，但不适用于Firefox。我想打开关于页面上的相应的手风琴面板，当点击主页页面上的链接时。 [onclick - 主页已关闭，关于页面已打开]



主页：

 <！DOCTYPE html> 
< html lang =en> 
< head> 
< meta charset =UTF-8> 
 
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css> 
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css> 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>< / script> 
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js>< / script> 
< style type =text / css> 
 .bs-example {
 margin：20px; 
} 
 a {
 margin：20px; 
} 
< / style> 
< script type ='text / javascript'> //<！[CDATA [
 
 
 function myFunctionId（id）{
 sessionStorage.setItem sent，id）; 
 window.open（about.html，_ self）; 
 
 
} 
 
 //]]> 
 
< / script> 
 
 
< / head> 
 
< body style =padding-top：50px;> 
    
 
< / body> 
< / html>

关于Page： 

 <！DOCTYPE html> 
< html lang =en> 
< head> 
< meta charset =UTF-8> 
< title> Bootstrap 3 Accordion的示例< / title> 
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css> 
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css> 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>< / script> 
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js>< / script> 
< style type =text / css> 
 .bs-example {
 margin：20px; 
} 
< / style> 
< script type ='text / javascript'> //<！[CDATA [
 $（document）.ready（function（）{
 var a = sessionStorage.getItem （）; 
 if（a ==header1）{
 document.getElementById（'collapseOne'）。classList.add（'in'）; 
} else if（a ==header2）{
 document.getElementById（'collapseTwo'）。classList.add（'in'）; 
} else if（a ==header3）{
 document .getElementById（'collapseThree'）。classList.add（'in'）; 
} 
 else {
 greeting =晚上好; 
} 
文档。 getElementById（demo）。innerHTML = greeting; 
}）; 
 //]]> 
 
< / script> 
 
< / head> 
< body>< p id =demo>< / p> 
< div class =bs-example> 
< div class =panel-groupid =accordion> 
< div class =panel panel-default> 
< div class =panel-heading> 
< h4 class =panel-title> 
< a data-toggle =collapsedata-parent =＃accordionhref =＃collapseOne>什么是HTML？< / a> 
< / h4> 
< / div> 
< div id =collapseOneclass =panel-collapse collapse> 
< div class =panel-body> 
< p> HTML代表超文本标记语言。 HTML是描述网页结构的主要标记语言。 < a href =http://www.tutorialrepublic.com/html-tutorial/target =_ blank>了解详情。< / a>< / p> 
< / div> 
< / div> 
< / div> 
< div class =panel panel-default> 
< div class =panel-heading> 
< h4 class =panel-title> 
< a data-toggle =collapsedata-parent =＃accordionhref =＃collapseTwo> 2。什么是Bootstrap？< / a> 
< / h4> 
< / div> 
< div id =collapseTwoclass =panel-collapse collapse> 
< div class =panel-body> 
< p> Bootstrap是一个功能强大的前端框架，可以更快，更轻松地进行Web开发。它是CSS和HTML约定的集合。 < a href =http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/target =_ blank>了解详情。< / a>< / p> 
< / div> 
< / div> 
< / div> 
< div class =panel panel-default> 
< div class =panel-heading> 
< h4 class =panel-title> 
< a data-toggle =collapsedata-parent =＃accordionhref =＃collapseThree> 3。什么是CSS？< / a> 
< / h4> 
< / div> 
< div id =collapseThreeclass =panel-collapse collapse header3> 
< div class =panel-body> 
< p> CSS代表级联样式表。 CSS允许您为给定的HTML元素指定各种样式属性，例如颜色，背景，字体等。< a href =http://www.tutorialrepublic.com/css-tutorial/target =_ blank>了解详情。< / a>< / p> 
< / div> 
< / div> 
< / div> 
< / div> 
 
< / div> 
< / body> 
< / html>


发现问题..使用localStorage.setItem / localStorage.getItem而不是使用sessionStorage.setItem / localStorage.setItem


The below code works on Chrome but not on Firefox. I want to open the respective accordion panel on "about" page when the link for it is clicked on "home" page. [ onclick - the home page has to close and about page has to open]

Home page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
a{
margin:20px;
}
</style>
<script type='text/javascript'>//<![CDATA[


function myFunctionId (id) {
sessionStorage.setItem("sent", id); 
window.open("about.html","_self");    


}

//]]> 

</script>


</head>

<body style="padding-top:50px;">
  <a onclick="myFunctionId(this.id);" id="header1">Panel1</a></br>
  <a onclick="myFunctionId(this.id);" id="header2">Panel2</a></br>
  <a onclick="myFunctionId(this.id);" id="header3">Panel3</a></br>


</body>
</html>

About Page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Accordion</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
</style>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
    var a = sessionStorage.getItem("sent");
if (a == "header1") {
    document.getElementById('collapseOne').classList.add('in');
} else if (a == "header2") {
    document.getElementById('collapseTwo').classList.add('in');
} else if (a == "header3") {
     document.getElementById('collapseThree').classList.add('in');
}
else {
    greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
});
//]]> 

</script>

</head>
<body><p id="demo"></p>
<div class="bs-example">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse header3">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
</html>
解决方案

Found the issue..had to use localStorage.setItem / localStorage.getItem instead of using sessionStorage.setItem / localStorage.setItem

这篇关于sessionStorage.setItem不能在Firefox中工作/不能将第1页的div的ID传递到第2页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-27 18:18
Powered by LMLPHP ©2024 setItem 0.003114