如何在不同页面之间保持按钮状态？

Question

当我单击时，我将disabled attribute 分配给按钮：

$(".save_post").on("click", function() {
    $(this).attr("disabled", "true");
});

但是，如果我更改页面然后返回此页面，则按钮应保留给定的 disabled 属性，如果我使用 localStorage 这很好：

localStorage.setItem("savedArticle", "savedButton");
var myButtonState = localStorage.getItem("savedArticle", "savedButton");
$(".save_post").addClass(myButtonState);

但是，我有不同的页面可以有<button type="button" class="save_post">SAVE</button>，所以每次我点击一个按钮时，都会给出一个disabled attribute，但如果我像上面一样使用localStorage，它会添加myButtonState每次我们用它登陆一个页面时，带有 .save_post 类的按钮。

我正在尝试仅将属性添加到真正点击的按钮。

Answer 1

只需为每个 .save_post 元素分配一个 ID：

<button id="savePost1" class="save_post">Save Post</button>

然后引用ID：

$('.save_post').on('click', function() {
    $(this).attr("disabled", "true");
    localStorage.setItem('saveButton', $(this).attr('id'));
});

然后在加载时调用它：

$('#'+localStorage.getItem('saveButton')).attr('disabled', true);