sessionstorage の謎に満ちた機能を明らかにする: その隠された用途を明らかにする-htmlチュートリアル-php.cn

sessionstorage の謎に満ちた機能を明らかにする: その隠された用途を明らかにする

WBOY

リリース： 2024-01-13 12:36:06

オリジナル

873 人が閲覧しました

sessionstorage の謎に満ちた機能を明らかにする: その隠された用途を明らかにする

sessionStorage の秘密の機能が明らかになります。その隠れた使用法を理解するには、具体的なコード例が必要です。

はじめに:

Web 開発では、localStorage をよく使用します。ストレージデータ用ですが、sessionStorage と呼ばれる同様の API があることをご存知ですか? sessionStorage と localStorage は非常に似ていますが、機能的にはいくつかの違いがあります。この記事では、sessionStorage の隠れた使用法を明らかにし、具体的なコード例を通じてその機能と使用法をより深く理解するのに役立ちます。

セッションストレージとは何ですか?

sessionStorage は Web Storage API の一部であり、Web ブラウザにセッションレベルのデータを保存するために使用されます。これは一時的なストレージメカニズムです。データは現在のセッション中のみ有効です。セッションが終了すると、データは自動的に消去されます。したがって、Web ページが更新されるか再度開かれるときにデータを保持する必要がある場合は、sessionStorage の代わりに localStorage を使用する必要があります。

隠れた使い方 1: データの共有

sessionStorage は現在のページに限定されず、同じブラウザ内の異なるページ間でデータを共有することもできます。これは、複数のページにわたるデータ通信を必要とするアプリケーションに役立ちます。以下では、この使用法を説明するために特定のコード例を使用しています。

HTML コード:

<!DOCTYPE html>
<html>
<body>
   <input type="text" id="inputValue" />
   <button onclick="saveData()">保存数据</button>
   <button onclick="loadData()">加载数据</button>
</body>
</html>

ログイン後にコピー

JavaScript コード:

function saveData() {
   var inputValue = document.getElementById('inputValue').value;
   sessionStorage.setItem('data', inputValue);
   location.href = "https://www.php.cn/link/e05c7ba4e087beea9410929698dc41a6";
}

function loadData() {
   var data = sessionStorage.getItem('data');
   alert(data);
}

ログイン後にコピー

上記のコードでは、ページと 2 つのボタン [データを保存] ボタンをクリックすると、入力ボックスの値が sessionStorage に保存され、別のページ https://www.php.cn/link/e05c7ba4e087beea9410929698dc41a6 にジャンプします。 https://www.php.cn/link/e05c7ba4e087beea9410929698dc41a6 のページで「データの読み込み」ボタンをクリックすると、最初のページに保存されているデータが sessionStorage から読み出され、ポップアップに表示されます。

隠れた使用 2: ページパラメーターの受け渡し

データの共有に加えて、sessionStorage はパラメーターを渡す方法としても使用できます。通常、パラメータを渡すために URL クエリパラメータを使用しますが、これによりパラメータ値が公開されてしまいます。 sessionStorage を使用してパラメータを渡すと、データのセキュリティを確保しながら、より柔軟で便利になります。次のコード例は、sessionStorage を使用してパラメーターを渡す方法を示しています。

HTML コード:

<!DOCTYPE html>
<html>
<body>
   <a href="https://www.php.cn/link/e05c7ba4e087beea9410929698dc41a6">页面跳转</a>
</body>
</html>

ログイン後にコピー

JavaScript コード:

var params = {
   name: 'Jack',
   age: 20
};
sessionStorage.setItem('params', JSON.stringify(params));

ログイン後にコピー

上記のコードで、「

Page」をクリックします。

" にジャンプすると、name と age の 2 つのパラメータを含むオブジェクトパラメータが JSON 文字列の形式で sessionStorage に保存されます。ページ https://www.php.cn/link/e05c7ba4e087beea9410929698dc41a6 では、パラメータは次の方法で読み取ることができます:

JavaScript コード:

var params = JSON.parse(sessionStorage.getItem('params'));
console.log(params.name); // 输出：Jack
console.log(params.age); // 输出：20

ログイン後にコピー

sessionStorage を使用してパラメータを渡すことで、パラメータのセキュリティを保護し、データ送信の効率と柔軟性を考慮に入れます。

結論: ###この記事では、sessionStorage の 2 つの隠れた使用法、つまりデータとページパラメーターの共有を明らかにし、コード例を通じて詳しく説明します。 sessionStorage の使用シナリオは比較的狭いですが、特定のアプリケーションシナリオでは大きな助けとなります。この記事が sessionStorage の理解と使用を深め、Web 開発能力を継続的に向上させるのに役立つことを願っています。 ###

以上がsessionstorage の謎に満ちた機能を明らかにする: その隠された用途を明らかにするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。