ローカルストレージわからなかったので
youtubeで良さげな動画見てそれをもとに見える化した
ふむふむ、ローカルストレージにちゃんと保存された
これでこのドメインに入ったらこのkeyとvalueが保存されたままになってるのでログイン判定などが保存されて便利になるね
const container = document.querySelector('#container');const inputForm = document.querySelector('#inputForm');const saveBtn = document.querySelector('#saveBtn');const logOutput = document.querySelector('#logOutput'); // 追加// 画面にログを表示するための補助関数const displayLog = (message) => { // オブジェクトの場合は文字列に変換、それ以外はそのまま表示 const text = typeof message === 'object' ? JSON.stringify(message, null, 2) : message; logOutput.innerText += text + '\n'; // let a = 2; // let b = 4; // console.log((a += b));};saveBtn.addEventListener('click', () => { logOutput.innerText = ''; // クリックのたびにログをリセット const inputData = inputForm.value; displayLog(`入力データ: ${inputData}`); // console.log(inputData); // console.log(localStorage); // key と value が対になる localStorage.setItem('word', inputData); // console.log(localStorage.getItem('word'), 'ですよね、入力した文字'); displayLog(`取得したワード：${localStorage.getItem('word')}ですよね？`); // console.log( // localStorage.getItem('lifesim_v2_5'), // '⇐JSONテキストでまだ残ってた！', // ); const objLifesim = JSON.parse(localStorage.getItem('lifesim_v2_5')); // console.log(objLifesim, '⇐オブジェクトに戻したよ'); displayLog(objLifesim); // inputForm.value = ''; /** * LocalStorage 基本操作ガイド * -------------------------------------------------- * ブラウザにデータを保存する仕組み（リロードしても消えない） * 保存できるのは「文字列」のみである点に注意！ */ // 1. データの保存 (Set) // 第一引数に「キー（名前）」、第二引数に「値」を指定します。 localStorage.setItem('isAuth', 'true'); localStorage.setItem('userName', 'Kiyo'); // 2. データの取得 (Get) // 保存したキーを指定して値を取り出します。データがない場合は null が返ります。 const authStatus = localStorage.getItem('isAuth'); displayLog(`authStatusの型は: ${typeof authStatus}`); const name = localStorage.getItem('userName'); displayLog(`名前は: ${name}`); // 文字列trueをbooleanのtrueにする const bool = authStatus === 'true'; displayLog(`boolean判定： ${bool}`); // console.log('boolean判定：', bool); // console.log(authStatus); // "true" (文字列として返る) // 3. 特定のデータを削除 (Remove) // 指定したキーのデータだけをピンポイントで消去します。 localStorage.removeItem('isAuth'); // 4. すべてのデータを削除 (Clear) // そのドメイン（サイト）が保存した LocalStorage を空っぽにします。 // localStorage.clear(); // --- 応用：オブジェクトや配列を扱う場合 --- const userObj = { id: 1, role: 'admin' }; // 保存：JSON文字列に変換してから保存 // console.log(JSON.stringify(userObj)); localStorage.setItem('user', JSON.stringify(userObj)); // console.log(localStorage.getItem('user')); // 取得：文字列をオブジェクトに戻してから使用 const savedUser = JSON.parse(localStorage.getItem('user')); displayLog('--- オブジェクトを復元 ---'); displayLog(savedUser); // オブジェクトもきれいに表示されます displayLog(`ロール名: ${savedUser.role}`); inputForm.value = '';});
自分用、学習様のコメントだらけになりました、、、とさ
<html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>LocalStorage & Storage Guide</title> <script src="./index34.js" defer></script> <style> :root { --primary: #2563eb; --secondary: #64748b; --bg: #f8fafc; --card-bg: #ffffff; --text: #1e293b; --border: #e2e8f0; --youtube-red: #ff0000; } body { font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; background-color: var(--bg); color: var(--text); margin: 0; padding: 20px; line-height: 1.6; } #container { max-width: 900px; margin: 0 auto; background: var(--card-bg); padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } /* 入力エリアのスタイル */ .input-section { margin-bottom: 40px; padding-bottom: 20px; border-bottom: 2px dashed var(--border); } input[type='text'] { padding: 10px; width: 250px; border: 1px solid var(--border); border-radius: 6px; font-size: 1rem; } button { padding: 10px 20px; background-color: var(--primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; transition: opacity 0.2s; } button:hover { opacity: 0.8; } #logOutput { background: #1e293b; color: #38bdf8; padding: 15px; border-radius: 8px; margin-top: 20px; white-space: pre-wrap; font-family: 'Courier New', Courier, monospace; font-size: 0.9rem; min-height: 50px; } /* 解説セクションのスタイル */ .guide-header { text-align: center; margin: 50px 0 30px; } .storage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 40px; } .storage-card { background: #f1f5f9; padding: 20px; border-radius: 10px; border-top: 4px solid var(--primary); } .storage-card h3 { margin-top: 0; color: var(--primary); font-size: 1.2rem; } .comparison-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.9rem; } .comparison-table th, .comparison-table td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; } .comparison-table th { background: #f8fafc; color: var(--primary); } .guideline-box { background: #1e293b; color: #e2e8f0; padding: 25px; border-radius: 12px; margin-top: 30px; } .guideline-box h3 { color: #60a5fa; margin-top: 0; } .badge { display: inline-block; background: var(--primary); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; margin-bottom: 10px; } /* 追記：謝辞フッタースタイル */ .acknowledgment { margin-top: 50px; padding: 20px; text-align: center; border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--secondary); } .acknowledgment a { color: var(--youtube-red); text-decoration: none; font-weight: bold; } .acknowledgment a:hover { text-decoration: underline; } </style> </head> <body> <div id="container"> <div class="input-section"> <h2>LocalStorage Console</h2> <input type="text" id="inputForm" placeholder="保存する文字を入力..." /> <button id="saveBtn">保存を実行</button> <div id="logOutput">> ここに実行結果が表示されます</div> </div> <div class="guide-header"> <h1>Browser Storage Guide</h1> <p>目的や有効期限に応じたデータの使い分け</p> </div> <div class="storage-grid"> <div class="storage-card"> <h3>🍪 クッキー</h3> <p> あなたの「会員証」や「名札」。サーバーが見るためのもの。 </p> </div> <div class="storage-card"> <h3>📝 ローカルストレージ</h3> <p> あなた専用の「メモ帳」。ブラウザ（自分）が見るためのもの。 </p> </div> <div class="storage-card"> <h3>⚡ キャッシュ</h3> <p> ページの「コピー」。2回目以降に素早く表示するためのもの。 </p> </div> </div> <table class="comparison-table"> <thead> <tr> <th>特徴</th> <th>クッキー</th> <th>ローカルストレージ</th> <th>キャッシュ</th> </tr> </thead> <tbody> <tr> <td><strong>主な目的</strong></td> <td>ユーザー識別</td> <td>状態の保存</td> <td>表示の高速化</td> </tr> <tr> <td><strong>容量</strong></td> <td>約4KB (小)</td> <td>約5MB〜 (大)</td> <td>非常に大きい</td> </tr> <tr> <td><strong>有効期限</strong></td> <td>設定可能</td> <td>無期限</td> <td>自動管理</td> </tr> </tbody> </table> <div class="storage-grid"> <div> <span class="badge">Advanced</span> <h4>① IndexedDB</h4> <p style="font-size: 0.9rem; color: var(--secondary)"> 大量で複雑なデータを保存するブラウザ内蔵データベース。オフラインアプリ等に最適。 </p> </div> <div> <span class="badge">Temporary</span> <h4>② SessionStorage</h4> <p style="font-size: 0.9rem; color: var(--secondary)"> タブを閉じたら消える期間限定の場所。セキュリティが必要な一時データに。 </p> </div> </div> <div class="guideline-box"> <h3>3. 使い分けのガイドライン</h3> <ul style="list-style: none; padding: 0"> <li>✅ <strong>ログイン判定：</strong> localStorage</li> <li>✅ <strong>サーバー認証：</strong> Cookie</li> <li>✅ <strong>オフライン閲覧：</strong> IndexedDB</li> <li>✅ <strong>高速表示：</strong> Cache</li> </ul> <p style=" font-size: 0.85rem; color: #94a3b8; margin-top: 20px; border-top: 1px solid #334155; padding-top: 10px; " > ※ 誰がそのデータを使うのか（サーバーか、ブラウザか）を意識しましょう！ </p> </div> <footer class="acknowledgment"> <p> 今回の学習は <a href="https://www.youtube.com/watch?v=Fupq6L4Vy2k" target="_blank" rel="noopener noreferrer" > こちらのYouTube動画 </a> および、制作者であるYoutuberさんの動画を参考に学習しました。ありがとうございます！ </p> </footer> </div> </body></html>
一応HTMLもここにも残す
コメントを残す