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

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

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

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

  • localStorageには保存されたデータは保持期間の制限はありません。
  • ブラウザがシークレットモードの場合、ブラウザにより挙動が異なる場合があります。
  • ブラウザを閉じたり、他のサイトに移動してもデータは保持されます。(ユーザーがページを開いている時だけデータを保持したい場合はsessionStorageを使用します。)
  • 容量は最大5MB
  • 非同期で行うオプションがないので、複雑な処理に使うとパフォーマンスに影響が出ます。
  • 誰でもアクセスできてしまうので、個人情報を扱う目的で使用しては絶対だめ

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

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

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

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

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

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

メソッド

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

サンプルコード

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

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に保存
	localStorage.setItem('CodeLaboSample',inputText);
	const targetReadData = localStorage.getItem('CodeLaboSample');
	targetText.textContent = targetReadData;
	resultMessage.textContent = '保存完了';
}

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

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

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

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