Fatal编程技术网
  • javascript/
  • Javascript 单击按钮后显示另一个（永久）按钮

Javascript 单击按钮后显示另一个（永久）按钮

javascript html

Javascript 单击按钮后显示另一个（永久）按钮,javascript,html,Javascript,Html,我试图在单击现有按钮后显示另一个按钮，但我希望创建的新按钮永久保留在页面上，刷新页面时不会消失。有线索吗 函数addBtn（）{ document.getElementById（'btnHolder'）。innerHTML=''； } 您可以始终使用浏览器窗口。localStorage如下所示： <body> <div id=btnOne> <input type=button onClick=javascript:addBtn(); value='Cl

我试图在单击现有按钮后显示另一个按钮，但我希望创建的新按钮永久保留在页面上，刷新页面时不会消失。有线索吗

函数addBtn（）{
document.getElementById（'btnHolder'）。innerHTML=''；
}
您可以始终使用浏览器
窗口。localStorage
如下所示：

<body>

    <div id=btnOne> <input type=button onClick=javascript:addBtn(); value='Click' /></div>
    <div id=btnHolder></div>

    <script>
        const buttonStorage = window.localStorage;

        console.log(buttonStorage.getItem('button'));

        function addBtn(){
          document.getElementById('btnHolder').innerHTML = '<input type="button"  value="Click" />';
          buttonStorage.setItem('button', true);
        }

        if(buttonStorage.getItem('button')) {
          document.getElementById('btnHolder').innerHTML = '<input type="button"  value="Click" />';
        }
    </script>

</body>


const buttonStorage=window.localStorage；
console.log（buttonStorage.getItem（'button'））；
函数addBtn（）{
document.getElementById（'btnHolder'）。innerHTML=''；
buttonStorage.setItem（'button'，true）；
}
if（buttonStorage.getItem（'button'））{
document.getElementById（'btnHolder'）。innerHTML=''；
}
完全公开：只要像上面的代码示例一样在html正文（最后一行）的末尾包含脚本，它就可以在浏览器中工作，这样它就可以找到html元素。如果用户切换浏览器，仍然只有一个按钮。如果您想要这种功能，就必须在服务器端完成

要了解有关本地存储的更多信息，您可以

始终使用浏览器的
窗口。本地存储
如下所示：

<body>

    <div id=btnOne> <input type=button onClick=javascript:addBtn(); value='Click' /></div>
    <div id=btnHolder></div>

    <script>
        const buttonStorage = window.localStorage;

        console.log(buttonStorage.getItem('button'));

        function addBtn(){
          document.getElementById('btnHolder').innerHTML = '<input type="button"  value="Click" />';
          buttonStorage.setItem('button', true);
        }

        if(buttonStorage.getItem('button')) {
          document.getElementById('btnHolder').innerHTML = '<input type="button"  value="Click" />';
        }
    </script>

</body>


const buttonStorage=window.localStorage；
console.log（buttonStorage.getItem（'button'））；
函数addBtn（）{
document.getElementById（'btnHolder'）。innerHTML=''；
buttonStorage.setItem（'button'，true）；
}
if（buttonStorage.getItem（'button'））{
document.getElementById（'btnHolder'）。innerHTML=''；
}
完全公开：只要像上面的代码示例一样在html正文（最后一行）的末尾包含脚本，它就可以在浏览器中工作，这样它就可以找到html元素。如果用户切换浏览器，仍然只有一个按钮。如果您想要这种功能，就必须在服务器端完成

要了解有关本地存储的更多信息，您可以

有一种方法，您可以使用localStorage

基本上，当你进入页面时，如果添加了一些按钮，他会检查存储

localStorage.getItem('addedBtn');
在上面的代码中，检查浏览器存储中是否存在addedBtn键，如果不保留按钮的逻辑（单击将添加btn），但它不仅会添加按钮，还会向存储中添加新条目

localStorage.setItem('addedBtn', 'value');
上面的代码接收密钥，您可以传递该值，在这种情况下，您只需查看存储器中是否已经存在该密钥

完整代码

