Javascript - сохранить страницу в хранилище - PullRequest
Новая
       37

Javascript - сохранить страницу в хранилище

0 голосов
/ 26 сентября 2018

У меня есть веб-сайт с несколькими страницами: page001.html, page002.html ... page199.html ...

Как использовать localalsave, чтобы он запоминал страницу, на которой находится пользователь, ипредоставить пользователю возможность загрузить ту же самую страницу, когда он вернется на веб-сайт?

Я хочу иметь кнопки сохранения и загрузки.Я просто запутался, как setItem и getItem работают в этом случае.Какое значение должно быть?

Я пробовал что-то вроде этого:

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>

Надеюсь, этот вопрос имеет смысл.Я все еще изучаю javascript и, возможно, не совсем правильно сформулирую его.

1 Ответ

0 голосов
/ 27 сентября 2018

Я только что сделал супер маленький образец для вас.Надеюсь, это поможет.

Наш статический сайт будет иметь три страницы:

  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>
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>
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>

Здесь используется ключ window.location.replace().Этот метод позволяет заменить текущий документ новым.Затем, с помощью этого window.location.replace() метода, мы просто проделали небольшую работу по вычислению url string, чтобы он соответствовал нашему сайту.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...