javascript - 让按钮永久消失

Question

我有一种情况，当用户点击页面A中的按钮时，按钮会消失并转到页面B。当用户返回页面A时，按钮仍然会消失。是否有可能做到这一点？这听起来符合逻辑吗？

<table>
        <tr>
            <th>Booking Number</th>
            <th>checkin</th>
            <th>checkout</th>
            <th>Num. of days</th>
            <th>Total Charges</th>
            <th>Breakfast</th>
            <th>accommodation ID</th>
        </tr>
    <c:forEach items="${books}" var="book">
            <tr>
                <td><c:out value="${book.bookingnum}" /></td>
                <td><c:out value="${book.checkin}" /></td>
                <td><c:out value="${book.checkout}" /></td>
                <td><c:out value="${book.numofdays}" /></td>
                <td><c:out value="${book.totalcharges}" /></td>
                <td><c:out value="${book.bfast}" /></td>
                <td><c:out value="${book.accid}" /></td>
                <td>
                <form name="reserveSubmitForm" method="post" action="Payment1Controller?action=createPayment&bookingnum=<c:out value="${book.bookingnum}"/>">
                <input  type="submit" class="btn btn-primary btn-block" value="Pay">onclick="style.display = 'none'"
                <input type="hidden" name="totalcharges" id="totalcharges" value="${book.totalcharges}"/>
                </form>
                </td>
            </tr>
    </c:forEach>
</table>

Answer 1

单击按钮时，您可以在 sessionStorage 中设置一个值。另外，在页面加载时，检查 sessionStorage 中是否存在该值，如果存在，则隐藏该按钮。例如:

<a href="foo">foo</a>

JS:

const a = document.querySelector('a');
if (sessionStorage.clickedA) a.style.display = 'none';
a.addEventListener('click', () => {
  sessionStorage.clickedA = 'clicked';
});

https://jsfiddle.net/qfsuLyc3/

我认为 cookie 不是一个好主意，因为它的信息似乎只与客户端相关，与服务器无关。 (cookies将被发送到服务器)

sessionStorage 在页面 session 中持续存在。如果您希望即使在重新打开浏览器后仍隐藏该按钮，请改用 localStorage，它使用文件系统而不是内存，并且是持久的。