ローカルストレージ（Local Storage）
保存期間:
ローカルストレージに保存されたデータは、特定のウェブサイト（ドメイン）に関連付けられており、ブラウザを閉じてもデータは保持される。明示的に削除されるか、プログラムでクリアされるまでデータは残り続ける。
容量:
各ドメインごとに約5MBの容量制限が一般的な模様（もちろんブラウザによって異なる）。
データの共有:
同じドメイン内のすべてのページでデータを共有。
用途:
ユーザーの設定、テーマ選択、言語設定など、長期間にわたって保持されるデータを保存するのに適している。
セッションストレージ（Session Storage）
保存期間:
セッションストレージに保存されたデータは、ユーザーがページを閉じるまで有効。ブラウザやタブを閉じるとデータは消去されます。
容量:
ローカルストレージと同様に、各ドメインごとに約5MBの容量制限が一般的な模様。
データの共有:
同じセッション（タブやウィンドウ）内でデータが共有されるが、異なるセッション（つまり、別のタブやウィンドウ）間ではデータは共有されない。
用途:
ユーザーがページを移動する際に一時的に必要なデータ、例えばフォームの入力内容や一時的なセッション情報を保存するのに適している。
まとめ
どちらもウェブブラウザにデータを保存するための方法ではあるが、
ローカルストレージ: 長期的なデータ保存が必要な場合に使用。
セッションストレージ: 一時的なデータ保存が必要な場合に使用。
それなら大は小を兼ねると言いますし、迷ったらとりあえずローカルストレージを使えばいいんじゃない？
セッションストレージを使った方がいい時って？
→以下の観点で使い分けを考慮するべき
1. セキュリティなどの点で短期間でデータを破棄したい場合
セッションストレージはブラウザやタブを閉じると自動的にデータが削除されます。これにより、ユーザーがページを閉じた後にデータが残らないため、機密性の高い情報や一時的なユーザーデータを保存する場合に有効。たとえば、ログイン状態や一時的なセッション情報など、ユーザーがログアウトしたり、タブを閉じたら消去されるべきデータにはセッションストレージが適している。
2. タブやウィンドウ間でデータを共有したくない場合
セッションストレージは同じタブ内だけでデータを共有する。別のタブやウィンドウを開いた場合、そのセッションには別のセッションストレージが作成され、データが共有されません。これにより、複数のタブで同じアプリケーションを使っていても、各タブが独立したセッションを持つことができます。そのため、同アプリケーションで異なるタブを使用し異なるアカウントでログインするなどのケースが考えられる時は、セッションストレージを使うのが吉。
3. パフォーマンスを向上させたい場合
当然ですが、ローカルストレージに大量のデータが蓄積すると、データアクセスのパフォーマンスが低下する可能性を引き起こします。セッションストレージは一時的なデータ保存に適しているため、必要以上にローカルストレージへデータを蓄積しないことで、全体的なパフォーマンスの向上が期待できます。