HTML5 の sessionStorage オブジェクトについての深い理解

この記事の内容は HTML5 の sessionStorage オブジェクトについて詳しく説明したものです。必要な方は参考にしてください。

HTML5 sessionStorage オブジェクト。 sessionStorage は、HTML5 に新しく追加されたセッション ストレージ オブジェクトです。同じウィンドウ (またはタブ) のデータを一時的に保存するために使用されます。データは、ウィンドウまたはタブを閉じると削除されます。この記事ではsessionStorage（セッションストレージ）の使い方を中心に紹介します。追加、変更、削除などの操作が含まれます。

ディレクトリ

1. 概要

1.1 説明

1.2 機能

1.3 ブラウザの最小サポートバージョン

1.4 シナリオに適したメンバー

2.1 プロパティ

2.2 メソッド

3. 例

3.1データの保存

3.2 データの読み取り

3.3 Jsonオブジェクトの保存

1. はじめに

1.1 説明

sessionStorageは、同じウィンドウ（またはタブ）データを一時的に保存するために使用される、HTML5の新しいセッションストレージオブジェクトです。ウィンドウまたはタブを閉じると削除されます。

このオブジェクトは、JavaScript 言語の window.sessionStorage または sessionStorage を通じて呼び出すことができます。

1.2 機能

1) 同一生成元ポリシーの制限。異なるページ間で同じ sessionStorage を操作する場合は、これらのページが同じプロトコル、同じホスト名、同じポートの下にある必要があります。 (IE 8 と 9 は、プロトコル (HTTP と HTTPS) とポート番号の要件を無視して、同じホスト名にのみ基づいてデータを保存します)

2) 単一タブの制限。 sessionStorage の操作は 1 つのタブに限定されており、このタブ内の同一オリジンのページにアクセスすることで sessionStorage データを共有できます。

3) ローカルにのみ保管してください。 sessionStorage 内のデータは HTTP リクエストとともにサーバーに送信されません。これはローカルでのみ有効となり、データはタブを閉じると消去されます。 （Chromeのタブ復元機能を使用すると、sessionStorage内のデータも復元されます）。

4）保管HTML5 の sessionStorage オブジェクトについての深い理解。 sessionStorageのストレージ方式はキー方式とバリュー方式を採用しています。 value の値は文字列型である必要があります (文字列以外を渡すと、格納時に文字列に変換されます。真の値は「true」に変換されます)。

5) ストレージ制限: ブラウザごとにストレージ制限は異なりますが、ほとんどのブラウザでは制限が 5MB 未満に制限されています。

http://dev-test.nemikor.com/web-storage/support-test/

にアクセスして、ブラウザのストレージ制限をテストできます。

1.3 サポートされるブラウザの最小バージョン

sessionStorage をサポートするブラウザの最小バージョン: IE8、Chrome 5。

1.4 適切なシナリオ

sessionStorage は SPA (シングル ページ アプリケーション) に非常に適しており、各ビジネス モジュールで値を簡単に転送できます。

2. メンバー

2.1 HTML5 の sessionStorage オブジェクトについての深い理解

readonly int sessionStorage.length : に格納されていることを示す整数を返します。 sessionStorage オブジェクト内のデータ項目 (キーと値のペア) の数。

2.2 メソッド

string sessionStorage.key(int Index): 現在の sessionStorage オブジェクトのインデックス番号のキー名を返します。そうでない場合は、null を返します。

string sessionStorage.getItem(string key): キー名に対応する値を返します。そうでない場合は、null を返します。

void sessionStorage.setItem(string key、string value): このメソッドはキーと値をパラメータとして受け取り、キーが存在する場合はキーと値のペアをストレージに追加し、対応する値を更新します。

void sessionStorage.removeItem(string key): 指定されたキー名 (key) を sessionStorage オブジェクトから削除します。

void sessionStorage.clear() : sessionStorage オブジェクトのすべての項目をクリアします。

3. 例

3.1 データを保存する

3.1.1 setItem() メソッドを使用して保存する

sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值

3.1.2 HTML5 の sessionStorage オブジェクトについての深い理解を介して保存する

sessionStorage['testKey'] = '这是一个测试的value值';

3.2 データを読み取る

3.2.1 getItem() を通じて値を取得するメソッド

sessionStorage.getItem('testKey'); // => 返回testKey对应的值

3.2.2 HTML5 の sessionStorage オブジェクトについての深い理解を通じて値を取得

sessionStorage['testKey']; // => 这是一个测试的value值

3.3 Json オブジェクトを保存する

sessionStorage は Json オブジェクトを保存することもできます。保存するとき、オブジェクトは読み取り時に JSON.stringify() を通じてテキスト形式に変換されます。 JSON を介して、テキストをオブジェクトに変換します。

var userEntity = {
    name: 'tom',
    age: 22
};
 
// 存储值：将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));
 
// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom

関連推奨事項:

sessionStorage は json オブジェクトを保存します

sessionStorage を使用して json オブジェクトを保存および取得します

sessionStorage ローカル ストレージ データ インスタンス

以上がHTML5 の sessionStorage オブジェクトについての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。