Question

所以这是一个非常模糊的问题，但是说我有一个单独的.html文件，我想在一个文件中存储基本上2个网站，并在第一页上的条件成立时交换到第二页（最好是onclick javascript事件）有点像if语句（如果条件A在第一页变为真：显示第2页：继续显示第1页）这可能只是在javascript中或者我需要其他编程语言的帮助以及会是什么是最理想的解决方法吗？我希望第1页的输入场中输入的数据也可以在第2页上找到。

抱歉模糊的问题和糟糕的格式，这是我的第一个问题。

Answer 1

乔尔，我没有足够的声誉来评论，所以我必须输入答案。

本地存储允许您在用户的本地浏览器内存中存储值（显示的页码）。可以测试该值是否存在（对于真/假条件有用）并且可以读取（对于有意义的值）。

您需要做的就是绑定一个简单的本地存储对象（要显示的页码）的创建。将代码绑定到您想要的任何事件（例如按钮单击）。

localStorage.setItem('entryPage', '2');

您还需要在HTML文件中读取一些代码来决定要显示的内容（通过滚动，隐藏和显示的DIV元素或您正在使用的任何技术）。

if(localStorage.getItem('entryPage')) {
  //show page two code
}

点击此处查看完整的教程集：

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

以下是经过Chrome测试的单页解决方案，仅展示了本地存储部分的概念。您将始终位于同一HTML文件中，但加载将显示内容为1，直到您单击按钮并将本地存储设置为显示第2页，然后任何将来的加载将是第2页，直到您清除本地存储。

<!DOCTYPE html>
<html>

<body>
<div id="main-container">
    <div id="content-one" style="display:block;">
    <p>This is page one content</p>
    <button id="showTwo">Show Page 2</button>
    </div>
    <div id="content-two" style="display:none">
    <p>this is content for page 2</div>
    </div>
</div>
<script>
//this function actually swaps display
function swapper(){
  document.getElementById('content-one').style.display = 'none';
  document.getElementById('content-two').style.display = 'block';
}
//if the value exists in storage, swap them
if(localStorage.getItem('entryPage')) {
  swapper();
}
//when button clicked, swap them and store value
var btn = document.getElementById("showTwo");
btn.addEventListener("click", function(){swapper();localStorage.setItem('entryPage', '2');}, false);

</script>
</body>
</html>

要清除Chrome上的本地存储空间，请参阅此处的“本地和会话”部分： https://developer.chrome.com/devtools/docs/resource-panel#local-and-session-storage

以下是一个包含文本框的版本，它只是使用本地存储对象的值来保存您希望携带到内容页面2的数据。（请记住，如果您已经测试了上面的第一个示例，则必须清除本地存储使用下面的示例，因为否则它将永远不会显示第一个内容窗格。

<!DOCTYPE html>
<html>

<body>
<div id="main-container">
    <div id="content-one" style="display:block;">
    <p>This is page one content</p>
    <input type="text" id="theInput"></input>
    <button id="showTwo">Show Page 2</button>
    </div>
    <div id="content-two" style="display:none">
    <p>this is content for page 2</div>
    <p id="theOutput"></p>
    </div>
</div>
<script>
//this function actually swaps display and shows the value from page 1 textbox
function swapper(theValue){
  document.getElementById('content-one').style.display = 'none';
  document.getElementById('content-two').style.display = 'block';
  document.getElementById('theOutput').innerText = theValue;  
}
//if the value exists in storage, swap them and pass on the value of textbox
if(localStorage.getItem('entryPage')) {
  swapper(localStorage.getItem('entryPage'));
}

//when button clicked, swap them and store value
var btn = document.getElementById("showTwo");   
btn.addEventListener("click", function(){
    var theData = document.getElementById("theInput").value;    
    swapper();
    localStorage.setItem('entryPage', theData);
}, false);

</script>
</body>
</html>

将2个网站存储在1个文件中并在它们之间动态更改

1 个答案: