JavaScript
ウェブストレージ

構文

• localStorage.setItem（name、value）;

• localStorage.getItem（name）;

• localStorage.name = value;

• localStorage.name;

• localStorage.clear（）

• localStorage.removeItem（name）;

パラメーター

備考

localStorageの使用

localStorageオブジェクトは、文字列の永続的（永続的ではありません）のキー値格納を提供します。変更は、同じ原点からの他のすべてのウィンドウ/フレームですぐに表示されます。ユーザーが保存されたデータを消去したり、有効期限を設定しない限り、保存された値は無期限に永続します。 localStorageは、値を取得および設定するためにマップのようなインターフェイスを使用します。

localStorage.setItem('name', "John Smith");
console.log(localStorage.getItem('name')); // "John Smith"

localStorage.removeItem('name');
console.log(localStorage.getItem('name')); // null

シンプルな構造化データを保存する場合は、JSONを使用してストリングとの間でシリアル化してストレージに格納できます。

var players = [{name: "Tyler", score: 22}, {name: "Ryan", score: 41}];
localStorage.setItem('players', JSON.stringify(players));

console.log(JSON.parse(localStorage.getItem('players')));
// [ Object { name: "Tyler", score: 22 }, Object { name: "Ryan", score: 41 } ]

ブラウザーでのlocalStorageの制限

モバイルブラウザ：

デスクトップブラウザ：

ストレージイベント

localStorageに値が設定されると、 storageイベントは同じ原点からの他のすべてのwindowsディスパッチされます。これは、サーバーをリロードまたは通信することなく、異なるページ間で状態を同期させるために使用できます。たとえば、入力要素の値を段落テキストとして別のウィンドウに反映させることができます。

var input = document.createElement('input');
document.body.appendChild(input);

input.value = localStorage.getItem('user-value');

input.oninput = function(event) {
  localStorage.setItem('user-value', input.value);
};

var output = document.createElement('p');
document.body.appendChild(output);

output.textContent = localStorage.getItem('user-value');

window.addEventListener('storage', function(event) {
  if (event.key === 'user-value') {
    output.textContent = event.newValue;
  }
});

ノート

ドメインがスクリプトによって変更された場合、Chrome、Edge、Safariではイベントが発生しない、またはキャッチ可能ではありません。

// page url: http://sub.a.com/1.html
document.domain = 'a.com';

var input = document.createElement('input');
document.body.appendChild(input);

input.value = localStorage.getItem('user-value');

input.oninput = function(event) {
  localStorage.setItem('user-value', input.value);
};

// page url: http://sub.a.com/2.html
document.domain = 'a.com';

var output = document.createElement('p');
document.body.appendChild(output);

// Listener will never called under Chrome(53), Edge and Safari(10.0).
window.addEventListener('storage', function(event) {
  if (event.key === 'user-value') {
    output.textContent = event.newValue;
  }
});

sessionStorage

sessionStorageオブジェクトは、localStorageと同じStorageインターフェイスを実装します。ただし、同じ原点のすべてのページと共有するのではなく、すべてのウィンドウ/タブごとに別々に保存されます。保存されたデータは、開いている間だけそのウィンドウ/タブ内のページ間に保持されますが、他の場所には表示されません。

var audio = document.querySelector('audio');

// Maintain the volume if the user clicks a link then navigates back here.
audio.volume = Number(sessionStorage.getItem('volume') || 1.0);
audio.onvolumechange = function(event) {
  sessionStorage.setItem('volume', audio.volume);
};

データをsessionStorageに保存する

sessionStorage.setItem('key', 'value');

sessionStorageから保存されたデータを取得する

var data = sessionStorage.getItem('key');

sessionStorageから保存されたデータを削除する

sessionStorage.removeItem('key')

ストレージのクリア

ストレージをクリアするには、単に実行してください

localStorage.clear();

エラー条件

ほとんどのブラウザは、クッキーをブロックするように設定されていると、 localStorageもブロックしlocalStorage 。それを使用しようとすると例外が発生します。 これらのケースを管理することを忘れないでください。

var video = document.querySelector('video')
try {
    video.volume = localStorage.getItem('volume')
} catch (error) {
    alert('If you\'d like your volume saved, turn on cookies')
}
video.play()

エラーが処理されなかった場合、プログラムは正常に機能しなくなります。

ストレージアイテムを削除

ブラウザのストレージ（ setItemの反対側）から特定の項目を削除するには、 removeItem

localStorage.removeItem("greet");

例：

localStorage.setItem("greet", "hi");
localStorage.removeItem("greet");

console.log( localStorage.getItem("greet") ); // null

（同じことがsessionStorage適用されます）

ストレージを扱う簡単な方法

localStorage 、 sessionStorageはJavaScript オブジェクトであり、それらをそのまま扱うことができます。
.getItem() .setItem()などのストレージメソッドを使用する代わりに、もっと簡単な方法があります：

// Set
localStorage.greet = "Hi!"; // Same as: window.localStorage.setItem("greet", "Hi!");

// Get
localStorage.greet;         // Same as: window.localStorage.getItem("greet");

// Remove item
delete localStorage.greet;  // Same as: window.localStorage.removeItem("greet");

// Clear storage
localStorage.clear();

例：

// Store values (Strings, Numbers)
localStorage.hello = "Hello";
localStorage.year  = 2017;    

// Store complex data (Objects, Arrays)
var user = {name:"John", surname:"Doe", books:["A","B"]};
localStorage.user = JSON.stringify( user );

// Important: Numbers are stored as String
console.log( typeof localStorage.year ); // String

// Retrieve values
var someYear = localStorage.year; // "2017"

// Retrieve complex data
var userData = JSON.parse( localStorage.user );
var userName = userData.name; // "John"

// Remove specific data
delete localStorage.year; 

// Clear (delete) all stored data
localStorage.clear();

localStorageの長さ

localStorage.lengthプロパティは、 localStorage.length内の要素の数を示す整数値を返しlocalStorage

例：

セットアイテム

localStorage.setItem('StackOverflow', 'Documentation');
localStorage.setItem('font', 'Helvetica');
localStorage.setItem('image', 'sprite.svg');

長さを取得する

localStorage.length; // 3