function addBtn(){
  if(localStorage.getItem('addedBtn') != null)
    document.getElementById('btnHolder').innerHTML = '<input type="button"  
    value="Click" />';
    localStorage.setItem('addedBtn','anyValueYouWant')
  }
}

函数addBtn（）{
if（localStorage.getItem（'addedBtn'）！=null）
document.getElementById（'btnHolder'）。innerHTML=''；
setItem（'addedBtn'，'anyValueYouWant'）
}
}
当然还有其他的解决方案，但是我可以想象其他的解决方案需要一个数据库，在这种情况下，浏览器就像您的本地数据库一样工作

希望对您有所帮助

有一种方法，您可以使用本地存储

基本上，当你进入页面时，如果添加了一些按钮，他会检查存储

localStorage.getItem('addedBtn');
在上面的代码中，检查浏览器存储中是否存在addedBtn键，如果不保留按钮的逻辑（单击将添加btn），但它不仅会添加按钮，还会向存储中添加新条目

localStorage.setItem('addedBtn', 'value');
上面的代码接收密钥，您可以传递该值，在这种情况下，您只需查看存储器中是否已经存在该密钥

完整代码

function addBtn(){
  if(localStorage.getItem('addedBtn') != null)
    document.getElementById('btnHolder').innerHTML = '<input type="button"  
    value="Click" />';
    localStorage.setItem('addedBtn','anyValueYouWant')
  }
}

函数addBtn（）{
if（localStorage.getItem（'addedBtn'）！=null）
document.getElementById（'btnHolder'）。innerHTML=''；
setItem（'addedBtn'，'anyValueYouWant'）
}
}
当然还有其他的解决方案，但是我可以想象其他的解决方案需要一个数据库，在这种情况下，浏览器就像您的本地数据库一样工作

希望它有帮助

您可以在用户的浏览器上放置cookie，并检查页面的加载情况，如果cookie存在，如下所示：

<!DOCTYPE html>

<head>
<title>Stack Overflow</title>
<body onload="checkBtn()">
<div id=btnOne> <input type=button onClick=javascript:addBtn(); value='Click' /></div>
<div id=btnHolder style="display:none"><input type="button"  value="Click" /></div>
<script>
function addBtn(){
    if(getCookie("btn"))
        document.getElementById('btnHolder').style.display = ''; 
    document.getElementById('btnHolder').style.display = ''; 
    setCookie("btn",true,5);
  }
function checkBtn(){
    if(getCookie("btn"))
        document.getElementById('btnHolder').style.display = ''; 
  }
function setCookie(cname,cvalue,exdays) {
              var d = new Date();
              d.setTime(d.getTime() + (exdays*24*60*60*1000));
              var expires = "expires=" + d.toGMTString();
              document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
          }
function  getCookie(cname){
            return (document.cookie.match('(^|; )'+ cname +'=([^;]*)')||0)[2]
        }

</script>
</body>
如下所示：

您可以在用户的浏览器上放置一个cookie，并检查页面的加载是否存在cookie，如下所示：

<!DOCTYPE html>

<head>
<title>Stack Overflow</title>
<body onload="checkBtn()">
<div id=btnOne> <input type=button onClick=javascript:addBtn(); value='Click' /></div>
<div id=btnHolder style="display:none"><input type="button"  value="Click" /></div>
<script>
function addBtn(){
    if(getCookie("btn"))
        document.getElementById('btnHolder').style.display = ''; 
    document.getElementById('btnHolder').style.display = ''; 
    setCookie("btn",true,5);
  }
function checkBtn(){
    if(getCookie("btn"))
        document.getElementById('btnHolder').style.display = ''; 
  }
function setCookie(cname,cvalue,exdays) {
              var d = new Date();
              d.setTime(d.getTime() + (exdays*24*60*60*1000));
              var expires = "expires=" + d.toGMTString();
              document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
          }
function  getCookie(cname){
            return (document.cookie.match('(^|; )'+ cname +'=([^;]*)')||0)[2]
        }

</script>
</body>
类似于：

要执行此操作，您需要将该配置存储在cookie（）或本地数据库（）中。要执行此操作，您需要将该配置存储在cookie（）或本地数据库（）中。@Flory您的问题有进展吗？@Flory您的问题有进展吗？