デバイスにデータを保存する

localStorage は、ブラウザが端末の中に、名前と値の組を保存する仕組みです。ページを閉じても、再読み込みしても、値が残ります。

このレッスンでは、保存の書き方と、大きさの上限、消えてしまう場合を学びます。

localStorage に入れられるのは、文字だけです。setItem で入れ、getItem で読みます。

配列や辞書のようなデータは、JSON.stringify で文字にして入れ、読んだら JSON.parse で戻します。ラボのアプリも、この形です。

const KEY = "orders";

// 保存する。配列を JSON の文字にして入れる
function save(orders) {
  localStorage.setItem(KEY, JSON.stringify(orders));
}

// 読む。何もなければ、空の配列を使う
function load() {
  return JSON.parse(localStorage.getItem(KEY) || "[]");
}

ラボのアプリは、習慣の一覧を localStorage に入れています。grep で、その行を探します。

-n は、行の番号を付ける印です。出力は、行の番号とその行の文です。

docker exec jupyter grep -n localStorage app/app.js

保存できる大きさには、上限があります。多くのブラウザで、オリジンごとに 5 MB 前後ですが、ブラウザしだいです。

上限を超えて入れようとすると、エラーが起きます。エラーを受け止める try と catch を、書いておきます。

function trySave(key, text) {
  try {
    localStorage.setItem(key, text);
    return true;
  } catch (error) {
    // 上限を超えると、ここに来る
    console.log("保存できませんでした");
    return false;
  }
}

日本語の文字は、保存の大きさを数えるとき、英数字より大きくなることがあります。UTF-8 では、ひらがなは1文字が3バイトです。

次の Run は、「あ」を UTF-8 の列にして、バイトの数を出します。

docker exec jupyter python3 -c "print(len('\u3042'.encode('utf-8')))"

IndexedDB は、大きなデータや、写真のような中身も入る、ブラウザの中のデータベースです。使い方は、localStorage より複雑です。

パスワードのような秘密は、localStorage に置きません。ページの中のどのスクリプトからも、読めてしまうからです。