【JavaScript入門】localStorageでデータを保存・取得・削除する

Webページをリロードしてもデータを保持しておきたいとき、便利なのがlocalStorageです。
今回は、JavaScriptのlocalStorageを使ってデータを「保存」「取得」「削除」する基本的な方法を紹介します。

localStorageとは？

localStorageは、ブラウザにデータを保存しておける仕組みです。

データはユーザーの端末に保存され、ページを閉じたり、ブラウザを再起動しても消えません（明示的に削除しない限り）。保存できるのは文字列（String）形式のデータです。

データを保存する：localStorage.setItem(key, value)

localStorage.setItem('username', 'taro');
 

 

このコードは、「username」というキーで「taro」というデータを保存しています。保存したデータはブラウザの開発者ツール（F12キー）→「アプリケーション」タブ→「ローカルストレージ」で確認できます。

 

データを取得する：localStorage.getItem(key)

const name = localStorage.getItem('username');
console.log(name); // "taro" が表示される
 

 

先ほど保存したデータを取得するには、getItem()を使います。指定したキーが存在しない場合は、nullが返ってきます。

 

データを削除する：localStorage.removeItem(key)

localStorage.removeItem('username');
 

 

保存したデータを削除するには、removeItem()を使います。このコードを実行すると、キー「username」に紐づいたデータは消えます。

 

まとめ

操作	メソッド	例
保存	setItem	localStorage.setItem(‘key’, ‘value’)
取得	getItem	localStorage.getItem(‘key’)
削除	removeItem	localStorage.removeItem(‘key’)

 

 - HTML/JavaScript