How to load the last visited page in epub.js

Question

I am building a simple epub reader. I am using epub.js . I want the app to load the last page, what ever page the user was on before he closed the book/reader.

Here is my code:

const epubBook = "{{ bookpath }}";

var book = ePub(epubBook);
var rendition = book.renderTo("viewer", {manager: "continuous", flow: "scrolled", width: "100%", height: "100%", snap: true  } );

var displayed = rendition.display();

book.ready.then(function() {
      const stored = localStorage.getItem(book.key() + '-locations');
      //console.log('metadata:', book.package.metadata);
      bookTitleDiv.innerHTML = book.package.metadata['title']
      if (stored) {
          return book.locations.load(stored);
      } else {
          return book.locations.generate(1024).then( ()=>{
            localStorage.setItem(key, book.locations.save());
          }).catch( err => console.error("error generating locations: ", err)); // Generates CFI for every X characters (Characters per/page)
      }
}).then(function(location) { // This promise will take a little while to return (About 20 seconds or so for Moby Dick)
      localStorage.setItem(book.key() + '-locations', book.locations.save());
});

Answer 1

If you just save the page number, your code will break once a user changes the font size of the book or resize the reader. In that case, your total page number can increase/decrease and just relying on the page number could lead you to the wrong page or you might end up going out of bounds (your page number > amount pages of book).

A safe way to save the page would be to save the CFI position string of that page (instead of the page number). These strings look kinda like this: epubcfi(/6/4[chap01ref]!/4[body01]/10[para05]/2/1:3).

How to get the CFI position string of the current page:

    let location = this.rendition.currentLocation();
    let cfiString = location.start.cfi; // this is what you want to save

Navigate to a certain location:

    this.rendition.display(cfiString);