SessionStorage の制限と落とし穴を調査する-htmlチュートリアル-php.cn

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

PHPz

リリース： 2024-01-13 10:57:23

オリジナル

1390 人が閲覧しました

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

SessionStorage の制限と欠陥の分析

SessionStorage は、クライアント側でデータを保存するメカニズムであり、キーの値をクライアント側に保存する方法を提供します。同じブラウザセッションです。正しい方法です。保存された各アイテムはブラウザウィンドウまたはタブに関連付けられ、そのセッションの間保持されます。 SessionStorage はいくつかの点で便利ですが、いくつかの制限や欠陥もあります。この記事では、これらの問題について 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("存储失败");
  }
}

ログイン後にコピー

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

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

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

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

ログイン後にコピー

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

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

ログイン後にコピー

セッションの喪失

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

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

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

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

ログイン後にコピー

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

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

概要:

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

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