单击一个按钮，重新加载带有参数的窗口，然后删除按钮答案

【问题标题】：Click a button, reload window with parameters, and remove button单击一个按钮，重新加载带有参数的窗口，然后删除按钮
【发布时间】：2017-07-27 13:48:04
【问题描述】：

所以我有一个网页，其中包含一个覆盖整个页面的 div，要求客户选择他们喜欢的货币。

当他们选择美国或英国时，页面会使用 URL 中的货币参数 (/?currency=GBP) 重新加载，这会更改页面上显示的价格。

但是，无论我尝试什么，当页面重新加载时，我都无法让该 div 不显示任何内容。

所以这是弹出窗口的代码：

<div id="floatingBox">
    <div>
        The two buttons go here.
        <a href="/?currency=GBP">UK</a>
        <a href="/?currency=USD">USA</a>
    </div>
</div>

id 浮动框的样式如下：

#floatingBox {
    z-index: 39879;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

这是我正在使用的 JavaScript：

if (window.location.search.search('GBP')) {
    document.getElementById('floatingBox').display = 'none';
}

if (window.location.search.search('USD')){
    document.getElementById('floatingBox').display = 'none';
}

所以基本上一切正常，除了在用户选择一个选项时删除#floatingDiv。

当页面重新加载并且有 URL 参数时，如何让这个 div 不出现？使用 JavaScript 而不是 jQuery。

我认为使用 onclick 并运行一个使用 localStorage 的函数并为该 div 调用样式变量或类似的东西可能会更好......

任何帮助表示赞赏:)

编辑

我要去测试：

var hide = localStorage.getItem('currChoice') || 0;
if (hide == 1){
    document.getElementById('floatingBox').style.display = "none";
}

function gbpClick(){
    var currChoice = 1;
    localStorage.setItem('currChoice', currChoice);
    location.href='/?currency=GBP';
}

function usdClick(){
    var currChoice = 1;
    localStorage.setItem('currChoice', currChoice);
    location.href='/?currency=USD';
}

【问题讨论】：

与其在页面重新加载时隐藏，不如默认隐藏，在重新加载时决定是否需要显示？

标签： javascript onclick url-parameters urlparse

【解决方案1】：

处理锚标签的点击事件，在重新加载页面之前关闭你的div然后重新加载。

【讨论】：

【解决方案2】：

我在主要问题上发布的编辑完美地满足了我的需要。

这是最终代码： HTML：

<div id="floatingBox">
<div>
The two buttons go here.
<a href="/?currency=GBP">UK</a>
<a href="/?currency=USD">USA</a>
</div>
</div>

风格：

#floatingBox {
    z-index: 39879;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

JavaScript：

var hide = localStorage.getItem('currChoice') || 0;
if (hide == 1){
document.getElementById('floatingBox').style.display = "none";
localStorage.clear();
}

function gbpClick(){
var currChoice = 1;
localStorage.setItem('currChoice', currChoice);
location.href='/?currency=GBP';
}

function usdClick(){
var currChoice = 1;
localStorage.setItem('currChoice', currChoice);
location.href='/?currency=USD';
}

编辑在 if 中添加了localStorage.clear();，以确保如果用户将其 URL 从 .com/?currency=GBP 或 .com/?currency=USD 更改回 .com/，他们将再次出现弹出窗口。

【讨论】：