ローカルストレージ(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】電卓の作り方
電卓のソースコードを２つ紹介します。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）を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク
