Q:

How to keep button state across different pages?

When I do a click, I assign a disabled attribute to the button:
$(".save_post").on("click", function() {
    $(this).attr("disabled", "true");
});

However, if I change page and then I go back to this one, the button should keep the disabled attribute given, this is fine if I use localStorage:
localStorage.setItem("savedArticle", "savedButton");
var myButtonState = localStorage.getItem("savedArticle", "savedButton");
$(".save_post").addClass(myButtonState);

However, I have different pages which can have <button type="button" class="save_post">SAVE</button> so each time I click on a button, a disabled attribute is given, but if I use the localStorage like above, it will add myButtonState to all buttons with class .save_post each time we land on a page with it.
I am trying to add the attribute only to the buttons really clicked.

A:

Just assign an ID to each .save_post element:
<button id="savePost1" class="save_post">Save Post</button>

And then reference the ID:
$('.save_post').on('click', function() {
    $(this).attr("disabled", "true");
    localStorage.setItem('saveButton', $(this).attr('id'));
});

And then call it on load:
$('#'+localStorage.getItem('saveButton')).attr('disabled', true);

