I'd like to show a button on an HTML page that will grab the filename.html and title of the page and put them in localStorage. On a separate Bookmarks HTML page, I'll output all those rows, with a Delete button next to each. In this way, I could use localStorage to make Bookmark (Faves) links.

However, I'm accustomed to adding data to localStorage when the user enters information into a text field, then taps a button which calls a function to write the content to localStorage (see example of function below). I'm not sure how to simply add a button to a page and it will write those two pieces of information to localStorage. Can this be done programmatically? How can JS determine the filename.html and <title> of a page and write it to localStorage?

I have hundreds of pages I'd like to add this code to and I'm hoping I can to a search/replace (such as replace </head> with <script>code goes here</script></head>).

I expect to use this entirely resident in an app, so no PHP or ASP, etc. Only HTML, CSS, and JS. No calls to an external server allowed in this scenario.

A working example of writing to localStorage:
(Please note that the HTML portion uses Jquery, but the new pages will not.)

function persistDataTrackListing()
{ "use strict";                
var aboutTrackOne = document.getElementById('aboutTrackOne'); 
    localStorage.setItem('aboutTrackOne', aboutTrackOne.value);             
var aboutTrackTwo = document.getElementById('aboutTrackTwo'); 
    localStorage.setItem('aboutTrackTwo', aboutTrackTwo.value); 

HTML Code:
<li><a href="#track1"*data-transition="none" onchange="persistDataTrackListing()">Track 1</a></li>
<li><input type="text" name="aboutTrackOne" id="aboutTrackOne" placeholder="Name of Track 1 (30 characters)" class="singleline" data-role="none" maxlength="30" onchange="persistDataTrackListing()"></li>