Javascript で SessionStorage と LocalStorage を使用する方法

序文
SessionStorage と LocalStorage の紹介
SessionStorageとLocalStorageの使い方
LocalStorage と SessionStorage の違い
安全上の注意
クロスサイトスクリプティング（XSS）攻撃への対処
攻撃を回避するにはどうすればいいですか?
ユーザーエクスペリエンスの向上
ブラウザキャッシュ用のストレージオブジェクトの使用
LocalStorage の変更をリッスンする
要約と結論

序文

Web 開発者にとって、ユーザーエクスペリエンスを向上させ、Web アプリケーションのパフォーマンスを高めるために、Web ブラウザーにデータを保存することは非常に一般的です。ほとんどの場合、LocalStorage と SessionStorage を使用できます。

この記事では、セキュリティとユーザーエクスペリエンスの観点から SessionStorage と LocalStorage を評価します。次に、要件に基づいて適切なオブジェクトを選択する方法について説明します。

SessionStorage と LocalStorage の紹介

HTML5 以前は、開発者は一般的に Cookie を使用してクライアントに簡単な情報を保存していました。 HTML5 のリリース後、クライアント上でローカルにデータを保存する新しい方法、つまり Web Storage が提供されました。これは、LocalStorage と SessionStorage に分かれており、JavaScript を介して Web ブラウザーにキーと値のペアの形式でデータを保存できます。 Cookie と比較すると、次の利点があります。

ストレージ容量が大きく、Cookie は 4K、Web ストレージは 5M です。
Cookieよりもデータの操作が簡単です。
すべてのリクエストごとにサーバーに送信されるわけではありません。

SessionStorageとLocalStorageの使い方

ブラウザウィンドウオブジェクトを使用して、SessionStorage および LocalStorage にアクセスできます。次の例を見てください。

セッションストレージ = window.sessionStorage
ローカルストレージ = window.localStorage

両方のストレージタイプで利用できる機能は次のとおりです。

//アイテムを保存する
  storage.setItem('name', 'アリス')
  ストレージ.setItem('年齢', '5')
//アイテムを読み込む
  storage.getItem('name') // "Alice" を返します
//ストレージオブジェクトの長さを取得する storage.length // 2 を返す
//インデックスを通じて対応するキー名を取得します。storage.key(0) // "name" を返します
//アイテムを削除する
  storage.removeItem('名前')
//ストレージオブジェクトをクリアする storage.clear()

LocalStorage と SessionStorage の違い

LocalStorage と SessionStorage の主な違いは、ブラウザウィンドウとタブ間でデータが共有される方法が異なることです。

LocalStorage はブラウザのウィンドウやタブ間で共有できます。つまり、複数のタブやウィンドウでアプリケーションを開いている場合、いずれかのタブまたはウィンドウで LocalStorage が更新されると、更新された LocalStorage データが他のすべてのタブとウィンドウに表示されます。

ただし、SessionStorage データは他のタブやウィンドウからは独立しています。 2 つのタブが同時に開かれ、そのうちの 1 つが SessionStorage を更新した場合、他のタブやウィンドウには反映されません。例を見てみましょう。ユーザーが 2 つのブラウザタブで 2 つのホテルの部屋を予約したいとします。これは個別のセッションデータであるため、ホテル予約アプリケーションには SessionStorage の使用が最適です。

安全上の注意

Web Storage のストレージオブジェクトはドメイン名から独立しています。つまり、異なるサイトの Web アプリケーションはそれぞれ独立したストレージオブジェクトを持ち、相互にアクセスすることはできません。この点では、SessionStorage と LocalStorage は同じです。

たとえば、abc.com にデプロイされた Web アプリケーションは、xyz.com の Web ストレージオブジェクトにアクセスできません。

サブドメインについても同様です。www.grapecity.com.cn と gcdn.grapecity.com.cn は、同じメインドメインの grapecity.com.cn に属していますが、互いのストレージオブジェクトにアクセスすることはできません。

また、サブドメインは互いに独立しているだけでなく、http プロトコルと https プロトコルでも異なるため、この点にも注意が必要です。

クロスサイトスクリプティング（XSS）攻撃への対処

まず、XSS 攻撃とは何でしょうか?

XSS は、Web ページに追加される悪意のあるスクリプトであり、ブラウザーによって読み込まれて実行され、攻撃して個人情報を取得します。

現時点では、LocalStorage と SessionStorage の両方が XSS 攻撃に対して脆弱です。攻撃者は、悪意のあるスクリプトをストレージオブジェクトに直接追加して実行することができます。したがって、次のような機密性の高い個人情報を Web ストレージに保存することはお勧めしません。

ユーザー名とパスワード
クレジットカード情報
JsonWeb トークン
APIキー
セッションID

攻撃を回避するにはどうすればいいですか?

同じドメイン名を使用して複数の Web アプリケーションをデプロイしないようにしてください。複数のアプリケーションで同じドメイン名を使用すると、すべてのユーザーが Web ストレージオブジェクトを共有することになるため、サブドメインを使用してアプリケーションをデプロイするようにしてください。
データが LocalStorage に保存されると、ユーザーがそれをクリアするまで開発者はデータを制御できなくなります。セッション終了後にデータを自動的に削除したい場合は、SessionStorage を使用します。
WebStorage から読み取られるすべてのデータは、検証、エンコード、エスケープされる必要があります。
WebStorage に保存する前にデータを暗号化します。

ユーザーエクスペリエンスの向上

一部の機密データは避けるべきですが、WebStorageを通じてWebアプリケーションのユーザーエクスペリエンスを向上させることができます。

