ホームページ >ウェブフロントエンド >htmlチュートリアル >SessionStorage: データ ストレージ機能とサポートされるデータ型

SessionStorage: データ ストレージ機能とサポートされるデータ型

WBOY
WBOYオリジナル
2024-01-13 11:42:061093ブラウズ

SessionStorage: データ ストレージ機能とサポートされるデータ型

SessionStorage の機能を探索してください: どのような種類のデータを保存できますか?

SessionStorage は、HTML5 で提供されるクライアント側のストレージ メソッドで、クライアント上にデータを保存するために使用でき、現在のセッション中にのみ有効です。 Cookie と似ていますが、SessionStorage の方がストレージ容量が大きく、HTTP リクエストでサーバーに送信されません。この記事では、SessionStorage の機能と保存できるデータの種類について説明し、具体的なコード例をいくつか示します。

  1. ストレージ データ タイプ
    SessionStorage は、文字列、数値、ブール値、オブジェクト、配列などを含むさまざまなタイプのデータを保存できます。具体的には、SessionStorage は次のデータ型を使用できます:
  • String: setItem() メソッドを使用して文字列を SessionStorage に保存できます。たとえば:

    sessionStorage.setItem('name', 'John');
  • 数値とブール値: 文字列と同様に、数値とブール値も文字列として保存できます。例:

    sessionStorage.setItem('age', '26');
  • オブジェクト: JSON を使用できます。 ) メソッドはオブジェクトを文字列に変換し、SessionStorage に保存します。例:

    var user = { name: 'John', age: 26 };
    sessionStorage.setItem('user', JSON.stringify(user));
  • Array: オブジェクトと同様に、JSON.stringify() メソッドを使用して変換できます。次に、文字列が SessionStorage に保存されます。次に例を示します。

    var scores = [85, 90, 95];
    sessionStorage.setItem('scores', JSON.stringify(scores));
  1. 保存されたデータを取得する
    getItem() メソッドを使用して、保存されたデータを取得します。 SessionStorage データからのデータ。例:

    var name = sessionStorage.getItem('name');
    var age = sessionStorage.getItem('age');
    var user = JSON.parse(sessionStorage.getItem('user'));
    var scores = JSON.parse(sessionStorage.getItem('scores'));

    上記のコード例を通じて、SessionStorage に保存されているデータを取得して、対応する変数に割り当てることができます。

  2. 保存されたデータの削除
    removeItem() メソッドを使用して、SessionStorage から特定のデータを削除できます。例:

    sessionStorage.removeItem('name');

    上記のコードを実行すると、保存されているデータ「name」という名前のデータが削除されます。

  3. 保存されたデータのクリア
    SessionStorage に保存されているすべてのデータをクリアするには、clear() メソッドを使用します。例:

    sessionStorage.clear();

    上記のコードを実行すると、すべてのデータがクリアされます。保存されているデータは消去されます。

概要:
SessionStorage は、さまざまな種類のデータを保存できる強力で便利なクライアント側のストレージ方法です。文字列、数値、ブール値、オブジェクト、配列のいずれであっても、簡単に保存したり取得したりできます。 SessionStorage を適切に使用することで、クライアント側で一時データを保存および共有できるため、ユーザー エクスペリエンスが向上します。

上記は、SessionStorage の機能と保存できるデータの種類について説明したもので、読者の参考になれば幸いです。

以上がSessionStorage: データ ストレージ機能とサポートされるデータ型の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。