SessionStorage の制限と落とし穴を調査する

SessionStorage の制限と欠陥の分析

SessionStorage は、クライアント側でデータを保存するメカニズムであり、キーの値をクライアント側に保存する方法を提供します。同じブラウザセッションです。正しい方法です。保存された各アイテムはブラウザ ウィンドウまたはタブに関連付けられ、そのセッションの間保持されます。 SessionStorage はいくつかの点で便利ですが、いくつかの制限や欠陥もあります。この記事では、これらの問題について 1 つずつ説明し、具体的なコード例を示します。

1. データ容量の制限

SessionStorage の主な制限の 1 つはデータ容量です。 SessionStorage の最大ストレージ容量にはブラウザごとに異なる制限があり、通常は 5MB ～ 10MB です。保存されたデータがこの制限を超えると、「QuotaExceededError」エラーがトリガーされます。以下は、SessionStorage を使用して大量のデータを保存する方法を示すサンプル コードです。

// 生成一个1MB大小的字符串
const largeData = "a".repeat(1024 * 1024);
try {
  sessionStorage.setItem("largeData", largeData);
} catch (error) {
  if (error.name === "QuotaExceededError") {
    console.log("存储容量已满");
  } else {
    console.log("存储失败");
  }
}

2. 同一生成元ポリシーの制限

SessionStorage は、次に従ってデータを分離します。同一オリジンポリシー 。同一オリジン ポリシーでは、SessionStorage アクセスが同じオリジンのページ間でのみ実行できること、つまり、プロトコル、ドメイン名、およびポートがまったく同じであることが必要です。これは、異なるページが異なるドメインまたはサブドメインからのものである場合、それらのページは互いの SessionStorage にアクセスできないことを意味します。次の例は、異なるドメイン間で SessionStorage にアクセスできない状況を示しています:

www.example.com ドメイン下のページ:

sessionStorage.setItem("key", "value");

subdomain.example.com ドメイン下のページ:

const value = sessionStorage.getItem("key");
console.log(value); // 输出null

3. セッションの喪失

SessionStorage はブラウザー セッションの間有効ですが、特定の状況下では失われる可能性があります。ユーザーがブラウザのウィンドウまたはタブを閉じると、SessionStorage 内のすべてのデータが削除されます。これは、ユーザーが Web サイトを再度開くと、以前に保存されていたデータが利用できなくなることを意味します。以下は、セッション損失の状況を示すサンプル コードです。

// 存储数据
sessionStorage.setItem("name", "John");

// 关闭浏览器窗口或标签页

// 重新打开网站
const name = sessionStorage.getItem("name");
console.log(name); // 输出null

4. 露出されたセキュリティ リスク

SessionStorage はクライアントにデータを保存するため、セキュリティ リスクが存在します。悪意のあるコードや悪意のある Web サイトは、SessionStorage を通じてユーザーの個人情報などの機密データにアクセスする可能性があります。したがって、開発者は慎重に SessionStorage を使用し、データの機密性と整合性を確保する必要があります。

概要:

この記事では、データ容量の制限、同一生成元ポリシーの制限、セッションの損失、セキュリティ リスクなど、SessionStorage の制限と欠陥について説明します。これらの問題にもかかわらず、SessionStorage は依然として、適切なシナリオで役立つ便利なクライアント側ストレージ ソリューションです。開発者は、特定のニーズとシナリオに基づいてストレージ ソリューションを合理的に選択する必要があります。

以上がSessionStorage の制限と落とし穴を調査するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。