本文へ移動
Web Storage API
この記事では「Web Storage API」について、基本の意味と使い方を初心者向けにやさしく説明します。
A part of Web Storage that keeps data even after closing the page — perfect for saving things in your browser for a long time.
localStorage
Web Storage の中で、ページを閉じてもデータが残る仕組み。ブラウザに情報を長く保存しておきたいときに使う。
localStorage とは？
localStorage は、Webブラウザの中に小さな「メモ帳」を作って、そこにデータをずっと保存しておける仕組みです。
たとえば、ユーザーの名前や設定内容、ページ内の状態などをブラウザが覚えておけるので、次に同じページを開いたときに前の状態を再現できます。
Cookie と違ってサーバーに送られないので、通信量も増えません。ブラウザを閉じてもデータは消えず、手動で消すか、スクリプトで削除するまで残ります。
使い方の基本
localStorage は「キーと値」でデータを保存します。
保存も読み出しもとても簡単です。
// データを保存
localStorage.setItem("userName", "Yuki");
// データを取り出す
const name = localStorage.getItem("userName");
console.log(name); // → "Yuki"
// データを削除
localStorage.removeItem("userName");
// すべてのデータを削除
localStorage.clear();
setItem()- データを保存
getItem()- データを取得
removeItem()- 指定したデータを削除
clear()- すべて削除
注意点
- 保存できるのは「文字列」だけです。オブジェクトを保存したいときは
JSON.stringify() で文字列に変換します。
- 容量はブラウザによって異なりますが、だいたい5MB前後です。
- 同じドメイン（例：example.com）で共有されます。サブドメイン（例：sub.example.com）は別扱いになります。