JavaScriptでsessionStorageを使ってブラウザへデータの保存・削除・読み込みを行う方法

JavaScriptでsessionStorageを使ってブラウザへデータの保存・削除・読み込みを行う

sessionStorageはブラウザー上にデータを保存できる手軽な方法です。windowオブジェクトにlocalStorageオブジェクトが存在しており、直接sessionStorageと記述するだけでどこからでも呼び出せます。

その他、仕様上覚えておくことは下記の通りです。

  • ブラウザがシークレットモードの場合、ブラウザにより挙動が異なる場合があります。
  • ブラウザを閉じるとデータは削除されます。(ブラウザの表示に限らず、常にデータを保存させておきたい時はlocalStorageを使用します。)
  • ユーザー情報などはこちらを使います。(より良いのはCookie)

保存時にはsetItem()メソッドを使って保存します。

第一引数にはキー名を指定し、第二引数には任意のデータを指定します。

文字列・数値・真偽値・オブジェクト・配列など様々なデータ型が利用可能です。

一方で、データの読み出し時にはgetItem()メソッドを利用します。

第一引数にはキー名を指定して、そのキーに保存されているデータを取得します。

そしてデータの削除にはremoveItem()メソッド、またはclear()メソッドを利用できます。

メソッド

メソッド意味返り値
sessionStorage.setItem ‘myParam’,data)ローカルストレージへの書き込みなし
sessionStorage.getItem ‘myParam’)ローカルストレージからの呼び出し文字列
sessionStorage.removeItem ‘myParam’)ローカルストレージから該当するキーのデータを削除するなし
sessionStorage.clear()現在のドメインに紐づいているローカルストレージデータを全て削除するなし
sessionStorageの仕様

サンプルコード

サンプルコードとして下記のテキストフォームに入力されたデータに対して、sessionStorageの保存・読み込み・削除・全削除ボタンを用意して操作が可能なコードを紹介します。

KAZU
KAZU

データを保存した上で、いったんブラウザを閉じて、再度このページにアクセスしてください。データがなくなっているのが確認できるでしょう。

Output
Storageに保存されているデータ
Pug
textarea#targetTextarea
	table.table
		tr
			th Storageに保存されているデータ
			td#targetText
	button#targetButton.brandia_btn.btn 保存
	button#targetButton2.brandia_btn.btn 読み込み
	button#targetButton3.brandia_btn.btn 削除
	button#targetButton4.brandia_btn.btn 全削除
	div#resultMessage.mt-4
CSS
textarea#targetTextarea {
	width: 100%;
}
JavaScript
//保存・読み込みボタン
const targetButton = document.getElementById( 'targetButton' );
const targetButton2 = document.getElementById( 'targetButton2' );
const targetButton3 = document.getElementById( 'targetButton3' );
const targetButton4 = document.getElementById( 'targetButton4' );

//結果テキスト表示
const resultMessage = document.getElementById( 'resultMessage' );

//Storageへの保存
targetButton.addEventListener('click', targetOnClick);

function targetOnClick() {
	//テキストエリア
	const targetTextarea = document.getElementById("targetTextarea");
	// 入力テキスト
	const inputText = targetTextarea.value;
	//localStorageに保存
	sessionStorage.setItem('CodeLaboSample',inputText);
	const targetReadData = sessionStorage.getItem('CodeLaboSample');
	targetText.textContent = targetReadData;
	resultMessage.textContent = '保存完了';
}

//Storageからの読み出し
targetButton2.addEventListener('click', targetOnClick2);

function targetOnClick2() {
	//保存データ出力先
	const targetText = document.getElementById("targetText");
	const targetReadData = sessionStorage.getItem('CodeLaboSample');
	targetText.textContent = targetReadData;
	resultMessage.textContent = '読み込み完了';
}

//Storageからデータ削除
targetButton3.addEventListener('click', targetOnClick3);
function targetOnClick3() {
	//保存データを削除
	sessionStorage.removeItem('CodeLaboSample');
	targetText.textContent = sessionStorage.getItem('CodeLaboSample');
	resultMessage.textContent = '削除完了';
}

//Storageから現在のドメインの全てのStorageデータを削除
targetButton4.addEventListener('click', targetOnClick4);
function targetOnClick4() {
	//保存データを削除
	sessionStorage.removeItem('CodeLaboSample');
	targetText.textContent = sessionStorage.clear();
	resultMessage.textContent = '全削除完了';
}
インストラクター