localStorage / sessionStorage 対応: HTML5（IE起源→標準化）

ブラウザにデータを保存するためのストレージAPIです。『localStorage』はブラウザを閉じてもデータが保持され、『sessionStorage』はタブを閉じるとデータが消えます。

構文

// データを保存します。
localStorage.setItem("キー", "値");

// データを取得します。
var value = localStorage.getItem("キー");

// データを削除します。
localStorage.removeItem("キー");

// すべてのデータを削除します。
localStorage.clear();

メソッド・プロパティ一覧

メソッド / プロパティ	概要
setItem("キー", "値")	指定したキーで値を保存します。同じキーがすでに存在する場合は上書きされます。
getItem("キー")	指定したキーの値を取得します。キーが存在しない場合は『null』を返します。
removeItem("キー")	指定したキーのデータを削除します。
clear()	すべてのデータを一括で削除します。
length	保存されているデータの件数を返します。

サンプルコード

// 文字列を保存して取得する例
localStorage.setItem("username", "太郎");
var name = localStorage.getItem("username");
console.log(name); // 『太郎』と出力されます。

// オブジェクトを保存する場合はJSON文字列に変換します。
var user = { name: "太郎", age: 25 };
localStorage.setItem("user", JSON.stringify(user));

// 取得時にJSONをオブジェクトに戻します。
var savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // 『太郎』と出力されます。
console.log(savedUser.age); // 『25』と出力されます。

// 保存件数を確認します。
console.log(localStorage.length); // 『2』と出力されます。

// キーが存在しない場合
var result = localStorage.getItem("address");
console.log(result); // 『null』と出力されます。

// 特定のデータを削除します。
localStorage.removeItem("username");

// すべてのデータを削除します。
localStorage.clear();

localStorageとsessionStorageの違い

ストレージ	概要
localStorage	データの有効期限がなく、ブラウザを閉じてもデータが保持されます。ユーザーが明示的に削除するか、『clear()』や『removeItem()』で削除するまで残り続けます。
sessionStorage	タブを閉じるとデータが消えます。同じドメインであっても、別のタブでは別のストレージとして扱われます。

概要

『localStorage』と『sessionStorage』はブラウザにキーと値のペアでデータを保存するためのWeb Storage APIです。Cookieと異なりサーバーへ自動送信されないため、クライアント側でのデータ管理に適しています。

保存できるのは文字列のみです。オブジェクトや配列を保存する場合は『JSON.stringify()』で文字列に変換してから保存し、取得時に『JSON.parse()』でオブジェクトに戻す必要があります。保存容量はブラウザによって異なりますが、一般的に5MB程度です。

テーマ設定の保存やフォームの入力途中の一時保存、ショッピングカートの管理など、ページを閉じても情報を残しておきたい場面で『localStorage』が活用されています。一方『sessionStorage』は、マルチステップフォームの一時データなど、タブを閉じた際に消えてほしいデータの管理に適しています。