web-dev-qa-db-ja.com

localStorageが使用可能かどうかを確認します

localStorageの確認について多くの質問があったことは知っていますが、誰かがブラウザで手動でシャットオフした場合はどうなりますか？チェックに使用しているコードは次のとおりです。

localStorage.setItem('mod', 'mod');
if (localStorage.getItem('mod') != null){
    alert ("yes");
    localStorage.removeItem('mod');
}else{
    alert ("no");
}

シンプルな機能で動作します。しかし、Chrome設定に移動し、[データを保存しない]オプションを選択した場合（名前を正確に覚えていません）、この関数を実行しようとしても何も得られません。しかし、Uncaught Error: SecurityError: DOM Exception 18。だから、人がそれを完全にオフにしているかどうかを確認する方法はありますか？

更新：これは私が試した2番目の関数であり、まだ応答がありません（アラート）。

try {
 localStorage.setItem("name", "Hello World!");
} catch (e) {
 if (e == QUOTA_EXCEEDED_ERR) {
     alert('Quota exceeded!');
}
}
javascripterror-handlinglocal-storage
61
user2025469

modernizr のアプローチを使用します（関数名をより良いものに変更したい場合があります）。

function lsTest(){
    var test = 'test';
    try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}

if(lsTest() === true){
    // available
}else{
    // unavailable
}

他の方法ほど簡潔ではありませんが、互換性を最大化するように設計されているためです。

元のソース： https://github.com/Modernizr/Modernizr/blob/master/feature-detects/storage/localstorage.js

作業例： http://jsfiddle.net/6sm54/2/

110
Joe

localStorageがそれに依存するアクションの前に定義されていることを確認します。

if (typeof localStorage !== 'undefined') {
    var x = localStorage.getItem('mod');
} else {
    // localStorage not defined
}

更新：

機能が存在すること、および機能がオフになっていないことを検証する必要がある場合は、より安全なアプローチを使用する必要があります。完全に安全にするには：

if (typeof localStorage !== 'undefined') {
    try {
        localStorage.setItem('feature_test', 'yes');
        if (localStorage.getItem('feature_test') === 'yes') {
            localStorage.removeItem('feature_test');
            // localStorage is enabled
        } else {
            // localStorage is disabled
        }
    } catch(e) {
        // localStorage is disabled
    }
} else {
    // localStorage is not available
}
14
Frederik.L

ローカルストレージの機能検出は注意が必要です。実際にそれに到達する必要があります。これは、Safariがプライベートモードのときに機能的なlocalStorageオブジェクトを提供することを選択したためですが、quotumはゼロに設定されています 。これは、すべての単純な機能が検出するものの、localStorage.setItemは例外をスローします。

Web Storage APIのMozillaのDeveloper Networkエントリには、 ローカルストレージの検出機能に関する専用セクション があります。そのページで推奨される方法は次のとおりです。

function storageAvailable(type) {
    try {
        var storage = window[type],
            x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return false;
    }
}

そして、ここにあなたがそれを使用する方法があります：

if (storageAvailable('localStorage')) {
    // Yippee! We can use localStorage awesomeness
}
else {
    // Too bad, no localStorage for us
}

NPMを使用している場合は、 storage-available を使用して取得できます

npm install -S storage-available

次に、次のような関数を使用します。

if (require('storage-available')('localStorage')) {
    // Yippee! We can use localStorage awesomeness
}

免責事項：MDNのドキュメントセクションとNPMパッケージの両方が私によって作成されました。

9
Stijn de Witt

MDN 更新 ストレージ検出機能。 2018年には、より信頼性が高くなりました。

function storageAvailable() {
    try {
        var storage = window['localStorage'],
            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;
    }
}

LocalStorageをサポートするブラウザーには、localStorageという名前のウィンドウオブジェクトのプロパティがあります。ただし、さまざまな理由により、プロパティが存在することをアサートするだけで例外がスローされる場合があります。存在する場合でも、さまざまなブラウザがlocalStorageを無効にする設定を提供するため、localStorageが実際に利用可能であるという保証はありません。そのため、ブラウザはlocalStorageをsupportできますが、availableページ上のスクリプト。その一例がSafariです。プライベートブラウジングモードでは、クォータがゼロの空のlocalStorageオブジェクトが得られ、事実上使用できなくなります。ただし、正当なQuotaExceededErrorが引き続き発生する可能性があります。これは、使用可能なすべてのストレージスペースを使い果たしたことを意味するだけですが、ストレージは実際にはavailableです。機能検出では、これらのシナリオを考慮する必要があります。

機能検出localStorageの簡単な履歴 についてはこちらをご覧ください。

3
mcmimik

この機能を使用すると、localstorageが使用可能かどうかを確認でき、可能な例外を制御できます。

function isLocalStorageAvailable() {

    try {
        var valueToStore = 'test';
        var mykey = 'key';
        localStorage.setItem(mykey, valueToStore);
        var recoveredValue = localStorage.getItem(mykey);
        localStorage.removeItem(mykey);

        return recoveredValue === valueToStore;
    } catch(e) {
        return false;
    }
}
0
luis moyano