ローカルストレージ(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));
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを2つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript(Object.entries)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク