コピペで使える!JavaScriptでローカルストレージを使用する方法

🎬初めに

お久しぶりです!!フューチャースピリッツ、エンジニアブログの中の人、「通行人 R」でございます。

「JavaScript」でローカルストレージを使用したいと思ったことはございませんか？

シリーズ第五回目は「JavaScriptでローカルストレージを使用する方法」について皆様にお届け致します!!

📘ローカルストレージとは？

初めにローカルストレージ（LocalStorage）とは何か？について解説致します。

ローカルストレージとはブラウザにデータを保存するための仕組となります。

セッションストレージと異なり、ローカルストレージに保存されたデータは、ユーザーが明示的に削除しない限り、ブラウザが終了しても保持される仕様となります。

ローカルストレージを活用事例としては以下がございます。

• ユーザー設定の保存
• フォームデータの一時保存
• webアプリケーションの状態情報の管理

📘ローカルストレージの利用方法

ここまでお付き合い頂きありがとうございます!!

それでは、ローカルストレージの利用方法について解説させていただきます!

データの登録

初めにデータの登録方法を解説致します。fetch

ローカルストレージはWeb Storage APIのlocalStorageを使用する事で利用可能です。

登録を行う場合はsetItemを指定し下記の様に実行します。

#JavaScript

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

上記ではキーが「username」値が「future」という名前でデータが登録されます。

データの呼び出し

次に登録したデータの呼び出しを行います。

getItemを使用し保存されたデータの呼び出しを行います。

下記は先程登録したデータを呼び出す例となります。

#JavaScript

let getname = localStorage.getItem('username'); 

console.log(getname); 

上記ではローカルストレージのusernameから値を呼び出しgetname変数に代入しています。

ローカルストレージから取得した値を変数へ代入後、コンソールに表示するコードとなります。

データーの削除

次にデーターの削除を行います。

removeItemを使用し保存されたデータの呼び出しを行います。

下記は先程登録したデータを削除する例となります。

#JavaScript

localStorage.removeItem('username');

🎯まとめ

いかがだったでしょうか?

今回は「コピペで使える!JavaScriptでローカルストレージを使用する方法」について解説致しました。

ローカルストレージを活用する事で様々なデータを保持しアプリケーションに活用する事が出来ます。

是非ご活用してみてはいかがでしょうか!!

それでは次回の記事でお会いしましょう!!さよなら!!