Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- JavaScript辞典
- localStorage / sessionStorage
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();
実行結果
上記のコードを順番に実行すると、コンソールには以下のように出力されます。
"太郎" "太郎" 25 2 null
localStorageとsessionStorageの違い
| ストレージ | 概要 |
|---|---|
| localStorage | データの有効期限がなく、ブラウザを閉じてもデータが保持されます。ユーザーが明示的に削除するか、『clear()』や『removeItem()』で削除するまで残り続けます。 |
| sessionStorage | タブを閉じるとデータが消えます。同じドメインであっても、別のタブでは別のストレージとして扱われます。 |
概要
『localStorage』と『sessionStorage』はブラウザにキーと値のペアでデータを保存するためのWeb Storage APIです。Cookieと異なりサーバーへ自動送信されないため、クライアント側でのデータ管理に適しています。
保存できるのは文字列のみです。オブジェクトや配列を保存する場合は『JSON.stringify()』で文字列に変換してから保存し、取得時に『JSON.parse()』でオブジェクトに戻す必要があります。保存容量はブラウザによって異なりますが、一般的に5MB程度です。
テーマ設定の保存やフォームの入力途中の一時保存、ショッピングカートの管理など、ページを閉じても情報を残しておきたい場面で『localStorage』が活用されています。一方『sessionStorage』は、マルチステップフォームの一時データなど、タブを閉じた際に消えてほしいデータの管理に適しています。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする