브라우저가 HTML5 로컬 저장소를 지원하는지 감지하는 방법

84

ls existIE7 의 다음 코드 경고 :

if(window.localStorage) {
    alert('ls exists');
} else {
    alert('ls does not exist');
}

IE7은 실제로 로컬 저장소를 지원하지 않지만 여전히 경고합니다. 아마도 IE9 개발자 도구를 사용하여 IE7 브라우저 및 문서 모드에서 IE9를 사용하고 있기 때문일 것입니다. 또는 이것은 LS가 지원되는지 테스트하는 잘못된 방법 일 수 있습니다. 올바른 방법은 무엇입니까?

또한 몇 가지 HTML5 기능 만 사용하고 있으며 큰 스크립트를로드하는 것은 이러한 몇 가지 기능에 대한 지원을 감지 할 가치가 없기 때문에 Modernizr를 사용하고 싶지 않습니다.

javascript  html 
— TK123
소스
— BuZZ-dEE 2017

답변:

99

modernizr를 사용할 필요는 없지만 localStorage지원 여부를 감지하기 위해 해당 방법을 사용할 수 있습니다.

github 테스트 에서 modernizr
localStorage

// In FF4, if disabled, window.localStorage should === null.

// Normally, we could not test that directly and need to do a
//   `('localStorage' in window) && ` test first because otherwise Firefox will
//   throw bugzil.la/365772 if cookies are disabled

// Also in iOS5 & Safari Private Browsing mode, attempting to use localStorage.setItem
// will throw the exception:
//   QUOTA_EXCEEDED_ERRROR DOM Exception 22.
// Peculiarly, getItem and removeItem calls do not throw.

// Because we are forced to try/catch this, we'll go aggressive.

// Just FWIW: IE8 Compat mode supports these features completely:
//   www.quirksmode.org/dom/html5.html
// But IE8 doesn't support either with local files

Modernizr.addTest('localstorage', function() {
    var mod = 'modernizr';
    try {
        localStorage.setItem(mod, mod);
        localStorage.removeItem(mod);
        return true;
    } catch(e) {
        return false;
    }
});

현재 소스 코드로 업데이트

— 안드레아스
소스
3
var mod = "test";try-catch 블록 앞에 추가하십시오 . 그렇지 않으면 mod가 거기에 정의되어 있지 않기 때문에 항상 실패합니다.
— Mahn 2013-08-17
5
localstorage에 남은 공간이 없으면 실패 할 수 있습니다.
— Patrick
1
솔직히 이것이 최선의 테스트는 아닙니다. 로컬 스토리지가 꽉 차면 어떨까요? localStorage를 지원할 수 있지만 추가 할 수없는 상태입니다.
— DemiImp 2016
2
참고이 다른 창에서 저장 이벤트를 발생합니다
— 마크 Swardstrom
2
@Andreas-네, 알아요. 이 테스트는 로컬 저장소를 수정합니다. 그런 일이 발생하지 않고 지원 테스트 만하려는 경우 다른 솔루션이 더 나은 선택 일 수 있습니다.
— Mark Swardstrom
44 
if(typeof Storage !== "undefined")
  {
  // Yes! localStorage and sessionStorage support!
  // Some code.....
  }
else
  {
  // Sorry! No web storage support..
  }
— 브랜든 페라라
소스
7
typeof(Storage) !== void(0)더 나은 솔루션입니다
— Petja
2
@petjato 실제로해야if (Storage !== void(0))
— 앤드류
4
typeof함수가 아니라 언어 연산자입니다. 왜 괄호?
— r3wt
1
이것은 W3Schools 웹 사이트 에있는 것의 약간 변형 된 것 같습니다 . 또한 작동하지 않는 것 같습니다.
— fujiiface
2
Safari의 개인 정보 보호 브라우징 모드는 localStorage에 쓰기를 지원하지 않지만이 검사는이 경우 true를 반환합니다. Andreas의 솔루션이이 경우를 처리합니다.
— 디팍 기쁨
16

이 기능은 잘 작동합니다.

function supports_html5_storage(){
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch(e) {
        return false;
    }
}

출처 : www.diveintohtml5.info

