前の記事
目的
- Web Storage APIの仕様を知る。
結果
基本概念
Storageオブジェクトは、keyとvalueの組み合わせで、ページを読み込んでも存在し続ける。keyは常に文字列で、これらにアクセスするには、オブジェクトと同様に、またはStorage.getItem()とStorage.setItem()メソッドを使用する。localStorage.colorSetting = '#a4509b'; localStorage['colorSetting'] = '#a4509b'; localStorage.setItem('colorSetting', '#a4509b');Web Storage APIの使用が推奨されており、これは単純なオブジェクトがキーバリューストアとして使うという落とし穴を防ぐため。
localStorageの機能検出
- ローカルストレージを使用するには、まずブラウザが対応済みであり、利用可能であるかを確かめるべき。
- ただ、今はほぼ全てのブラウザで対応しているので、古いブラウザを使用している場合に確認をする必要がある。
function storageAvailable(type) {
var storage;
try {
storage = window[type];
var x = '__storage_test__';
storage.setItem(x, x);
storage.removeItem(x);
return true;
}
catch(e) {
return e instanceof DOMException && (
// everything except Firefox
e.code === 22 ||
// Firefox
e.code === 1014 ||
// test name field too, because code might not be present
// everything except Firefox
e.name === 'QuotaExceededError' ||
// Firefox
e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
// acknowledge QuotaExceededError only if there's something already stored
(storage && storage.length !== 0);
}
}
// 確認
if (storageAvailable('localStorage')) {
// ローカルストレージ対応あり
}
else {
// ローカルストレージ対応なし
}
