こんにちは。本日も秋のようなお天気の横浜です。
皆さんの地域はどうですか？
本日は、LocasStrageの使い方をご紹介します。
これは公開しないホームページを運用されている方に有効です。
私同様に運用したい方は、ぜひ最後までお付き合いください
目次
localStorageって何？
localStorageは、Webブラウザにデータを保存するための仕組みです。JavaScriptを使って、ユーザーのブラウザ内に情報を長期的に保存できます。
主な特徴
- 永続的: ブラウザを閉じてもデータは残る
- ローカル保存: 自分のパソコン/スマホ内に保存される
- ドメイン単位: 同じWebサイト内でのみアクセス可能
- 容量: 約5〜10MBまで保存可能
- 形式: テキスト形式のみ
誰が管理しているの？
localStorageは特定の会社が管理しているわけではありません。
- 仕様策定: W3C（World Wide Web Consortium）という国際標準化団体
- 実装: Google Chrome、Firefox、Safari、Microsoft Edgeなど各ブラウザメーカー
- データ保存場所: あなた自身のデバイス内
- データ管理: あなた自身（およびWebサイトの開発者）
重要: データはクラウドに保存されるのではなく、あなたのデバイス内だけに保存されます。そのため、他のデバイスからはアクセスできません。
基本的な使い方
1. データを保存する
// 文字列を保存
localStorage.setItem('username', '太郎');
// 数値も保存できる（文字列として保存される）
localStorage.setItem('age', '25');
2. データを取り出す
// 保存したデータを取得
const username = localStorage.getItem('username');
console.log(username); // "太郎"
// 存在しないキーを取得するとnullが返る
const nothing = localStorage.getItem('存在しないキー');
console.log(nothing); // null
3. データを削除する
// 特定のデータを削除
localStorage.removeItem('username');
// すべてのデータを削除
localStorage.clear();
4. データの有無を確認
// キーが存在するか確認
if (localStorage.getItem('username') !== null) {
console.log('データが存在します');
}
オブジェクトの保存方法
localStorageはテキストしか保存できないため、オブジェクトや配列はJSON形式に変換する必要があります。
// オブジェクトを保存
const user = {
name: '太郎',
age: 25,
email: '[email protected]'
};
// JSON形式に変換して保存
localStorage.setItem('userInfo', JSON.stringify(user));
// 取り出すときは元の形式に戻す
const savedUser = JSON.parse(localStorage.getItem('userInfo'));
console.log(savedUser.name); // "太郎"
console.log(savedUser.age); // 25
実用例
例1: テーマ設定の保存
// ダークモードの設定を保存
function saveTheme(theme) {
localStorage.setItem('theme', theme);
applyTheme(theme);
}
// ページ読み込み時にテーマを適用
function loadTheme() {
const theme = localStorage.getItem('theme') || 'light';
applyTheme(theme);
}
function applyTheme(theme) {
if (theme === 'dark') {
document.body.classList.add('dark-mode');
} else {
document.body.classList.remove('dark-mode');
}
}
// ページ読み込み時に実行
window.addEventListener('DOMContentLoaded', loadTheme);
例2: フォームの下書き保存
// 入力内容を自動保存
const textarea = document.querySelector('#myTextarea');
textarea.addEventListener('input', function() {
localStorage.setItem('draft', this.value);
});
// ページ読み込み時に復元
window.addEventListener('DOMContentLoaded', function() {
const draft = localStorage.getItem('draft');
if (draft) {
textarea.value = draft;
}
});
例3: 訪問回数のカウント
// 訪問回数を記録
let visitCount = localStorage.getItem('visitCount') || 0;
visitCount = parseInt(visitCount) + 1;
localStorage.setItem('visitCount', visitCount);
console.log(`これまでに${visitCount}回訪問しています`);
注意点とベストプラクティス
セキュリティ
- パスワードやクレジットカード情報などの機密情報は絶対に保存しない
- localStorageの内容は誰でも簡単に見られる
- JavaScriptからアクセスできるため、XSS攻撃のリスクがある
データの型
- すべて文字列として保存される
- 数値や真偽値も文字列になるため、取り出し時に変換が必要
// 保存
localStorage.setItem('count', 10);
// 取り出し（文字列になっている）
const count = localStorage.getItem('count'); // "10"（文字列）
// 数値に変換
const countNum = parseInt(count); // 10（数値）
容量制限
- ブラウザによって異なるが、通常5〜10MB程度
- 大量のデータを保存すると、容量オーバーでエラーになる可能性がある
ブラウザのモード
- プライベートブラウジング（シークレットモード）では、ブラウザを閉じると削除されることがある
- ブラウザの設定で無効化されている場合もある
sessionStorageとの違い
localStorageと似た機能にsessionStorageがあります。
| 項目 | localStorage | sessionStorage |
|---|---|---|
| 保存期間 | 永続的（明示的に削除するまで） | タブを閉じるまで |
| 使い方 | 同じ | 同じ |
| 用途 | 長期的な設定保存 | 一時的なデータ保存 |
実際の活用シーン
- ユーザーの言語設定
- テーマ（ライト/ダーク）の保存
- お気に入りリスト
- フォームの下書き
- ショッピングカート
- 前回の訪問日時
- チュートリアルの完了状態
- ユーザー設定（通知のオン/オフなど）
トラブルシューティング
データが保存されない場合
- ブラウザの設定でlocalStorageが無効になっていないか確認
- プライベートブラウジングモードを使っていないか確認
- 容量制限に達していないか確認
うまくいかない場合は、コンソールで消せるかどうかを確認することをおすすめします
データが消えてしまう場合
- ブラウザのキャッシュクリア時に削除されていないか？
- 別のブラウザやデバイスで見ていないか？
localStorage.clear()を誤って呼び出していないか？
一つづつ、原因をクリアしていくことが大事。
まとめ
localStorageは、ユーザーのブラウザにデータを簡単に保存できる便利な機能です。適切に使えば、ユーザー体験を大きく向上させることができます。
覚えておくべきポイント:
- データは自分のデバイス内に保存される
- 機密情報は保存しない
- オブジェクトはJSON形式で保存
- ブラウザを閉じても残る
- 他のデバイスとは共有されない
最後までお読みくださりありがとうございました。
コメント