前の記事
目的
- 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 { // ローカルストレージ対応なし }