たとえば、ユーザーがフォームに入力しているときに、何らかの理由でタブ/ウィンドウを閉じたとします。ただし、フォームの LocalStorage には、ユーザーフォームを自動的に保存する機能が実装されているため、ユーザーが再度フォームを開くと、以前にユーザーが入力した情報が自動的に復元されます。

<!DOCTYPE html>
<html>
<本文>
<h2>フォームの例</h2>
<フォーム>
  <label for="lname">姓:</label><br>
  <input type="text" id="lname" name="lname" value="" onchange="save(this)">
  <label for="fname">名前:</label><br>
  <input type="text" id="fname" name="fname" value="getValue(this)" onchange="save(this)"><br>
</フォーム>
<スクリプト>
  ローカルストレージ = window.localStorage
  関数 save(入力) {
    localStorage.setItem(入力ID、入力値)
  }
document.getElementById("fname").value=localStorage.getItem("fname")
 document.getElementById("lname").value=localStorage.getItem("lname")
</スクリプト>
</本文>
</html>

私たちのシナリオは、ユーザーが再度開いたときに、以前に入力されたコンテンツを自動的に復元することであるため、ウィンドウが閉じられると自動的にクリアされるため、ここでは SessionStorage をストレージオブジェクトとして使用することはできません。

ブラウザキャッシュ用のストレージオブジェクトの使用

一般的に、一部のアプリケーションデータをキャッシュして、後で Web アプリケーションで使用することができます。たとえば、Web アプリケーションですべての国の通貨データを読み込む必要がある場合、WebStorage を使用しないと、リストを読み込んで取得するたびに HTTP リクエストを発行する必要があります。LocalStorage にデータを保存した後は、データを直接取得できます。

LocalStorage には有効期限がないので、ユーザーはページを開くたびにストレージオブジェクト内のコンテンツを使用できます。ユーザーが LocalStorage データを削除したい場合も、非常に簡単です。ブラウザのキャッシュコンテンツをクリアするだけです。

LocalStorage の変更をリッスンする

LocalStorage は、ローカルの永続ストレージとして使用できるオブジェクトです。これにデータストレージを追加できます。同様に、ユーザー操作によって変更された場合も、それを監視できる必要があります。変更されると、ストレージイベントがトリガーされます。ウィンドウでこのイベントを監視して、いくつかの論理操作を完了できます。

window.addEventListener('ストレージ', () => {
  ...
});
 
ウィンドウ.オンストレージ = () => {
  ...
};

要約と結論

ユースケースに応じて、LocalStorage と SessionStorage を選択できます。アプリケーションが複数のブラウザウィンドウとタブ間でデータを共有する必要がある場合は LocalStorage を使用し、それ以外の場合は SessionStorage を使用します。

SessionStorage と LocalStorage はどちらも XSS 攻撃に対して脆弱です。したがって、ブラウザのストレージに機密データを保存しないでください。

最後に、WebStorage は非常に便利ですが、次のような状況で使用することをお勧めします。

機密データなし
データサイズは5MB未満です
高性能は重要ではない

上記は、Javascript が SessionStorage と LocalStorage を使用する方法の詳細です。Javascript の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:

JavaScript でのローカルストレージとセッションストレージの使用
JS 内の Json 文字列 + Cookie + ローカルストレージ
JavaScript で localStorage を使用する方法
JavaScript ローカルストレージ: localStorage、sessionStorage、Cookie の使用
jsでローカルストレージを操作する方法

<<: LinuxでのDNSサーバーの設定の詳細な説明

>>: MySQL 5.7.17無料インストール版のインストールと設定

Javascript で SessionStorage と LocalStorage を使用する方法

目次

序文

SessionStorage と LocalStorage の紹介

SessionStorageとLocalStorageの使い方

LocalStorage と SessionStorage の違い

安全上の注意

クロスサイトスクリプティング（XSS）攻撃への対処

攻撃を回避するにはどうすればいいですか?

ユーザーエクスペリエンスの向上

ブラウザキャッシュ用のストレージオブジェクトの使用

LocalStorage の変更をリッスンする

要約と結論

SQLと各種NoSQLデータベースの使用シナリオの説明

Vue実装のカウンターケース

CentOS ベースの OpenStack 環境の展開に関する詳細なチュートリアル (OpenStack のインストール)

Ubuntu 18.04 のsources.listをAlibabaまたはTsinghuaミラーに変更する方法

個人的な意見: デザインについて語る

Docker コンテナにデプロイされた Django のタイムゾーンの問題

Windows 2016 Server セキュリティ設定

vue-video-player でのブレークポイント再開の実装

MySQL 更新セットとの違い

MySqlのインストールとアンインストールに関する詳細なチュートリアル

推薦する

Visual Studio Code + Reactをベースに開発環境を構築するプロセス

Nginx ベースの Mencached キャッシュ構成の詳細な説明

MySQLの再帰問題

Node.js の fs モジュールと Path モジュールのメソッドの詳細な説明

MySQL IFNULL判定問題の解決方法

Ubuntu 18.04にPython仮想環境をインストールする

JSはストップウォッチタイマーを実装します

MySQL クエリのソートとクエリ集計関数の使用法の分析

フロントエンドとバックエンドを分離した nginx 構成を展開するための完全な手順

VMWare ネットワークアダプタの 3 つのモードの実装プロセスの分析

Apache での ab パフォーマンステスト結果を分析する

Python Django アプリケーションを Docker 化する方法

MySQL の計画タスクとイベントスケジュール例の分析

Linux/CentOS システムでネットワーク時間を同期する 2 つの方法の詳細な説明

AngularでTweenMaxアニメーションライブラリを使用する際の問題と解決策