CODEWITHSUNDEEP
javascriptbuttonsaveloadlocal-storage
MikeMichaels
MikeMichaels

Reputation: 494

Javascript - save page to localstorage

I have a website with multiple pages: page001.html, page002.html... page199.html...

How do I use localsave to make it remember the page the user is on, and make it possible for the user to load that same page when he returns to the website?

I intend to have save and load buttons. I am just confused about how the setItem and getItem works in this case. What should the value be?

I tried something like this:

Page001.html 

function savePage() {
            localStorage.setItem("lastPageVisited", '001.html');
        }
 <p>This is page 001</p>
    <a href="002.html">Go to the Next Page</a> 
    <button onclick="savePage()">Save</button>

Page002.html 

function savePage() {
            localStorage.setItem("lastPageVisited", '002.html');
        }

function loadPage() {
            localStorage.getItem("lastPageVisited");
            window.location.href = 'LastPageVisited';
        }
<p>This is page 002</p>
    <a href="003.html">Go to the Next Page</a>
    <button onclick="savePage()">Save</button>
    <button onclick="loadPage()">Load</button>

I hope this question makes sense. I'm still learning javascript and might not be phrasing it the most correct way.

Upvotes: 1

Views: 711

Answers (1)

Tu Nguyen
Tu Nguyen

Reputation: 10179

I just made a super small sample for you. Hopefully it helps.

Our static website will have three pages:

  1. Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Index</title>
</head>

<body>
    <h2>This is the Index page</h2>
    <a href="home.html">Home</a>
    <a href="about.html">About</a>
    <button onclick="savePage()">Save</button>
    <button onclick="loadPage()">Load</button>

    <script>
        function savePage() {
            localStorage.setItem("lastPageVisited", '/index.html');
        }
        function loadPage() {
            const page = localStorage.getItem("lastPageVisited");
            const pathname = window.location.pathname;
            const url = window.location.href.replace(pathname, page);
            window.location.replace(url);
        }
    </script>
</body>

</html>

  1. Home.html

<!DOCTYPE html>
<html lang="en"> 
<head>
    <title>Home</title>
</head>
<body>
    <h2>This is the Home page</h2>
    <a href="index.html">Index</a>
    <a href="about.html">About</a>
    <button onclick="savePage()">Save</button>
    <button onclick="loadPage()">Load</button>
    <script>
        function savePage() {
            localStorage.setItem("lastPageVisited", '/home.html');
        }
        function loadPage() {
            const page = localStorage.getItem("lastPageVisited");
            const pathname = window.location.pathname;
            const url = window.location.href.replace(pathname, page);
            window.location.replace(url);
        }
    </script>
</body>
</html>

  1. About.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>About</title>
</head>
<body>
    <h2>This is the About page</h2>
    <a href="index.html">Index</a>
    <a href="home.html">About</a>
    <button onclick="savePage()">Save</button>
    <button onclick="loadPage()">Load</button>

    <script>
        function savePage() {
            localStorage.setItem("lastPageVisited", '/about.html');
        }
        function loadPage() {
            const page = localStorage.getItem("lastPageVisited");
            const pathname = window.location.pathname;
            const url = window.location.href.replace(pathname, page);
            window.location.replace(url);
        }
    </script>
</body>
</html>

The key here is using the window.location.replace() method. This method allows you replaces the current document with a new one. Then, with he help of this window.location.replace() method, we just do a little works on calculating the url string to be match with our website sitemap.

Upvotes: 1

Related Questions