JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのsessionStorageでデータを保存・取得する方法

sessionStorageとは

WebブラウザにはlocalStorageとsessionStorageという2つのプロパティが用意されており、どちらもキーと値のペア（key/value pairs）をブラウザ内に保存できます。

sessionStorageは、データを1つのセッション（タブやウィンドウを開いている間）だけ保持するためのオブジェクトです。ブラウザやタブを閉じると、保存していたデータは自動的に削除されます。仕組み自体はlocalStorageとほぼ同じですが、データの寿命が「セッション単位」である点が最大の違いです。

sessionStorageを利用する際は、まず使用しているブラウザがWeb Storageに対応しているかどうかを確認し、その後でデータの保存（作成）と取得を行うのが基本の手順となります。

sessionStorageにデータを保存する構文

sessionStorage.setItem();

サンプルコード

<html>
<body>
<p id="storage"></p>
<script>
   if (typeof(Storage) !== "undefined") {
      // データを保存
      sessionStorage.setItem("product", "Tutorix");
      // 保存したデータを取得して表示
      document.getElementById("storage").innerHTML = sessionStorage.getItem("product");
   }
   else {
      document.getElementById("storage").innerHTML = "申し訳ありませんが、このブラウザはWeb Storageに対応していません…";
   }
</script>
</body>
</html>

実行結果

Tutorix

まとめ

sessionStorageでは、setItem()でデータを保存し、getItem()でデータを取得します。ブラウザを閉じるとデータが消去されるため、入力途中のフォーム内容などの一時的な情報を扱うのに適しています。また、処理前にtypeof(Storage)で対応状況をチェックしておけば、非対応のブラウザでもエラーなく安全に動作させることができます。

  1. JavaScriptでXMLデータから属性の値を取得する方法

    JavaScriptでXMLデータから属性の値を取得するには、attr()メソッドを使用します。このメソッドは、指定した属性名に対応する値を簡単に取り出すことができる便利な機能です。 attr()メソッドとは attr()はjQueryが提供するメソッドの一つで、XMLやHTML要素から指定した属性の値を取得できます。XMLデータをjQueryオブジェクトとして扱うことで、DOM操作と同じ感覚で属性へアクセスできるのが特徴です。 サンプルコード 以下のコードでは、ゲーム情報を含むXMLデータから「details」属性の値を取得しています。 <!DOCTYPE html> <h

  2. 仮想環境からのデータ復元方法|階層別アプローチと成功事例を徹底解説

    前回のブログ「仮想システムにおけるデータ消失の原因とは?」でも触れたように、仮想環境からのデータ消失の主な原因は、ハードウェア障害、フォーマット、メタデータの破損、そして人為的なミスです。データ消失は組織に大きなストレスとダウンタイムをもたらします。そのため、データ損失が発生した場合は、信頼できるデータ復旧業者にできるだけ早く相談することが極めて重要です。では、組織が仮想データを失ってしまった場合、どうすればよいのでしょうか?朗報があります。失われた仮想データの一部、多くの場合はすべてを復元できる方法が数多く存在するのです。ストレージレベルからの復元最初のアプローチはストレージレベルです。場合