はじめに
初めまして！2025年4月から都内のSlerで働くエンジニアです。プログラミングを学習し始めて約1年が経ったので記事を書こうと思います！（Qiitaへ初投稿です...
）
まずは簡単に自己紹介させてください！！！
- 25卒文系大学卒
- 就活と同時にプログラミング学習をスタート
- 入社企業では業務アプリケーションを開発予定
この記事では、JavaScriptでlocalStorageを使ってデータを保存・読み込む方法について、実装例を交えて紹介します！
初学者の方や、localStorageの使い方をこれから学びたい方の参考になれば嬉しいです！
🔧 使用技術・環境
- 言語：HTML / CSS / JavaScript（Vanilla JS）
- エディタ：Visual Studio Code
- ブラウザ：Google Chrome
🛠️ 実装の流れ
今回は「localStorageを使ってデータを保存・読み込みする方法」にフォーカスして解説します。
以下のようなシンプルな入力フォームを用意し、入力されたデータをlocalStorageに保存・復元する処理を実装しました。
- HTMLで入力フォームとボタンを作成
- JavaScriptでフォームの入力値を取得
localStorage.setItem()を使って保存- ページ読み込み時に
localStorage.getItem()でデータを読み込み、画面に反映
💾 localStorageの基本実装（保存と読み込み）
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>○○○</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<input type="text" id="input" placeholder="データを入力" />
<button id="saveBtn">保存</button>
<!-- ボタンの下に表示されるように配置 -->
<div id="output"></div>
<script src="./main.js"></script>
</body>
</html>
main.js
const input = document.getElementById("input");
const saveBtn = document.getElementById("saveBtn");
const output = document.getElementById("output");
saveBtn.addEventListener("click", () => {
const value = input.value;
localStorage.setItem("savedData", value);
output.textContent = `保存されたデータ：${value}`;
alert("データを保存しました！");
});
window.addEventListener("DOMContentLoaded", () => {
const saved = localStorage.getItem("savedData");
if (saved) {
output.textContent = `保存されたデータ：${saved}`;
}
});
📝 まとめ
今回は、JavaScriptでlocalStorageを使ってデータを保存・読み込みする方法を紹介しました！
-
localStorage.setItem()で保存 -
localStorage.getItem()で読み込み - ブラウザを閉じてもデータが保持される
この記事が、同じように学習中の方のお役に立てれば嬉しいです✨
最後まで読んでいただき、本当にありがとうございました！！！
🎓 参考講座
【講座名】【React18対応】モダンJavaScriptの基礎から始める挫折しないためのReact入門（Udemy）
※内容の一部をアレンジして、自分の学びを整理する目的で記事にしています。