JavaScriptでローカルストレージを使用する方法まとめ
【概要】ブラウザのローカルストレージの使用方法をまとめています。ここでは保存、削除、保存されているKeyを読み込む方法をまとめています。【詳細】・保存方法1. Keyと値を保存するlocalStorage.setItem('Key', 'Value');2. オブジェクトを保存する保存する場合は「JSON.stringify()」関数を使用します。let obj { id: 1, name: "test"};localStorage.setItem('Key', JSON.stringify(obj));・データの取得方法1. データ取得localStorage.getItem('Key');2. オブジェクトで格納しているデータを変換して取得する「JSON.parse()」関数を使用してオブジェクトの形にします。JSON.parse(localStorage.getItem('Key'));3. 保存されているデータを全件取得するif文の「localStorage.hasOwnProperty()」関数を使用しないと「length」や「key」といった値も取得してしまいます。let storageList [];for (let key in localStorage) { if (localStorage.hasOwnProperty(key)) { storageList.push(key); }}・データを削除するlocalStorage.removeItem('Key');・ローカルストレージを初期化するlocalStorage.clear();