— 후안 라
소스
1
오랜 시간이 지났습니다. 책을 읽은 이후로 가장 좋은 답입니다. 내 질문에 우리가 한 가지를 두 번 NULL로 확인하는 이유는 무엇입니까?
— Ali Saberi
첫 번째 'localStorage' in window는 속성이 창 개체에 존재하는지 ( '정의되지 않음'이 아님) window['localStorage'] !== null확인 하고 두 번째 는 해당 속성이 NULL이 아닌지 확인한다고 생각합니다.
— juanra
1
단순히 window [ 'localStorage'] == null에 대해 엄격하지 않은 동등성 검사를 수행하여 달성 할 수 없습니까? 그것은 정의되지 않은 검사와 널 검사를 모두 다룹니다.
— Triynko 2015 년
글쎄요. ´window [ 'something'] == null´을 선택하면 정의되지 않은 경우에도 결과는 "true"입니다. 그럼에도 불구하고 나는 명확성을 위해 첫 번째 방법을 선택할 것입니다.
— juanra
15

또한 몇 가지 HTML5 기능 만 사용하고 있으며 큰 스크립트를로드하는 것은 이러한 몇 가지 기능에 대한 지원을 감지 할 가치가 없기 때문에 Modernizr를 사용하고 싶지 않습니다.

Modernizr 파일 크기를 줄이려면 http://modernizr.com/download/ 에서 파일을 필요에 맞게 사용자 정의하십시오 . Modernizr의 localStorage 전용 버전은 1.55KB로 제공됩니다.

— 스티브 A
소스
3
안녕하세요, Stack Overflow에 오신 것을 환영합니다! 이것은 원래 질문에 대한 답변 이라기보다는 주석 이어야하는 것처럼 들립니다 . 나는 아직 언급 할 수 실현하지만, 50에 도달 대표하는 것은 어렵거나 시간이 소요되지 않습니다.
— Jesse
1
당신은 그것을 할 수 있습니다. 확인 내가 그렇게 upvoted 지금은 51이
— Simon_Weaver
1.55kb가 아무것도 아니라는 것을 알고 있지만 localStorage 지원을 확인하는 것은 여전히 ​​과잉 인 것처럼 보입니다.
— Tyler Biscoe 2017
9

시도해보십시오 window.localStorage!==undefined:

if(window.localStorage!==undefined){
    //Do something
}else{
    alert('Your browser is outdated!');
}

을 사용할 수도 typeof window.localStorage!=="undefined"있지만 위의 명령문은 이미 사용하고 있습니다.

— 다닐로 발렌테
소스
2
Safari에는 localStorage가있을 수 있지만 개인 모드 (QuotaExceededError) 인 경우 오류가 발생하므로 tr / catch가 최상의 옵션입니다. IMHO
— Endless
1
흠, 몰랐습니다. 하지만 글을 쓰려고 할 때만 그 오류가 발생합니다.
— Danilo Valente 2014
1
실제로, Safari가 쿠키 및 웹 사이트 데이터를 차단하도록 설정되어있을 때 window.localStorage 속성 (이 예에 표시된 것과 같음)을 확인하는 것만으로도 오류가 발생합니다. 구체적으로 :SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.
— Aaronius 2015 년
Safari의 개인 정보 보호 브라우징 모드는 localStorage에 쓰기를 지원하지 않지만이 검사는이 경우 true를 반환합니다. Andreas의 솔루션이이 경우를 처리합니다.
— 디팍 기쁨
7

답변에서 보지 못했지만 간단한 테스트에 바닐라 JS 또는 jQuery를 쉽게 사용할 수 있으며 Modernizr가 많은 도움이되지만 깨끗한 솔루션이 없다는 것을 아는 것이 좋습니다.

jQuery 를 사용 하면 다음을 수행 할 수 있습니다.

var _supportsLocalStorage = !!window.localStorage
    && $.isFunction(localStorage.getItem)
    && $.isFunction(localStorage.setItem)
    && $.isFunction(localStorage.removeItem);

또는 순수한 Vanilla JavaScript로 :

var _supportsLocalStorage = !!window.localStorage
    && typeof localStorage.getItem === 'function'
    && typeof localStorage.setItem === 'function'
    && typeof localStorage.removeItem === 'function';

그런 다음 간단히 IF를 수행하여 지원을 테스트합니다.

if (_supportsLocalStorage) {
    console.log('ls is supported');
    alert('ls is supported');
}

따라서 전체 아이디어는 JavaScript 기능이 필요할 때마다 먼저 부모 개체를 테스트 한 다음 코드에서 사용하는 메서드를 테스트하는 것입니다.

