Помните последнее сообщение, которое я прочитал


В настоящее время я публикую серию книг с WP (не на английском языке). Книги, главы и подразделы расположены таким образом: Каждая книга (категория) разделена на главы (подкатегории), которые разделены на подразделы (сообщения). Веб-сайт полностью открыт и не требует учетной записи пользователя/входа в систему. Управление комментариями осуществляется с помощью плагина Disqus.

Есть ли способ создать/обновить файл cookie с навигационной информацией, чтобы, когда читатель уйдет и вернется на следующий день, сайт автоматически переходит к последнему сообщению?

ИЗМЕНИТЬ:

MS Word 2013 имеет реализацию аналогичной функциональности. При открытии большого документа появляется информационное окно "Добро пожаловать, продолжайте с того места, где вы остановились". Это был бы приятный прием для преданного читателя.

Author: Gjermund Dahl, 2015-11-07

1 answers

Мне нравится этот вопрос, поэтому я сам взглянул на него. Лучший способ, который я мог придумать, - это использовать localstorage и jQuery для хранения текущего URL-адреса и положения прокрутки пользователя. Затем вы можете либо выполнить проверку, когда они вернутся на эту страницу, либо нажать кнопку "продолжить чтение", которая будет извлекать URL-адрес и положение прокрутки, отправляя пользователя именно в эту точку.

JS

if(typeof(Storage) !== "undefined") {

Проверьте, поддерживается ли локальное хранилище

var storedResult = localStorage.getItem("location");
var storedURL = localStorage.getItem("url");

Получить сохраненный URL-адрес и расположение прокрутки

 if (storedURL !== 'undefined' && storedResult !== null) {

Проверьте, сохранен ли URL-адрес var currentUrl = окно.местоположение. href; Получить текущий URL-адрес

     if (currentUrl != storedURL) {

Проверьте, не совпадают ли текущий URL-адрес и Сохраненный URL-адрес.

Отправить пользователя на сохраненный URL-адрес. Вы, вероятно, захотите активировать это с помощью кнопки "продолжить чтение" или чего-то еще, иначе вы можете в конечном итоге отправить пользователей туда, куда они не хотят идти.

}
    else if (storedResult !== 'undefined' && storedResult !== null) {

Кроме того, если проверить, является ли расположение прокрутки окна сохранено.

        $(window).scrollTop(storedResult);

Прокрутите до этого места.

}
 } 
    $(window).scroll(function () { 

При событии прокрутки

    var scrolledDown = window.scrollY;
    var currentUrl = window.location.href;

Получить зелье прокрутки окна и URL-адрес

    localStorage.setItem("location", scrolledDown);
    localStorage.setItem("url", currentUrl);

Хранить в локальном хранилище.

});

 } else {

    //No Web Storage Support.
 }

Все вместе

if(typeof(Storage) !== "undefined") {
//Check is local storage is supported

var storedResult = localStorage.getItem("location");
var storedURL = localStorage.getItem("url");
//Get the Stored URL and Scroll Location

 if (storedURL !== 'undefined' && storedResult !== null) {
     //Check if the URL is stored
     var currentUrl = window.location.href;
     //Get the current URL
     if (currentUrl != storedURL) {
         //Check if the current URL and Stored URL Do Not match.

         // send user to stored URL. You would probably want to trigger this on a "continue reading" button or something otherwise you could end up sending users where they dont wish to go.
     }

    else if (storedResult !== 'undefined' && storedResult !== null) {
        //elseif check if the window scroll location is stored.

        $(window).scrollTop(storedResult);
        //scroll to that location.
    }
 }

$(window).scroll(function () { 
    //On scroll event
    var scrolledDown = window.scrollY;
    var currentUrl = window.location.href;
    // get the window scroll potion and url
    localStorage.setItem("location", scrolledDown);
    localStorage.setItem("url", currentUrl);
    // store in local storage.
});

} else {
    // No Web Storage Support.
}

Демонстрационная версия

Jsfiddle: https://jsfiddle.net/fg9uok4L/

Ресурсы

JQuery.Вершина прокрутки: http://api.jquery.com/scrollTop / jQuery.прокрутка: http://api.jquery.com/scroll / Локальное хранилище: http://www.smashingmagazine.com/2010/10/local-storage-and-how-to-use-it/

Не уверен в производительности, если это не проверено.

 4
Author: Mark, 2015-11-10 02:10:42