Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以随时使用浏览器window.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>

完全披露：只要您将html正文（最后一行）的脚本包含在上面的代码示例中，就可以在浏览器中使用，这样就可以找到html元素。如果用户切换浏览器，则仍然只有一个按钮。如果您需要这种功能，则必须在服务器端执行此操作。

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

Answer 2

您可以在用户的浏览器上放置一个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，则必须使用：

delCookie(cname) {
            document.cookie = cname+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
        }

像那样：

Answer 3

有一种方法，您可以使用 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')
  }
}

当然还有其他解决方案，但我能想象的其他解决方案需要一个数据库，在这种情况下，浏览器就像本地数据库一样。

希望有所帮助

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

3 个答案: