Java Script
ローカルストレージに保存する方法
ローカルストレージにjsで保存する方法としては、
localStorage.setItem("value", "tesuto"); //ローカルストレージにセットする方法
localStorage.getItem("value") //ローカルストレージから取得する方法
localStorage.removeItem("value"); //ローカルストレージから削除する方法
ocalStorage.clear(); //ローカルストレージの全てを削除
上記がシンプルな使い方になります。
注意点としては、上記の方法だと文字列しか保存できない点です。
そのため、数値などを保存したい場合は、取得した文字列を型変換させる必要があります。例えばですが、
// 数値を文字列として保存
localStorage.setItem('age', 30);
// 取得して数値に変換
const savedAge = parseInt(localStorage.getItem('age'), 10);
console.log(savedAge); // 30
console.log(typeof savedAge); // "number" （数値として利用できる）
上記のような方法となります。
また、オブジェクトして保存したい場合は、
// オブジェクトをlocalStorageに保存
const user = { name: "John", age: 30 }; // ageは数値
localStorage.setItem('user', JSON.stringify(user));
// localStorageからデータを取得
const savedUser = JSON.parse(localStorage.getItem('user'));
// 確認
console.log(typeof savedUser.age); // "number" （数値として復元される）
console.log(savedUser.age); // 30
JSON.stringifyで文字列化した後に、ローカルストレージからデータを取得する際に、JSON.parseすることで、元のデータ型にすることがきます。
オブジェクトをローカルストレージに保存する場合は、上記の方法で実装してください。
注意
ローカルストレージに保存を考慮する時に注意するべきことは、保存するデータが外部に漏れても問題ない情報かどうかです。
ローカルストレージに保存したデータは、ユーザーが削除するか、削除の処理を記載していないと残り続けます。その点を考慮して、ローカルストレージに保存するようにしてください。
開発者ツールでローカルストレージに保存されたか確認できる
ローカルストレージが保存されているかどうか確認したい場合は、開発者ツールで確認するのが簡単です。
方法としては、
上記のように、Application→Local Storageを選択していただければ、OKです。
もし、ローカルストレージに保存された、表示されます。
青茶
デザインを形にするのが好きで、30代から実務未経験のコーダからのスタートで就職しました。 HTML・CSS・JSのコーティングをしたり、Reactで開発をしたり、スマホアプリの開発をしたりしています。 自分の技術のストック先として、このブログで発信し、成長していく・・・予定！ （30代から1からコーダーや、フロントエンドエンジアを目指す人に役立つ情報も発信したいな）