ホームページ > 記事 > ウェブフロントエンド > sessionstorage の謎に満ちた機能を明らかにする: その隠された用途を明らかにする
sessionstorage の謎に満ちた機能を明らかにする: その隠された用途を明らかにする
- WBOYオリジナル
- 2024-01-13 12:36:06877ブラウズ
sessionStorage の秘密の機能が明らかになります。その隠れた使用法を理解するには、具体的なコード例が必要です。
Web 開発では、localStorage をよく使用します。ストレージデータ用ですが、sessionStorage と呼ばれる同様の API があることをご存知ですか? sessionStorage と localStorage は非常に似ていますが、機能的にはいくつかの違いがあります。この記事では、sessionStorage の隠れた使用法を明らかにし、具体的なコード例を通じてその機能と使用法をより深く理解するのに役立ちます。
sessionStorage は Web Storage API の一部であり、Web ブラウザにセッションレベルのデータを保存するために使用されます。これは一時的なストレージ メカニズムです。データは現在のセッション中のみ有効です。セッションが終了すると、データは自動的に消去されます。したがって、Web ページが更新されるか再度開かれるときにデータを保持する必要がある場合は、sessionStorage の代わりに localStorage を使用する必要があります。
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 から読み出され、ポップアップに表示されます。
データの共有に加えて、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));上記のコードで、「
" にジャンプすると、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 の謎に満ちた機能を明らかにする: その隠された用途を明らかにするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。