ブラウザに覚えさせる：localStorage

変数に入れた値は、ページを再読みこみすると消えてしまいます。閉じても消えないメモ帳がブラウザには用意されていて、それがlocalStorageです。ダークモードの設定やゲームのハイスコアなど、「覚えておいてほしいもの」に使います。

覚えるのは3つの操作だけ

localStorage.setItem("name", "しまちゃん");   // 保存する
const name = localStorage.getItem("name");    // 取り出す
localStorage.removeItem("name");              // 消す

"name"の部分はキー（ラベル）です。オブジェクトのキーと同じで、自分で自由に決められます。

保存されているか確かめる

保存がなかった場合、getItemはnull（何もない、の印）を返します。取り出したあとに確認するのが定番の形です。

const saved = localStorage.getItem("name");

if (saved === null) {
  console.log("まだ保存されていません");
} else {
  console.log("前回の名前は " + saved);
}

ページを開いたときにこれを実行すると、前回の続きから始められるページが作れます。

文字しか入らない

localStorageに入るのは文字だけです。ここがいちばんのつまずきどころ。

localStorage.setItem("score", 100);
const score = localStorage.getItem("score");
console.log(score + 1);   // 「1001」になってしまう

数として使いたいときは、取り出したあとにNumber()で戻します。

const score = Number(localStorage.getItem("score"));
console.log(score + 1);   // 101

配列やオブジェクトを保存したいときは、いったん文字に変換します。

const likes = ["おえかき", "ラーメン"];

localStorage.setItem("likes", JSON.stringify(likes));      // 文字にして保存
const saved = JSON.parse(localStorage.getItem("likes"));   // 元の形に戻す

console.log(saved[0]);

• JSON.stringify()——配列やオブジェクトを文字にする
• JSON.parse()——文字を元の形に戻す

対になっているので、「保存するときstringify、読むときparse」とセットで覚えてください。

使いどころの例

// ダークモードの設定を覚えておく
localStorage.setItem("theme", "dark");

// 次に開いたとき、前回の設定を復元する
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark");
}

このパターンだけでも、「毎回設定し直さなくていいページ」が作れます。

保存されたものを目で見る

ブラウザの開発者ツールで中身を確認できます。ChromeならApplication（アプリケーション）タブ → 左メニューのLocal Storage。キーと値が表の形で並び、その場で削除もできます。

「保存できているつもりで、実は書けていない」を確かめるときに便利です。

入れてはいけないもの・注意点

そのほか、性質として知っておくとよいことがあります。

• ブラウザごと・端末ごとに別物。ChromeとSafariでは共有されないし、スマホとパソコンでも別
• サイトごとに分かれている。他のサイトからは読めない
• 保存できる容量は5MB程度。文字のメモなら十分だが、画像を詰めこむ用途には向かない
• ブラウザの「閲覧データを削除」でまとめて消える。消えても困らないものだけを入れる

このレッスンのまとめ

1. setItemで保存、getItemで取り出し、removeItemで削除——閉じても消えない
2. 入るのは文字だけ。数はNumber()、配列やオブジェクトはJSON.stringify()とJSON.parse()
3. 中身は誰でも読めるので、パスワードや個人情報は保存しない