— Ovi Trif
소스
3

catch 시도가 작업을 수행합니다.

    try{
       localStorage.setItem("name",name.value);
       localStorage.setItem("post",post.value);
       }
    catch(e){
       alert(e.message);    
       }
— 모 히트 베르 마
소스
1

시험: 

if(typeof window.localStorage != 'undefined') {
}
— ErJab
소스
1 
if (window.localStorage){

   alert('localStorage is supported');
   window.localStorage.setItem("whatever", "string value");

}
— 대런
소스
도약과 경계에 의해 여기에 대한 베스트 답변
— alex bennett
1

Andrea의 대답을 수정하여 getter를 추가하면 사용하기가 더 쉽습니다. 아래와 같이 간단하게 말합니다.if(ls)...

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


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

function script(){
  if(ls){
    alert('Yes');
  } else {
    alert('No');
  }
}
<button onclick="script()">Local Storage Support?</button>
스 니펫 확장

— 로니 로이스 톤
소스
0

파티에 조금 늦었다는 것을 알고 있지만 몇 가지 유용한 기능을 만들어 'manage_storage.js'라는 파일에 넣었습니다. 나는 그들이 나를 잘 봉사했기 때문에 당신들에게 유용하기를 바랍니다.

기억하십시오 : 찾고있는 기능 (이 질문에 대한 답)은 isLclStorageAllowed입니다.

그래서 여기에 더 이상 고민하지 않고 내 코드가 있습니다.

/* Conditional Function checks a web browser for 'session storage' support. [BEGIN] */

if (typeof isSessStorageAllowed !== 'function')
    {
        function isSessStorageAllowed()
            {
                if (!!window.sessionStorage && typeof sessionStorage.getItem === 'function' && typeof sessionStorage.setItem === 'function' && typeof sessionStorage.removeItem === 'function')
                    {
                        try
                            {
                                var cur_dt = new Date();
                                var cur_tm = cur_dt.getTime();
                                var ss_test_itm_key = 'ss_test_itm_' + String(cur_tm);
                                var ss_test_val = 'ss_test_val_' + String(cur_tm);

                                sessionStorage.setItem(ss_test_itm_key, String(ss_test_val));

                                if (sessionStorage.getItem(ss_test_itm_key) == String(ss_test_val))
                                    {
                                        return true;
                                    }
                                else
                                    {
                                        return false;
                                    };

                                sessionStorage.removeItem(ss_test_itm_key);
                            }
                        catch (exception)
                            {
                                return false;
                            };
                    }
                else
                    {
                        return false;
                    };
            };
    };

/* Conditional Function checks a web browser for 'session storage' support. [END] */

/* Conditional Function checks a web browser for 'local storage' support. [BEGIN] */

if (typeof isLclStorageAllowed !== 'function')
    {
        function isLclStorageAllowed()
            {
                if (!!window.localStorage && typeof localStorage.getItem === 'function' && typeof localStorage.setItem === 'function' && typeof localStorage.removeItem === 'function')
                    {
                        try
                            {
                                var cur_dt = new Date();
                                var cur_tm = cur_dt.getTime();
                                var ls_test_itm_key = 'ls_test_itm_' + String(cur_tm);
                                var ls_test_val = 'ls_test_val_' + String(cur_tm);

                                localStorage.setItem(ls_test_itm_key, String(ls_test_val));

                                if (localStorage.getItem(ls_test_itm_key) == String(ls_test_val))
                                    {
                                        return true;
                                    }
                                else
                                    {
                                        return false;
                                    };

                                localStorage.removeItem(ls_test_itm_key);
                            }
                        catch (exception)
                            {
                                return false;
                            };
                    }
                else
                    {
                        return false;
                    };
            };
    };

/* Conditional Function checks a web browser for 'local storage' support. [END] */

/* Conditional Function checks a web browser for 'web storage' support. [BEGIN] */

/* Prerequisites: 'isSessStorageAllowed()', 'isLclStorageAllowed()' */

if (typeof isWebStorageAllowed !== 'function')
    {
        function isWebStorageAllowed()
            {
                if (isSessStorageAllowed() === true && isLclStorageAllowed() === true)
                    {
                        return true;
                    }
                else
                    {
                        return false;
                    };
            };
    };

/* Conditional Function checks a web browser for 'web storage' support. [END] */
— 제임스 앤더슨 주니어
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.