Javascriptのクリックイベントについて

Question

前提・実現したいこと

プログラミング初心者です。
初歩的な質問で申し訳ありません。
PHPとJavascriptを使用して、ボタンをクリックをすると「追加」→「削除」と文字が変更。再度クリックすると「削除」→「追加」へ変更されるようなものを作りたいです。

発生している問題

作成したボタンは動作しますが、「追加」ボタンをクリックした後でブラウザを更新すると表示は「追加」に戻ってしまいます。

該当のソースコード

<?php echo '<input id="btn_toggle" type="submit" name="toggle" value="追加" onclick="change()">'; ?>

function change()
{
    var elem = document.getElementById("btn_toggle");
   if (elem.value=="削除") elem.value = "追加";
    else elem.value = "削除";

}

質問

①クリック処理を保持したままにするには、変更内容をlocalstorageに保存する処理を追加するのでしょうか？
②また、その場合どのように記述したらよいかご教授いただければ幸いです。
何卒、よろしくお願いいたします。

Comments

[m.ts10806]

localstorage　という情報を得たのならまず試してみるところからでは。
それに、PHPは本件と本質的には関係ないかと思いますが。

Answer 1

jsでtoggleのvalueを切り替えるのは意味がありません
（サブミットされてしまうので）

Comments

[yambejp]

単純な処理だとこう

<?php
$toggle=filter_input(INPUT_GET,"toggle");
$toggle=$toggle=="追加"?"削除":"追加";
?>
<form method="get">
<input id="btn_toggle" type="submit" name="toggle" value="<?=$toggle;?>">
</form>

値を保持したいなら、クッキーやセッションを利用するとよいでしょう