javascriptでcookieに日本語(漢字・かな)をセットする方法について

Question

reactの練習でカウンター・データ記録アプリ(webサービス)を作っています。今回reactはあまり関係ないと思いますが。

フォームに店名(日本語)を入力してもらい、サブミットでページ遷移後のページでphpでデータベースに書き込み。という普通の流れなのですが、Reactでフォームを設置しているので、
入力値をクッキーに書き込み→ページ遷移後phpを利用して$_COOKIE[]変数にセットされている値をテーブルに書き込み、というふうになりました。数値は問題ないのですが、店名(日本語)をデータベースに書き込もうとした時不具合が出ました。(何も書き込めないorまったく違うアルファベットが書き込まれる)

https://memo.ark-under.net/memo/404
↑のページなど調べた結果、Cookieに日本語をそのままセットしようとすると不具合が出るのでエスケープしてセットする必要がある、ということでした。

ということで、

            let init_place;
			if(localStorage.getItem('place')==null){
				init_place="";
			}else{
				init_place=localStorage.getItem('place');	//←リロード用
			}
			document.cookie='place='+encodeURIComponent(init_place);

上記のようにクッキーに入力文字列をエンコード(エスケープ)してセット
(上記サイトではescape関数、unescape関数を使用されてましたが、
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/escape
で非推奨とありましたのでencodeURIComponent関数を使用)
↓
遷移後ページでエンコードされた値をデータベースにphpで保存
↓
過去の記録を表示する部分で、データベースから取得した値をデコードして表示

という流れでやるのだろうと思いました。これが自然な流れだと思います。
(リロードしても状態を保持するために、もともとフォーム入力値をコンポーネントのstateにセット→stateが変更されるごとにlocalStorageに値をセット、ということをしてます。なのでクッキーにセットする時もlocalstorageの値をセットしています。)

それはそれとして、まず上記のコードのみでデータベースに保存したらどうなるか動かしてみたのですが、
日本語(漢字・かな)が正常に保存されました。そして表示する時も

	<?php
		if($count<1){
			print"過去ログはありません。<br>";
		}else{
			while($row=$stmh->fetch(PDO::FETCH_ASSOC)){
		?>
				<p>日時:<?php echo($row['created_at']) ?></p>
				<p>店名:<?php echo($row['place']) ?></p>
                   ...

上記のように全くデコードせずにただ表示して、正常に日本語が表示されたのでびっくりしました。
これで問題は解決したのですが、これ、デコードしなくていいんでしょうか？
普通に考えてエンコードしたものをデコードして初めて日本語が正常に表示されるのが自然だと思います。
なぜこの状況で出力(表示)まで日本語でできるんでしょうか。

あとこれはスマホでの現象で、パソコンで入力した場合、そもそもエンコードしなくても日本語が正常にデータベース保存・出力ともにできてました。

Answer 1

PHPで処理する際のcookieのvalueは自動でURLエンコード/デコードされます。

https://www.php.net/manual/ja/function.setcookie.php#example-5637

クッキーの value の部分は、クッキーの送信を行う際に自動的に URL エンコードされ、またクッキーを受信した際は、自動的にデコード されてクッキー名と同じ名前の変数に格納されることに注意してください。 この挙動が気に入らない場合、もし PHP 5 を使用しているなら 代わりに setrawcookie() を使ってください。 スクリプト内部で TestCookie の内容を見たい場合は、 以下のいずれかの例を使用します。

Comments

[moriman]

それでエンコードだけで希望通りの動きになったんですね。
ありがとうございました。