JSのローカルストレージですが、変数の方がいいのではないでしょうか？

Question

###前提・質問
WodrPressを使い、PHPでデータを取得し、それをフロントで保持しつつ取得したり更新したり、という機能を考えています。

以下データの利用において、ローカルストレージと変数ではどちらが適当でしょうか？

###データの例
例えばユーザーの「お気に入り記事」や「後で読む記事」を全てjsonで出力しておき、「お気に入りに加える」などの操作で使おうと考えているデータです。ページ送りの際はそのjsonをHTMLにして表示します。

そして以下は、変数として出す場合とローカルストレージに出す場合の処理になりますが、とりたてて問題はないように思えます。

add_action( 'wp_enqueue_scripts', 'my_enqueue_data' );
function my_enqueue_data(){

	// 「お気に入り記事」や「後で読む記事」のデータ
	$data = [
		['id'=>1, 'title'=>'日本のいいところ', 'author_id'=>10],
		['id'=>2, 'title'=>'インドのいいところ', 'author_id'=>20],
		// これが数メガ以上ありうる
	];

	//変数として出す場合
	echo '<script>var data = ' . json_encode( $data ) . '</script>';

	//ローカルストレージに出す場合
	echo '<script>localStorage.setItem( 'data', JSON.stringify( data ) );</script>';

}

するとローカルストレージの必要性に疑問が生じました。

長期的な保存が不要な上記例の場合、ローカルストレージよりも大きな容量が扱える点で、変数の方がいいのではないかと考えているのですが、その考えは正しいですか？

それとも変数として数メガものデータを扱うのは避けた方がいいでしょうか？

Comments

[ockeghem]

このスクリプト、最後のechoで構文エラーになりますね。貼り付ける際のミスでしょうか。

Answer 1

変数
ページの移動や更新のたびに、毎回初期化される。

local strage や Cookie
ページの移動や更新をしても保存されるデータを、インターネットブラウザに保存する。

Session
ページの移動や更新をしても保存されるデータを、サーバーに保存する。

Answer 2

データが膨大になりすぎて全部ローカルストレージに入れるのは憚られる
しかしユーザーが頻繁にページ移動するサイトなので
都度サーバーにリクエストするのはパフォーマンスが悪いしサーバーにも負荷・・・

そこで、WP API + ServiceWorker + CacheAPI

キャッシュする内容を動的に決定できるので
必要な時に必要なものだけをキャッシュできます

また、バックグラウンドでプリロードするということもできるので
初期パフォーマンスの低下を抑制することもできます

Answer 3

想定件数やUI、成長率にもよりますが、「次の○件」のようにしたいのでしたらよくある作りとしてはAjaxで都度必要なデータを取りに行く作りです。「○ページ」のように一般的なページングでしたら普通に同期で都度リクエスト送ってページングで良いと思います。
クライアントサイドとはいえ変数でもLocalStorageでも持っておくメリットはありません。
むしろサーバーサイドで一気に大量データを持ってきて保持しておくことで最も大事な初期パフォーマンスの低下が懸念されます。
また初めで全て持っておくと、データに変更があった時に対応できません（持っているデータを更新するタイミングがない）
でしたら今そこに表示するために必要なデータだけを取得して都度表示する分だけを取得した方がコストは低く済みます。

Answer 4

ご質問の説明文中で以下の文言が気になりました。

ページ送りの際は

これを「ページ遷移が発生している」と解釈しますと、
ローカルストレージによる「永続化」の恩恵を受けているはずです。
変数だと、ページ遷移後にリセットされてしまいますよね。

数メガものサイズ

localStorage を安全に利用できる許容限界に近づいているサイズと感じます。
（仕様端末のローカルストレージの最大容量を取得したい というご質問で議論させていただいたことがあります）。

永続化は recentデータ何件までと制限し、その他のコールドデータは「サーバー保存＋Ajax」や、localStorageに比べると大容量を扱える IndexedDB （非同期のAPIですが）に切り替え、変数も併用するのはどうでしょうか。