LocalStorageを利用する際に気をつけること

LocalStorageを利用する際に気をつけること:

localStorageのサポート状況、利用可能であることを確認する

localStorage を使用する前に、現在のブラウザーセッションでサポート済みかつ使用可能であるかをはじめに確かめる。

例えば、利用しているブラウザでCookieの利用をOffにしているブラウザや、一部のプライベートブラウズ（AndroidのWebViewでWebStorageを有効にしていない時など）でそのまま利用するとエラーとなる。

localStorage がサポート済みかつ使用可能であるかを検出する関数は公式でも公開されている。

function storageAvailable(type) { 
    try { 
        var storage = window[type], 
            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.length !== 0; 
    } 
} 
 
// 利用例 
if (storageAvailable('localStorage')) { 
    // localStorage をちゃんと使用できます 
} else { 
    // 残念ながら localStorage は使用できません 
} 

上記例では、localStorageに対し、ダミーで値をセットし削除を行うことで、正常に処理が終了した際にはtrueを、問題が起きた際はExceptionに処理を流すことで判定を行なっている。

localStorageに値をsetしたり、getするさいに都度呼ぶのが面倒なときはsetやget自体を関数にしすることで上記同様エラーを回避することができる。

function setItem(key, value) { 
    try { 
        localStorage.setItem(key, value); 
    } catch(e) { 
        // 戻り値は任意 
        return  false; 
    } 
} 
 
function getItem(key) { 
    try { 
        localStorage.getItem(key); 
    } catch(e) { 
        // 戻り値は任意 
        return  false; 
    } 
} 
 
setItem('hoge', 'fuga'); 
let item = getItem('hoge'); 
if (!item) { 
    console.log(item); // false 
} else { 
    console.log(item); // fuga 
}