JavaScript | Web API：ストレージ系 API － setItem / getItem

JavaScript JavaScript
スポンサーリンク

setItem / getItem は「ブラウザのメモ帳に書く・読む」操作

まずざっくりイメージからいきます。
setItem と getItem は、ブラウザの中にある小さなメモ帳に「書く」「読む」ためのペンです。

localStorage
sessionStorage

どちらも「キーと値」を保存するストレージで、
そのストレージに対して

  • setItem … 書く（保存する）
  • getItem … 読む（取り出す）

という役割を持っています。

ここを押さえておくと、localStorage でも sessionStorage でも、考え方は同じになります。

setItem の基本：キーと値を「文字列」として保存する

使い方の形

基本形はとてもシンプルです。

ストレージ.setItem(キー, 値);
JavaScript

例えば localStorage ならこうです。

localStorage.setItem("username", "taro");
JavaScript

これで、ブラウザの中の localStorage に

  • キー: "username"
  • 値: "taro"

というペアが保存されます。

sessionStorage ならこう。

sessionStorage.setItem("username", "taro");
JavaScript

重要ポイント：値は必ず「文字列」になる

ここがめちゃくちゃ重要です。
setItem に渡した値は、必ず文字列として保存されます。

例えば、こう書いたとします。

localStorage.setItem("count", 10);
JavaScript

一見「数字 10 を保存した」と思いがちですが、
実際には "10" という文字列として保存されています。

取り出して確認してみましょう。

const value = localStorage.getItem("count");
console.log(value);        // "10"
console.log(typeof value); // "string"
JavaScript

typeof で見ると、ちゃんと "string" になっています。

この「全部文字列になる」という仕様を知らないと、
数字のつもりで足し算して、こういう事故が起きます。

localStorage.setItem("count", 10);

const count = localStorage.getItem("count"); // "10"
const next = count + 1;
console.log(next); // "101"（10 + 1 ではなく、"10" + "1" の文字列結合）
JavaScript

数字として使いたいなら、自分で数値に変換する必要があります。

const count = Number(localStorage.getItem("count") ?? 0);
const next = count + 1;
console.log(next); // 11
JavaScript

ここを理解しているかどうかで、
ストレージ系 API との付き合いやすさがかなり変わります。

getItem の基本：キーを指定して値を取り出す

使い方の形

getItem の基本形はこうです。

const 値 = ストレージ.getItem(キー);
JavaScript

例えば、さっき保存したユーザー名を取り出すなら。

const name = localStorage.getItem("username");
console.log(name); // "taro"
JavaScript

重要ポイント：存在しないキーは null が返る

getItem で一つだけ気をつけたいのが、
そのキーが存在しないときは null が返る という点です。

const age = localStorage.getItem("age");
console.log(age);        // null
console.log(typeof age); // "object"（null の typeof は object）
JavaScript

ここで、いきなり age.length とかを触ろうとするとエラーになります。

const age = localStorage.getItem("age");
console.log(age.length); // TypeError: Cannot read properties of null
JavaScript

なので、getItem を使うときは

  • null の可能性がある
  • その場合どうするか（デフォルト値を使うなど）

をセットで考えるのが大事です。

例えば、こう書きます。

const stored = localStorage.getItem("theme");
const theme = stored ?? "light"; // 何もなければ "light" を使う
JavaScript

オブジェクトや配列を setItem / getItem で扱うときの定番パターン

そのまま渡すと「[object Object]」になる罠

オブジェクトをそのまま setItem に渡すと、こうなります。

const user = { name: "taro", age: 20 };

localStorage.setItem("user", user);
JavaScript

一見「オブジェクトを保存した」ように見えますが、
実際に保存されるのは "[object Object]" という謎の文字列です。

取り出してみると分かります。

const stored = localStorage.getItem("user");
console.log(stored); // "[object Object]"
JavaScript

これでは元のオブジェクトには戻せません。

正しいやり方：JSON.stringify / JSON.parse

オブジェクトや配列を保存したいときは、
JSON に変換してから保存する のが定番パターンです。

保存するとき。

const user = { name: "taro", age: 20 };

localStorage.setItem("user", JSON.stringify(user));
JavaScript

取り出すとき。

const userJson = localStorage.getItem("user");
if (userJson !== null) {
  const user = JSON.parse(userJson);
  console.log(user.name); // "taro"
  console.log(user.age);  // 20
}
JavaScript

ここでの流れはこうです。

  • setItem に渡す前に JSON.stringify で「オブジェクト → 文字列」に変換
  • getItem で取り出した文字列を JSON.parse で「文字列 → オブジェクト」に戻す

