ブラウザにデータを保存（Web Storage）
ブラウザにデータを保存するには、Web Storageを使用します。
Web Storageには、localStorageプロパティとsessionStorageプロパティの2種類があります。
Cookie／localStorage／sessionStorageの違い
Cookieを含めたそれぞれの違いは次の通りです。
| ストレージ名 | 有効期限 | 有効範囲 | 容量 | サーバへの通信 |
|---|---|---|---|---|
| Cookie | 指定期限まで | 指定箇所 （ドメイン、パスそれぞれ） |
4 KB | リクエストする度 |
| localStorage | 半永久 | ドメイン（FQDN） | 5 MB | データの操作を行った時 |
| sessionStorage | セッション | ドメイン（FQDN） | 5 MB | データの操作を行った時 |
データの保存
データの保存するには、Storage.setItemメソッドを使用します。
構文
localStorage
localStorage.setItem(key, value);sessionStorage
sessionStorage.setItem(key, value);引数
| 引数名 | 型 | 説明 | |
|---|---|---|---|
| 第一引数 必須 |
key | string | 格納する箱の名称 |
| 第二引数 必須 |
value | string | 格納する値 |
サンプルコード
JavaScript
localStorage.setItem('foo', 'あいうえお');なお、Storage.キーやStorage[キー]でも保存することができます。
JavaScript
localStorage.foo = 'あいうえお';データの取得
ストレージに保存されているデータを取得するには、Storage.getItemメソッドを使用します。
構文
localStorage
var result = localStorage.getItem(key);sessionStorage
var result = sessionStorage.getItem(key);引数
| 引数名 | 型 | 説明 | |
|---|---|---|---|
| 第一引数 必須 |
key | string | 格納されている先の名称 |
戻り値
取得したデータを文字列で返します。
存在しない場合はnullを返します。
サンプルコード
JavaScript
var result = localStorage.getItem('foo');
console.log(result);なお、Storage.キーやStorage[キー]でも取得することができます。
JavaScript
var result = localStorage.foo;
console.log(result);全てのデータを取得
ストレージに保存されているデータを取得するには、次のような方法で取得できます。
サンプルコード
JavaScript
Object.keys(localStorage).forEach(function(key) {
console.log(localStorage.getItem(key));
});Object.keysメソッドで全てのキーを取得し、Array.forEachで取得したキーを繰り返し、Storage.getItemメソッドでキーに一致する値を取得します。
保存されているデータの数を取得
保存されているデータの数を取得するには、Storage.lengthプロパティを使用します。
構文
localStorage
var result = localStorage.length;sessionStorage
var result = sessionStorage.length;戻り値
取得したデータの数を返します。
サンプルコード
JavaScript
console.log(localStorage.length);データの削除
ストレージに保存されている特定のデータを削除するには、Storage.removeItemメソッドを使用します。
構文
localStorage
localStorage.removeItem(key);sessionStorage.removeItem(key);引数
| 引数名 | 型 | 説明 | |
|---|---|---|---|
| 第一引数 必須 |
key | string | 格納されている先の名称 |
サンプルコード
JavaScript
localStorage.removeItem('foo');全てのデータを削除
全てのデータを削除するには、Storage.clearメソッドを使用します。
構文
localStorage
localStorage.clear();sessionStorage
localStorage.clear();サンプルコード
JavaScript
localStorage.clear();