I can create buttons that allow a user to change the font, font size, and font color/background color for a page through JS. However, he would have to make those changes all over again for the next page.

What coding is involved to allow a user to change a CSS setting that applies to all pages during that session? I am talking about an offline app, so we can't use PHP/MySQL and similar technologies. HTML/CSS/JS is the best for this project, though localStorage can be used too.

Right now I can change the CSS of the <p> on a page by simply writing the style on the page in a span's innerHTML. When that happens, it overwrites the external style sheet settings because of the rule of same-page style location over external style location.

Which will be written to the span tag's innerHTML at the top of the page:

<span id="changeSize"></span>

This works perfectly in my project. But it doesn't work across pages. So I'm trying it out in localStorage, which all the pages should have access to. OnClick, this should write the chosen style for the font size innerHTML into storage (compare to script above):

However, I don't know why it is not persisting across pages that are accessing the same external JS file. Is there something wrong with this theory? Google Tools shows the fields in localstorage, but with value of undefined in each.

Do you know why this doesn't load the data into the span ID's "changeSize" innerHTML when body onLoad is LoadData()? When it loads, it should change the size of the <p> elements on the page, but the sizes stay the same.