PHPが使えない環境でもいいねボタン風の物が作れないか検証中（9/21追記）

タイトルの通りです。
殆んどの無料ホームページ作成スペースではPHPが使えません。
もとい、有料でもモバイル向けは正直使えません。
何処だよと言われるとnanoさんとかerlaさんとかになるんですが、とは言えALICE+さんはあるんですけどね。簡易的な物がブログ機能とかに。

でもやっぱりnanoさんやerlaさんでもいいねボタン風の物があるなら使いたいじゃないですか。
個人的には小説機能でページ毎に欲しいんですよ。
と、言うことで出来るか出来ないかは置いといて。
作ってみようと思い至りました。
どうしようかと言うと、ボタンをクリックすると数字が増えるカウントボタンで代用出来ないかなと。

と言う事でやってみました。
ここで初めてjsと今まで認識していたものの本名、否、正式名称を知る事に、ジャバスクリプト。

ジャバスクリプトにまだ手を出すつもりはなかったんですが、なんか自ずと手を出す事になってしまった、、

そして作ったのがこれです。

これだあぁあ

ハートのアイコンをクリックすると数字が増えます！
やったー！イメージ通り～！と思ったのも束の間、なんとブラウザバックすると数字が0に戻ってしまうんです……！（そりゃそうだ）
普通に考えれば分かる事だった、むしろ何故気付かなかった……。

ちなみにbodyへ入れたのはこちらです。

<ul class="fas_menu_horizontopicon"><li>
<a href="#"><p class="faa-parent animated-hover"><i class="far fa-paper-plane"></i></p>本編</a>
</li>
<li>

  <p class="faa-parent animated-hover" id="increment"><i class="far fa-heart faa-wrench"></i></p><span>好き</span>
 <span id="counter">0</span>
</li>
<li>

<a href="#"><p class="faa-parent animated-hover"><i class="fas fa-home"></i></p>HOME</a>
</li>

</li>
</ul>
<br>
<script>
const state = { count: 0 };

const btn = document.getElementById('increment');
btn.addEventListener('click', () => {
  const counter = document.getElementById('counter');
  counter.innerHTML = ++state.count;
});
</script>

headへはこちら

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all">

<meta name="viewport" content="width=device-width,initial-scale=1">

<style type="text/css">


/*アイコン*/
.fas_menu_horizontopicon{
        width: fit-content;
        margin: auto;
	padding: 0; 
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}
.fas_menu_horizontopicon li{
        width: fit-content;
        margin: auto;
	list-style: none;
	margin: 0 60px 0 0;
	width: 50px;
	text-align: center;
}
.fas_menu_horizontopicon li:last-child{
	margin-right: 0px;
}
.fas_menu_horizontopicon li a{
	text-decoration: none;
	display: inline-block;
	font-size: 15px; /* 文字大きさ */
	line-height: 1.0;
	color: #3E4658;
}
.fas_menu_horizontopicon li a i{
	display: block;
	font-size: 30px; /* アイコン大きさ */
	line-height: 1em;
	margin-bottom: 5px;
}

.fas_menu_horizontopicon p{
	display: block;
	font-size: 30px; /* アイコン大きさ */
	line-height: 1em;
	margin-bottom: 1px;
        color: #3E4658;
}

.fas_menu_horizontopicon span{
	text-decoration: none;
	display: inline-block;
	font-size: 15px; /* 文字大きさ */
	line-height: 1.0;
	color: #3E4658;
}

</style>

それでも絶対ブラウザバックしても数字がリセットされない方法があると信じて探してみました。

こちらを参考にしてみました。
その名も値が保持されるカウンター

【JavaScript】LocalStorageで値が保持されるカウンター作成 - Qiita

さっそく検証したところ、確かにブラウザバックしても数字がリセットされることなく数字を引き継ぐ事ができました…！
よしあとはこれをどうアイコンに置き換えるかだわ～！と色々やってみて、ある問題に気付きました……。

確かに数字がリセットされない、数字を引き継ぐ事が可能。だがしかし。
どのページでも同様の数字が表示されてしまう……！

冒頭でも述べましたが、私が目指しているのは小説機能でページ毎にいいね数を集計したい。

つまり全ページの合計だと困るんですよ……！
それにこれはじゃあ作品毎のいいね数にも分けられない。
全作品のいいね数の合計になってしまう！

と言う事で、今絶賛悩み中です（絶賛とは）

いやでも多分絶対出来ると思うんですよ。ページ毎のクリック数を保持して引き継ぎが、おそらく多分出来ると思うんですよ。
あともう少し、おしいところまで来てると思う、、
でもジャバスクリプトの本立ち読みしてみたけど、なんかもう良く分からんかった……！

うわーんこっからどうしたらいいんだーー！
わーー諦めないからなーー！

と言う事で、どなたかよい方法があればアドバイスお願いします（実はもう自分の力と理解力と知識と検索力ではお手上げの域に達している）

ぜっっっったい、いいね風ボタンを作ってみせるんだ……………。

9/21追記
よっしゃーー！と思ったのもつかの間でした。
何一つ前進などしていなかった……。
その現実に気付いてしまった今日この頃（絶望）
CookieとLocal Storageについて調べて気付いてしまった。
そもそもブラウザに保存するのが前提ならブラウザが切り替わってしまえばせっかくクリックしてカウントした数値は意味をなさないのでは？と、実際ブラウザを変えてみたところ値が0…おう、振り出しだ。
そして以下が私に現実を突き付けてくれた記事です。

ブラウザに情報を保存する方法まとめ（In-Memory/Cookie/Local Storage/Session Storage）

分かりやすく書いてあり助かりました。
ありがとうございます。

（虚無）

とは言えこの方法が無理だって分かっただけでも十分前進です！
何しろ知らなかったことを一つ知ったわけだから、この繰り返しが楽しいから好きだわ本当。

コメントでCookieについて教えてくださった方もありがとうございました！お陰で勉強になりました！

さぁて何かいいねボタンの代用になりそうな良いアイディアないかな～。
こうなんていうかどうしてもアイコンリンクは三つ欲しいし（そんな理由？？）