javascript sessionStorageの簡単な使い方

2021.01.11
javascript
javascript

javascriptで、データをブラウザ上に一時的に保存できるsessionStorageの簡単な使い方を記述してます。

1. 環境
2. sessionStorage使い方

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 84.0.4147.105

windows10にApacheのインストール

sessionStorage使い方

まずは、sessionStorageが使用できるブラウザを判定します。

if (window.sessionStorage) { 
// 使用できる 
}
else{ 
// 使用できない 
}

if (window.sessionStorage) {

// 使用できる

}

else{

// 使用できない

}

次に、setItemメソッドを使用して、sessionStorageに値を保存してみます。構文は以下となります。

sessionStorage.setItem('キー', 値)

1	sessionStorage.setItem('キー', 値)

json形式のデータを保存。sessionStorageへの保存期間はブラウザを開いてる間のみとなります。

// ウェブストレージに対応している場合
if (window.localStorage) {

  // 保存するオブジェクト
  const obj = {
    str: 'Hello'
  };

  // オブジェクトをjsonに変換
  const txt = JSON.stringify(obj);

  // jsonデータをsessionStorageに保存
  sessionStorage.setItem("hoge", txt);

}

// ウェブストレージに対応している場合

if (window.localStorage) {

// 保存するオブジェクト

const obj = {

str: 'Hello'

};

// オブジェクトをjsonに変換

const txt = JSON.stringify(obj);

// jsonデータをsessionStorageに保存

sessionStorage.setItem("hoge", txt);

}

保存されたデータは、Developer ToolsのApplicationタグより確認することが可能です。

setItemは、以下のように記述しても同じです。

sessionStorage.hoge= txt;
sessionStorage['hoge']= txt;

1 2	sessionStorage.hoge= txt; sessionStorage['hoge']= txt;

次に、getItemメソッドを使用して、保存したsessionStorageのデータを取得してconsoleに表示してみます。

sessionStorage.getItem("キー名");

1	sessionStorage.getItem("キー名");

さきほど作成したlocalStorageから取得します。

// ウェブストレージに対応している場合
if (window.localStorage) {

  // 保存するオブジェクト
  const obj = {
    str: 'Hello'
  };

  // オブジェクトをjsonに変換
  const txt = JSON.stringify(obj);

  // jsonデータをsessionStorageに保存
  sessionStorage.setItem("hoge", txt);

  // sessionStorageに保存したものをキーを指定して取得
  const item = sessionStorage.getItem("hoge");

  // コンソールに出力
  console.log(item);

}