teapoppy teapoppy - 1 year ago 43
HTML Question

How to hide a clicked link in Javascript and save in session

I have a simple game application using Java, JSP's and CSS. When a question is clicked on the game board, it takes the user to another JSP (the question) and when the user submits their answer, they are taken back to the game board.


<td id="link"><a href="QuestionServy?question=0" onclick="myFunction()">100</a></td>

My Javascript:

function myFunction() {
document.getElementById('link').innerHTML = "";

The problem is that when a user chooses a question and submits, they are redirected back to the game board page, and the state isn't saved.

I have researched and found that you can use sessionStorage, but I'm not quite sure how to implement it.

Any help would be greatly appreciated!


What the program currently looks like:
game board

What it should look like after first link has been clicked:
game board after click

Answer Source

You can need to use window.localStorage.

Question page

You can use the getItem and setItem functions easily like so:

function myFunction () {
    window.localStorage.setItem('answer1', 'bla bla bla');

    document.getElementById('link').innerHTML = "";

Answer page

You can get this value anywhere in the app (even between different sessions) like so:

var answer1 = window.localStorage.getItem('answer1');


sessionStorage is only saved for a single session, and (as mentioned here)

Opening a page in a new tab or window will cause a new session to be initiated

Since you are opening the Question page in a new tab, and not within the same page (SPA style), your sessionStorage will expire.


Just replace window.sessionStorage with window.localStorage

Hope that helps :)