Question 181876 in Html Question posted in
Some basic documentation can be found here.

HTML/Javascript: Switch between different pages without losing progress

test.html 
<html>
    <head>
        <title>My New Page!</title>
        <style></style>
    </head>
    <body>
        <a href="test2.html" style="text-align: center;">Test 2</a>
        <button id="button">Test 1</button>
    </body>
    <script>
        const button = document.getElementById("button")
        button.addEventListener("click", () => {button.innerHTML = "Changed 1"})
    </script>
</html>

test2.html
<html>
    <head>
        <title>My New Page!</title>
        <style></style>
    </head>
    <body>
        <a href="test.html" style="text-align: center;">Test 1</a>
        <button id="button">Test 2</button>
    </body>
    <script>
        const button = document.getElementById("button")
        button.addEventListener("click", () => {button.innerHTML = "Changed 2"})
    </script>
</html>

Lets say I have 2 independent files, both will change the text of the button when they click on them.

(I have deliberately used the same ID value).

I would like to be able to switch between these pages without losing the changes. One way I can do this is I can add a link href link pointing to the other file for each file (as shown in the code), but that will cause us to lose the changes.

Is it possible to do this while differentiating the ID values (even though the id’s of the buttons are the same)? I was considering using iframe tags for each file, inside a "universal" file but I want to know if there was another way.

Tags:

2

Answers


  1. 0 
        // Handle page navigation
        $('a').on('click', function(event) {
            event.preventDefault();
            var page = $(this).attr('href');
            loadPage(page);
        });
    Login or Signup to reply.
  2. 0

    You can save any string data in sessionStorage or localStorage. An interesting option would be providing some generic serialize function like this:

    // loads and saves HTML element's text automatically
window.serializeText = (elem, storage = sessionStorage) => {

    const key = `${window.location.pathname}/${elem.id}/text`;

    elem.textContent = storage.getItem(key) ?? elem.textContent;

    new MutationObserver(() =>
        storage.setItem(key, elem.textContent)
    ).observe(elem, { childList: true });

    return elem;
};

    index.html

    <html>
  <head>
    <title>My New Page!</title>
    <script src="serialize.js"></script>
  </head>
  <body>
    <a href="page2.html" style="text-align: center;">Test 2</a>
    <button id="button">Test 1</button>
  </body>
  <script>
    const button = serializeText(document.getElementById("button"));
    button.addEventListener("click", () => button.innerHTML = "Changed 1");
  </script>
</html>

    page2.html

    <html>
  <head>
    <title>My New Page 2!</title>
    <script src="serialize.js"></script>
  </head>
  <body>
    <a href="index.html" style="text-align: center;">Test 1</a>
    <button id="button">Test 2</button>
  </body>
  <script>
    const button = serializeText(document.getElementById("button"));
    button.addEventListener("click", () => button.innerHTML = "Changed 2");
  </script>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search