「ストレージは文字列しか持てない」
「オブジェクトは JSON で包んで出し入れする」

このセットを体に染み込ませておくと、
ストレージ系 API が一気に扱いやすくなります。

具体例1：簡単なカウンターを保存してみる

仕様を決める

やりたいことはシンプルです。

ページに「カウントアップ」ボタンがある
押すたびに数字が増える
ページをリロードしても、前回の数字から続きになる

これを localStorage と setItem / getItem で実現してみます。

現在のカウントを読み込む関数

まず、保存されているカウントを読み込む関数を作ります。

function loadCount() {
  const stored = localStorage.getItem("count");
  if (stored === null) {
    return 0; // 何もなければ 0 から
  }
  const num = Number(stored);
  if (Number.isNaN(num)) {
    return 0;
  }
  return num;
}
JavaScript

カウントを保存する関数

function saveCount(count) {
  localStorage.setItem("count", String(count));
}
JavaScript

ボタンと表示の処理

const display = document.querySelector("#count");
const button = document.querySelector("#increment");

let count = loadCount();
display.textContent = count;

button.addEventListener("click", () => {
  count += 1;
  saveCount(count);
  display.textContent = count;
});
JavaScript

これで、

一度カウントを 5 まで増やす
ページをリロードする
表示が 5 から始まる

という挙動になります。

ここで setItem / getItem がやっているのは、

  • 「今のカウントを文字列として保存する」
  • 「保存されている文字列を取り出して数値に戻す」

という、とてもシンプルだけど重要な役割です。

具体例2：TODO リストを保存してみる（JSON 版）

仕様を決める

TODO リストを作って、
ページをリロードしても内容が消えないようにしたい。

TODO は配列で管理します。

[
  { text: "牛乳を買う", done: false },
  { text: "メールを返す", done: true }
]
JavaScript

TODO 配列を保存する関数

function saveTodos(todos) {
  const json = JSON.stringify(todos);
  localStorage.setItem("todos", json);
}
JavaScript

TODO 配列を読み込む関数

function loadTodos() {
  const json = localStorage.getItem("todos");
  if (json === null) {
    return [];
  }
  try {
    const todos = JSON.parse(json);
    if (!Array.isArray(todos)) {
      return [];
    }
    return todos;
  } catch {
    return [];
  }
}
JavaScript

使い方のイメージ

let todos = loadTodos();

function addTodo(text) {
  todos.push({ text, done: false });
  saveTodos(todos);
  render();
}

function toggleTodo(index) {
  todos[index].done = !todos[index].done;
  saveTodos(todos);
  render();
}
JavaScript

ここで setItem / getItem は、

  • TODO 配列を JSON 文字列として保存する
  • JSON 文字列から TODO 配列を復元する

という「橋渡し役」になっています。

「アプリの中ではオブジェクト・配列で扱う」
「ストレージに出し入れするときだけ文字列に変換する」

この境界を意識できるようになると、
ストレージ設計の感覚が一段上がります。

localStorage と sessionStorage での setItem / getItem の違い

API は同じ、寿命とスコープが違う

setItem / getItem 自体の使い方は、
localStorage でも sessionStorage でもまったく同じです。

違うのは「どこに保存されるか」「いつ消えるか」。

localStorage
ブラウザを閉じても残る。タブを閉じても残る。同じドメインならどのタブからも見える。

sessionStorage
タブごとに分かれている。そのタブを閉じたら消える。ブラウザ再起動でも残らない。

なので、

長く残っていてほしい設定 → localStorage の setItem / getItem
タブを閉じたら消えていい一時状態 → sessionStorage の setItem / getItem

という使い分けになります。

でも、どちらも「文字列として保存」「JSON で包む」という基本ルールは同じです。

初心者として setItem / getItem で本当に意識してほしいこと

最後に、頭の中に置いておいてほしいポイントをまとめます。

setItem は「キーと値を文字列として保存する」
getItem は「キーを指定して文字列を取り出す。存在しないときは null」
数字として使いたいなら Number(…) などで自分で変換する
オブジェクトや配列は JSON.stringify / JSON.parse で包んで出し入れする
localStorage でも sessionStorage でも、setItem / getItem の使い方は同じ

おすすめの練習は、
小さなページを作って、こういうことをやってみることです。

フォームの入力値を setItem / getItem で保存・復元する
チェックボックスの ON/OFF を保存して、リロードしても状態を維持する
簡単な TODO リストを JSON で保存してみる

「自分で保存したものを、自分で取り出して使う」
この感覚が一度つかめると、
setItem / getItem はただの API ではなく、
「自分のアプリに“記憶”を持たせるための道具」 に変わります。

スポンサーリンク
タイトルとURLをコピーしました