ローカルストレージ(Local Storage)の保存、取得、削除、および連想配列の処理
- やりたいこと
-
ローカルストレージとは？
- メリットとデメリット
- データの保存
-
データの取得
- keyの取得
- valueの取得
-
データの削除
- keyを指定して削除
- 全部削除
-
連想配列の保存と取得
- 保存
- 取得
- まとめ
やりたいこと
以下のように、インプットに入力したデータをローカルストレージに保存する 方法、及びローカルストレージのデータを取得する方法を紹介します。
ローカルストレージとは？
ローカルストレージとは、その人が使っているパソコン(Webブラウザ)に データを保存する仕組みのこと。最大5Mbまで保存できる。
メリットとデメリット
メリットは、データベースとのやり取りをする必要がないこと。
また、ユーザーが選択したものを保存し、次回表示させることで、
ユーザビリティを向上させることができる。
デメリットは、使っているデバイスでしかデータが反映されないこと。
データの保存
引数にkeyとvalueを設定します。
localStorage. setItem( key, value);
localStorage.setItem("Name", "takuya");
console.log(localStorage);コンソールで確認すると。。。
おなじkeyで登録すると、上書きされてしまいます。
localStorage.setItem("Name", "takuya");
localStorage.setItem("Name", "akira")
console.log(localStorage);
データの取得
keyの取得
ここでは、keyの1番目を取得します。
注※ []
ではなく、()の中に取得したいkey
の番号を指定します。
localStorage. key(0)
localStorage.setItem("Name", "takuya");
let kye = localStorage.key(0);
console.log(kye);
valueの取得
getItem() で指定したKeyを取得します
localStorage.setItem("Name", "takuya")
let name = localStorage.getItem("Name")
console.log(name);
データの削除
keyを指定して削除
removeItem() で指定したKeyを削除します
localStorage.removeItem("Name");全部削除
clear() ですべてのデータを削除します
localStorage.clear();連想配列の保存と取得
保存
localStorage. setItem( "data", menbers);
第二引数に連想配列のmenbers を指定しても失敗します。
JSON.stringify (menbers) を第二引数に指定するのがポイントです。
const menbers = [
{
name: "takuya",
age: 25,
},
{
name: "akira",
age: 20,
},
];
localStorage.setItem("menber", JSON.stringify(menbers));
console.log(localStorage);
取得
getItemで取得したものはJSONファイルなので、オブジェクトに変換します。
let obj = JSON.parse(localStorage.getItem("menbers"));
console.log(obj);
参考
まとめ
- 保存： localStorage. setItem (key, value);
- 取得：localStorage. getItem (value);
- 削除：localStorage. removeItem (key);
-
連想配列の保存：
localStorage. setItem (key, JSON. stringify (value)); -
連想配列の取得：
JSON. parse (localStorage. getItem (value));
