Javascript - 在浏览器中单击并保存以前操作的html元素

Question

该网站是一所学校，每个上学日都有一套4节课，每节课费用为7.50英镑。当用户选择一天时，他们会转到付款页面，其中所有4个课程都会自动被选为复选框，因此总费用为30英镑。用户可以勾选或取消勾选每个框以添加或删除课程，这反过来会改变屏幕上的总金额。总金额是一个html元素，其id为#fullamount，值为£30：

<h6>Total Cost : <div id="fullamount" name="fullamount">£30</div></h6>

我遇到的问题是，如果用户进入外部付款页面（选择了他们想要的所有课程后），然后决定点击后退按钮返回原始页面 - 复选框保持不变但是总数（#fullamount）返回到30英镑的原始状态，所以如果他们只选择了2个复选框，它应该是15英镑，但它显示为30英镑，然后如果用户检查其他2个复选框，则总计变为£45

这是Javascript：

$(".cell").on("click", "input:checkbox", function () {
    var $this = $(this);
    var $total = $("#fullamount");
    var $target = $("label[for='" + $this.attr("id") + "']");
    
    var item_value = +($target.html().replace("£", "") || 0);
    var cur_total = +($total.html().replace("£", "") || 0);
    
    if ($this.prop("checked") === true) {
        cur_total += item_value;
    } else {
        cur_total -= item_value;
    }
    
    $total.html("£" + cur_total);
	$total.val(cur_total);
});
$('#myform').submit(function(e) {
    e.preventDefault();
	var $total = $("#fullamount");
  var amount = $('#amount');
  var thetotal = +($total.html().replace("£", "") || 0);
  amount.val(thetotal);

this.submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我发现很难解释，但我希望我有某种意义。寻找解决方案并与之斗争一点。任何形式的帮助或建议都会非常感激。感谢。