SessionStorage、LocalStorage、Cookieの違い #433
Web開発においてデータストレージの活用は非常に重要です。
これを活用することで、アプリケーションのユーザビリティを向上できます。
ここでは主なデータストレージであるSessionStorage、LocalStorage、Cookieについて整理します。
それぞれ異なる目的と機能を持ち、特有のリスクも伴います。
SessionStorage
用途
一時的なデータ保持: ユーザーがWebページにいる間だけ必要なデータ（例えば、フォームの入力値や一時的な設定）の保存に適しています。
タブ固有のデータ: 同一ブラウザ内で開かれた異なるタブ間でデータを共有する必要がない場合に有用です。
特徴
寿命: タブやウィンドウが閉じられるとデータが消去されます。
容量: 約5MBから10MB。
アクセス範囲: 同一タブ/ウィンドウ内でのみ。
セキュリティ: サーバーとの間で自動送信されません。
リスク
タブが閉じられるとデータが消失: 重要なデータは永続的に保存する必要があります。
セキュリティ: XSS（クロスサイトスクリプティング）攻撃により、悪意のあるスクリプトからデータが読み取られる可能性があります。
コード
JavaScriptで以下のように使用できます。
データをセット
sessionStorage.setItem('key', 'value');
データを取得
sessionStorage.getItem('key');LocalStorage
用途
永続的なデータ保持: ユーザーの設定やテーマの選択など、ブラウザを閉じても維持されるべきデータの保存に適しています。
複数タブでのデータ共有: ユーザーが同じサイトの異なるタブを開いている場合に、設定や状態を共有するのに便利です。
特徴
寿命: 手動で削除するまでデータが残ります。
容量: 約5MBから10MB。
アクセス範囲: 同一オリジン内の全タブ/ウィンドウから。
セキュリティ: サーバーとの間で自動送信されません。
リスク
長期的なデータ露出: 永続的なデータ保存のため、セキュリティリスクが高まります。
XSS攻撃: LocalStorageもXSS攻撃の対象となり得ます。
コード
JavaScriptで以下のように使用できます。
データをセット
localStorage.setItem('key', 'value');
データを取得
localStorage.getItem('key');Cookie
用途
セッション管理: ログイン情報やユーザー識別情報など、サーバーとの間で継続的に共有されるべき情報の保持に用いられます。
ユーザー追跡: 広告や分析のためにユーザーの行動を追跡する際に使用されることがあります。
設定の保存: 一部のサイトでは、ユーザーの言語設定やその他の好みを保存するためにクッキーを使用します。
特徴
寿命: 期限設定可能。
容量: 最大4KB。
アクセス範囲: すべてのリクエストに含まれ、サーバーへ送信されます。
セキュリティ: HttpOnly属性でスクリプトからのアクセスを防ぐことが可能。
リスク
セキュリティ: クロスサイトリクエストフォージェリ（CSRF）攻撃やセッションハイジャックのリスクがあります。
プライバシー: ユーザー追跡などのプライバシーに関する問題が生じることがあります。
コード
使ったことがなかったので、ChatGPTに聞いてみました。
以下でできるみたいですが、すみません、検証はスキップしてます。
データをセット
document.cookie = 'key=value; expires=Fri, 31 Dec 9999 23:59:59 GMT';
データを取得
function getCookie(name) {
let value = "; " + document.cookie;
let parts = value.split("; " + name + "=");
if (parts.length === 2) return parts.pop().split(";").shift();
}ここまでお読みいただきありがとうございました！！
参考
この記事が気に入ったらサポートをしてみませんか？