JavaScriptのlocalStorageの使い方(保存 / 取得 / 削除)

javascriptでブラウザにデータを保存できる、localStorageの使い方についてまとめてみました。

localStorageとは？

localStorageはブラウザにデータを保存するための仕組みです。
HTML5から登場したWeb Storageに含まれるブラウザの仕様です。
(localStorageとsessionStorageがあります）

登場するまではブラウザにデータを保持したい場合は、Cookieが使われていました。

Cookieとの違いは？

表にすると、下記のようになります。

データ容量がCookieより圧倒的に増えています。
有効期限が無く半永久的に使えますが、ユーザーが手動で削除することも可能です。
Cookieはサーバーにリクエストのたびに送られるので、サーバーのプログラムで参照や変更が可能ですが

localStorageは意図的にデータを送るようにしないとサーバーで確認できません。
またサーバーからローカルストレージの内容は変更できません。

サーバー（クラウド）にデータを保存する時との違いは？

サーバーにデータを送信してデータベースに保存した場合は、どこのパソコンからでもサーバーにアクセスすると参照することが可能です。
ブラウザに保存している場合は、保存したパソコンの「ブラウザ」にデータが残るので、保存したパソコンでしか参照することができません。

sessionStorageとの違いは？

localStorageは半永久的に有効ですが、sessionStorageは有効期限がタブやウィンドウを閉じるまでになります。
サイトを開き直すたびに新規で作られることになるので、一時的なデータ保存で使うといいかと思います。

localStorageの使いかた

データを保存する

１番目の引数にキーを指定して、２番目の引数にデータを渡すと保存されます。

localStorage.setItem('fruit', 'apple');

データを取得する

保存した時のキーを指定すると取り出せます。

const myFruit = localStorage.getItem("fruit");

データを削除する

保存した時のキーで削除できます。

localStorage.removeItem("fruit");

全てのデータを削除する

clearを呼ぶと全てのデータを削除できます。

localStorage.clear();

ローカルストレージに保存された数が知りたい

lengthにアクセスすると、保存された要素数が取れます。

const length = localStorage.length;

n番目のキーを取得したい

数値を渡すと、渡した場所のキーが返ってきます。

const key = localStorage.key(1);

localStorageを使って、todoリスト作成

ローカルストレージを使って、todoリストを作ってみました。

demo

See the Pen
localStorage TodoList by yasuaki (@include777)
on CodePen.

codepenで書いてみました。
saveボタンを押すと、入力されたtodoを保存して表示して、delete allボタンで全てのデータを削除しています。
ゴミ箱ボタンで押された位置のtodoを消しています。

保存した後にブラウザを開き直してもデータが残っていることが確認できます。

html

<div class="container m-3 p-4 shadow rounded">
  <h2><i class="fas fa-child"></i> todos <i class="fas fa-child"></i></h2>
  <div class="form-inline mb-3">
    <input type="text" class="form-control w-50" id="todo" placeholder="input todo..." />
    <button class="btn btn-primary ml-2" id="save">save</button>
    <button class="btn btn-danger ml-2" id="delete">delete all</button>
  </div>
  <ul class="list-group" id="list">
  </ul>
</div>

解説

bootstrap4とfont awesomeを使っています。
text入力エリアと、保存ボタン、全て削除ボタンを用意して、ul liでtodoリストを表示するようにしました。

js

$(function(){
  // 削除処理
  $("#delete").on("click", function(){
    localStorage.clear();
    showList();
  });

  // 保存処理
  $("#save").on("click", function(){
    localStorage.setItem(localStorage.length.toString(), $("#todo").val());
    $("#todo").val("");
    showList();
  });

  showList();
});

function showList() {
  $("#list").html("");
  for (let i = 0; i < localStorage.length; i++) {
    $("#list").append("<li class='list-group-item'><button class='btn btn-danger mr-2' onclick='deleteItem("+ localStorage.key(i) +")'><i class='fas fa-trash-alt'></i></button>" + localStorage.getItem(localStorage.key(i)) + "</li>");
  }
}

function deleteItem(i) {
  localStorage.removeItem(i);
  showList();
}

解説

処理全体

画面読み込み時にローカルストレージを参照してリストを再表示しています。(15行目のshowList関数)

保存ボタンが押された時は、 $("#save").on　内に書いてある処理が走って、ローカルストレージにデータを保存して、リスト再表示をしています。(9-13行目)
全て削除が押された時は、 $("#delete").on　内に書いている処理が走って、全てのデータクリアをした後に、リスト再表示をしています。(3-6行目)

showList関数

リスト再表示のために作成しました。
localStorage.length でローカルストレージに入っている要素数を取得して、要素がある回数ループします。

localStorage.getItemで内容を取得して、リストを作っています。
取得した内容をjqueryのappendを使って、リストに追加して行っています。

deleteItem関数

削除アイコンを押した時に処理をします。
押された行のローカルストレージの要素を削除して、リストを再表示しています。