ローカルストレージとは、ブラウザにデータを保存できる仕組みです。
JavaScriptから使うことができ、入力内容、設定、表示状態などをブラウザ側に保存できます。
たとえば、ToDoリストの内容、ダークモードの設定、フォームに入力した名前、前回選んだカテゴリーなどを保存できます。
この記事では、ローカルストレージとは何か、どのような場面で使うのか、JavaScriptで保存・取得・削除する方法を解説します。
ローカルストレージとは
ローカルストレージは、Web Storage APIの一つです。
ブラウザの中に、文字列データを保存できます。
ページを閉じたり、ブラウザを再起動したりしても、保存したデータは残ります。
たとえば、次のようなデータを保存できます。
- ユーザーが入力した名前
- 画面の表示設定
- ToDoリストの内容
- 選択したテーマ
- 前回開いていたタブの状態
ローカルストレージは、サーバーではなくユーザーのブラウザ側に保存されます。
そのため、同じサイトでも、別のブラウザや別の端末では保存内容が共有されません。
ローカルストレージでできること
ローカルストレージを使うと、ブラウザを閉じたあともデータを残せます。
たとえば、JavaScriptでToDoリストを作る場合、通常はページを再読み込みすると追加した項目が消えます。
しかし、ローカルストレージに保存しておけば、再読み込み後もToDoリストを復元できます。
ほかにも、次のような使い方があります。
- ダークモードの設定を保存する
- 検索条件を保存する
- 入力途中の内容を一時保存する
- 前回選択した表示形式を保存する
- ブラウザだけで動く簡単なメモアプリを作る
簡単なWebアプリの練習では、ローカルストレージを使うと「保存できるアプリ」を作りやすくなります。
ローカルストレージとセッションストレージの違い
ブラウザにデータを保存する仕組みには、ローカルストレージのほかにセッションストレージがあります。
どちらもJavaScriptから使えますが、保存される期間が違います。
| 種類 | 保存期間 | 特徴 |
|---|---|---|
localStorage | 明示的に削除するまで残る | ブラウザを閉じても残る |
sessionStorage | タブやウィンドウを閉じるまで | 一時的な保存に使う |
ローカルストレージは、長く残したい設定やデータに向いています。
セッションストレージは、タブを開いている間だけ残したいデータに向いています。
ローカルストレージの基本メソッド
ローカルストレージでは、主に次のメソッドを使います。
| メソッド | 内容 |
|---|---|
localStorage.setItem() | データを保存する |
localStorage.getItem() | データを取得する |
localStorage.removeItem() | 指定したデータを削除する |
localStorage.clear() | 保存されているデータをすべて削除する |
まずは、保存、取得、削除の3つを覚えると使いやすいです。
データを保存する
ローカルストレージにデータを保存するには、setItemを使います。
localStorage.setItem("username", "山田太郎");第1引数にはキーを書きます。
第2引数には保存したい値を書きます。
キーは、データを取り出すときの名前です。
localStorage.setItem("キー", "保存する値");たとえば、テーマ設定を保存するなら、次のように書けます。
localStorage.setItem("theme", "dark");これで、themeという名前でdarkという値が保存されます。
データを取得する
保存したデータを取得するには、getItemを使います。
const username = localStorage.getItem("username");
console.log(username);getItemには、保存するときに使ったキーを指定します。
データが存在すれば、その値が返ります。
データが存在しない場合は、nullが返ります。
const theme = localStorage.getItem("theme");
if (theme === "dark") {
console.log("ダークモードです");
}ローカルストレージの値は、ページを再読み込みしたあとでも取得できます。
データを削除する
指定したデータを削除するには、removeItemを使います。
localStorage.removeItem("username");このコードを実行すると、usernameというキーで保存していたデータが削除されます。
すべてのデータを削除する場合は、clearを使います。
localStorage.clear();clearは、そのサイトで保存しているローカルストレージのデータをまとめて削除します。
特定のデータだけを削除したい場合は、removeItemを使います。
ローカルストレージに保存できるのは文字列
ローカルストレージに保存できる値は、基本的に文字列です。
数値を保存しても、取得すると文字列として返ってきます。
localStorage.setItem("count", 10);
const count = localStorage.getItem("count");
console.log(count);
console.log(typeof count);この場合、countは数値ではなく文字列として取得されます。
数値として使いたい場合は、Numberで変換します。
const count = Number(localStorage.getItem("count"));
console.log(count + 1);オブジェクトや配列を保存したい場合は、JSON.stringifyを使って文字列に変換します。
配列を保存する
配列をそのままローカルストレージに保存するのではなく、JSON文字列に変換して保存します。
const todos = ["HTMLを学ぶ", "CSSを学ぶ", "JavaScriptを学ぶ"];
localStorage.setItem("todos", JSON.stringify(todos));保存した配列を取り出すときは、JSON.parseを使います。
const savedTodos = localStorage.getItem("todos");
const todos = JSON.parse(savedTodos);
console.log(todos);JSON.stringifyは、配列やオブジェクトを文字列に変換します。
JSON.parseは、JSON文字列をJavaScriptの値に戻します。
オブジェクトを保存する
オブジェクトも、配列と同じようにJSON.stringifyで文字列に変換して保存します。
const user = {
name: "山田太郎",
email: "taro@example.com"
};
localStorage.setItem("user", JSON.stringify(user));取り出すときは、JSON.parseで元のオブジェクトに戻します。
const savedUser = localStorage.getItem("user");
const user = JSON.parse(savedUser);
console.log(user.name);
console.log(user.email);ローカルストレージを使うときは、文字列、配列、オブジェクトの扱いの違いを意識します。
実際にローカルストレージを使ってみる
ここからは、入力した名前をローカルストレージに保存し、再読み込み後も表示できる簡単なサンプルを作ります。
作業用フォルダを作ります。
local-storage-practiceフォルダの中に、次の3つのファイルを作ります。
index.html
style.css
script.jsindex.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>
<main class="container">
<h1>ローカルストレージの練習</h1>
<div class="form-area">
<label for="nameInput">名前</label>
<input type="text" id="nameInput" placeholder="名前を入力してください">
<button id="saveButton">保存する</button>
<button id="deleteButton">削除する</button>
</div>
<p id="result">保存された名前はありません。</p>
</main>
<script src="script.js"></script>
</body>
</html>style.css全体を次のコードに書き換えます。
body {
font-family: sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 40px;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
}
.form-area {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input {
width: 100%;
box-sizing: border-box;
padding: 10px;
margin-bottom: 12px;
font-size: 16px;
}
button {
padding: 10px 16px;
margin-right: 8px;
cursor: pointer;
}
#result {
font-weight: bold;
}script.js全体を次のコードに書き換えます。
const nameInput = document.querySelector("#nameInput");
const saveButton = document.querySelector("#saveButton");
const deleteButton = document.querySelector("#deleteButton");
const result = document.querySelector("#result");
const savedName = localStorage.getItem("username");
if (savedName !== null) {
result.textContent = "保存された名前：" + savedName;
nameInput.value = savedName;
}
saveButton.addEventListener("click", function () {
const name = nameInput.value;
localStorage.setItem("username", name);
result.textContent = "保存された名前：" + name;
});
deleteButton.addEventListener("click", function () {
localStorage.removeItem("username");
nameInput.value = "";
result.textContent = "保存された名前はありません。";
});画面で確認する
index.htmlをブラウザで開きます。
名前を入力して「保存する」ボタンを押します。
画面に「保存された名前：〇〇」と表示されればOKです。
そのあと、ブラウザを再読み込みします。
再読み込み後も名前が表示されていれば、ローカルストレージに保存できています。
「削除する」ボタンを押すと、保存した名前が削除されます。
ToDoリストで使う場合の考え方
ローカルストレージは、ToDoリストのような練習アプリでもよく使います。
ToDoリストでは、複数の項目を配列として管理します。
const todos = [
"HTMLを学ぶ",
"CSSを学ぶ",
"JavaScriptを学ぶ"
];この配列をローカルストレージに保存する場合は、JSON.stringifyを使います。
localStorage.setItem("todos", JSON.stringify(todos));ページを開いたときに復元する場合は、JSON.parseを使います。
const savedTodos = localStorage.getItem("todos");
if (savedTodos !== null) {
const todos = JSON.parse(savedTodos);
console.log(todos);
}この流れを使うと、ページを再読み込みしてもToDoリストを残せます。
ローカルストレージに保存しない方がよいもの
ローカルストレージは便利ですが、何でも保存してよいわけではありません。
特に、次のような情報は保存しないようにします。
- パスワード
- クレジットカード情報
- 個人番号のような重要情報
- 公開されると困るAPIキー
- ログイン状態を管理する重要なトークン
ローカルストレージの内容は、ブラウザの開発者ツールから確認できます。
そのため、見られると困る情報を保存する場所としては向いていません。
ログインや認証に関わる情報は、サーバー側の設計やCookieの設定も含めて考える必要があります。
ローカルストレージを確認する方法
Chromeでローカルストレージの中身を確認するには、開発者ツールを使います。
- ブラウザでページを開く
- 右クリックして「検証」をクリックする
- 「Application」タブを開く
- 左側の「Local storage」を開く
- 確認したいサイトのURLをクリックする
保存されているキーと値を確認できます。
先ほどのサンプルでは、usernameというキーで名前が保存されます。
開発者ツール上で値を削除することもできます。
ローカルストレージでよくあるミス
ローカルストレージでよくあるミスは、オブジェクトや配列をそのまま保存しようとすることです。
const user = {
name: "山田太郎"
};
localStorage.setItem("user", user);このように書くと、期待した形では保存されません。
オブジェクトを保存する場合は、JSON.stringifyを使います。
const user = {
name: "山田太郎"
};
localStorage.setItem("user", JSON.stringify(user));取り出すときは、JSON.parseを使います。
const savedUser = localStorage.getItem("user");
const user = JSON.parse(savedUser);
console.log(user.name);もう一つ多いのは、存在しないデータをJSON.parseしようとすることです。
const savedTodos = localStorage.getItem("todos");
const todos = JSON.parse(savedTodos);todosが保存されていない場合、savedTodosはnullになります。
そのまま扱うとエラーになることがあるため、先に存在確認をします。
const savedTodos = localStorage.getItem("todos");
if (savedTodos !== null) {
const todos = JSON.parse(savedTodos);
console.log(todos);
}ローカルストレージとCookieの違い
ブラウザにデータを保存する仕組みとして、Cookieもあります。
ローカルストレージとCookieは似ていますが、使い方が違います。
| 種類 | 主な使い方 | 特徴 |
|---|---|---|
| ローカルストレージ | 画面設定や簡単な保存データ | JavaScriptから扱いやすい |
| Cookie | ログイン状態やサーバーとのやり取り | リクエスト時にサーバーへ送られる |
ローカルストレージは、ブラウザ側だけで使う設定や簡単なデータ保存に向いています。
Cookieは、サーバーと連携してログイン状態などを扱う場合に使われます。
どちらを使うかは、保存したいデータの内容と目的によって変わります。
まとめ
ローカルストレージは、ブラウザにデータを保存するための仕組みです。
JavaScriptからlocalStorageを使って、データの保存、取得、削除ができます。
基本のメソッドは次の通りです。
| メソッド | 内容 |
|---|---|
localStorage.setItem() | データを保存する |
localStorage.getItem() | データを取得する |
localStorage.removeItem() | 指定したデータを削除する |
localStorage.clear() | すべてのデータを削除する |
ローカルストレージに保存できる値は、基本的に文字列です。
配列やオブジェクトを保存する場合は、JSON.stringifyで文字列に変換し、取り出すときにJSON.parseで戻します。
localStorage.setItem("todos", JSON.stringify(todos));
const savedTodos = localStorage.getItem("todos");
const todos = JSON.parse(savedTodos);ローカルストレージを使うと、ToDoリスト、設定保存、入力内容の一時保存など、ブラウザだけで動く簡単なアプリを作りやすくなります。
パスワードや重要な個人情報、公開されると困るAPIキーなどは保存しないようにします。
