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 の変更をリッスンする

要約と結論

Vueのインストール方法の紹介

CentOS7 に Redis をインストールして設定する方法

HTML（CSSスタイル仕様）を読む必要があります

CSS でより美しいリンクプロンプト効果をカスタマイズする方法

dl、dt、dd リストラベルの例

Vue モバイルプロジェクトでページキャッシュを実装する方法のサンプルコード

Linux の検索ツールの代替となるフレンドリーなツール

Elementはスクリプトを使用して新しいコンポーネントを自動的に構築します

DockerのIDEA構成プロセス

MySQLのユーザー権限の確認と管理方法の詳細な説明

推薦する

Linux ログ内のキーワードとその前後の情報を検索する方法の例

JS でシンプルなデータ監視を実装する方法

CSSは2つの要素をブレンドする効果（スティッキー効果）を実現します。

3つの簡単な調整でMySQLを最適化する

WeChatミニプログラムをTencent Mapsに接続する2つの方法

MySQL Limitクエリのパフォーマンスを向上させる方法

Vant Uploaderは1枚以上の写真をアップロードするコンポーネントを実装します

Day.js をベースにした JavaScript での日付処理のよりエレガントな方法

MySQL 中断された接続警告ログの分析

Vue スキャフォールディング学習プロジェクト作成方法

CentOS 8 VMware 仮想マシンがインターネットにアクセスするための静的 IP ネットワークカードの設定の詳細な説明

一般的なMySQLストレージエンジンの長所と短所

phpstudy から Linux への MySQL の移行に関するチュートリアル

Mybatisの各SQL文の実行時間の統計

CPU、マシンモデル、メモリなどの情報を表示するLinuxシステム