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

Question 1

ls existIE7 의 다음 코드 경고 :

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

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

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

Question 2

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;
    }
});

현재 소스 코드로 업데이트

Question 3

if(typeof Storage !== "undefined")
  {
  // Yes! localStorage and sessionStorage support!
  // Some code.....
  }
else
  {
  // Sorry! No web storage support..
  }

Question 4

이 기능은 잘 작동합니다.

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

출처 : www.diveintohtml5.info

Question 5

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

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

Question 6

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

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

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

Question 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 기능이 필요할 때마다 먼저 부모 개체를 테스트 한 다음 코드에서 사용하는 메서드를 테스트하는 것입니다.

Question 8

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

    try{
       localStorage.setItem("name",name.value);
       localStorage.setItem("post",post.value);
       }
    catch(e){
       alert(e.message);
       }