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

要約と結論

MySQL の低速クエリの最適化: 理論と実践からの制限の利点

NestJsはMongooseを使用してMongoDBを操作する

Linux C ログ出力コードテンプレートサンプルコード

JavaScript での AOP プログラミングの基本実装

HTMLページ間でパラメータを渡すフロントエンド方式の詳細な説明

MySQL で lower_case_table_names を記録する際の落とし穴の詳細な説明

Linux での MySQL 5.6 バイナリのインストールプロセス

CSS3 と JavaScript を使用して Web カラーピッカーのサンプルコードを開発する

Docker メモリ監視とストレステストの方法

echarts と vue.js を統合する際に発生するいくつかの問題の概要

推薦する

HTMLタグIDは変数にできる

MySQL オンライン DDL ツール gh-ost 原理分析

MySQLでスケジュールされたタスクを設定する方法の分析

javascript 入力画像のアップロードとプレビュー、FileReader プレビュー画像

Linux で FTP イメージサーバーをインストールして展開する方法

httpsウェブサイトにリファラーhttpsとhttpジャンプリファラーを送信させる方法

Mysqlは実行中のトランザクションを照会し、ロックを待機する方法

Vue+Element UIはドロップダウンメニューのカプセル化を実現します

実用的な基本的な Linux sed コマンドのサンプルコード

CentOS 8/RHEL 8 に Cockpit をインストールして使用する方法

jQuery キャンバスは QR コード付きのポスターを生成します

iOS、Android、ミニプログラムアプリの敷居の低い開発のためのフロントエンドフレームワークを詳しく解説

MySQLマスタースレーブ遅延現象と原理の詳細な分析

SQL の左結合と右結合の原理と例の分析

HTML と CSS を書くための 6 つの最も効果的な方法