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());
});
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).
let location = this.rendition.currentLocation();
let cfiString = location.start.cfi; // this is what you want to save
this.rendition.display(cfiString);