单击按钮后显示另一个（永久）按钮
[英]show another (permanent) button after clicked button
问题描述
I'm trying to display another button after I clicked on the existing button, but i want that the new button created stays permanently on the page, no disappear when i refresh the page. 
单击现有按钮后，我试图显示另一个按钮，但我希望创建的新按钮永久保留在页面上，刷新页面时不消失。 Any clue? 有什么线索吗？
function addBtn(){ document.getElementById('btnHolder').innerHTML = '<input type="button" value="Click" />'; }
<div id=btnOne> <input type=button onClick=javascript:addBtn(); value='Click' /></div> <div id=btnHolder></div>
3 个解决方案
解决方案1
0 2018-05-31 12:46:52
You could always use your browsers window.localStorage like this: 您可以像这样始终使用浏览器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>
Full Disclosure: This will work in your browser so long as you include your script at the end of your html body (last line) like the above code example so it can find the html elements. 完全披露：只要您在 html正文（最后一行） 的末尾包含脚本（如上述代码示例），它就可以在您的浏览器中使用，以便可以找到html元素。 If the user switches browsers there will still only be one button. 如果用户切换浏览器，仍然只有一个按钮。 If you want that kind of functionality you will have to do it server side. 如果您想要这种功能，则必须在服务器端进行。
To find more out about Local Storage you can read this 要了解有关本地存储的更多信息，可以阅读以下内容
解决方案2
0 2018-05-31 13:06:31
you can put a cookie on the browser of the user and check on the load of the page if the cookie exist like this : 您可以将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>
if you want delete the cookie, you have to use : 如果要删除cookie，则必须使用：
delCookie(cname) {
document.cookie = cname+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
like that : 像那样 ：
解决方案3
-1 2018-05-31 12:47:52
There is a way, you can use localStorage . 有一种方法，可以使用localStorage 。
Basicly when you enter the page he checks the storage if some button is added 基本上，当您进入页面时，他会检查存储空间是否添加了某些按钮
localStorage.getItem('addedBtn');
in the code above, you check if the addedBtn key exist on your browser storage, if not mantain the logic of your button (clicking will add the btn), but it will not just add the button, it will also add a new entry to the storage. 在上面的代码中，您检查浏览器存储中是否存在addedBtn键，如果不保留按钮的逻辑（单击将添加btn），但它不仅会添加按钮，还会在其中添加新条目存储空间。
localStorage.setItem('addedBtn', 'value');
the above code receives the key and you can pass the value, in this case you can just see if in the storage the key already exist. 上面的代码接收了密钥，您可以传递值，在这种情况下，您可以只查看密钥在存储中是否已经存在。
full code 完整的代码
function addBtn(){
if(localStorage.getItem('addedBtn') != null)
document.getElementById('btnHolder').innerHTML = '<input type="button"
value="Click" />';
localStorage.setItem('addedBtn','anyValueYouWant')
}
}
of course there are other solutions, but the other solutions i can imagine need a database, in this case the browser works as your local database. 当然，还有其他解决方案，但是我可以想象其他解决方案需要一个数据库，在这种情况下，浏览器可以用作您的本地数据库。
hope it helps 希望能帮助到你
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.