[자바스크립트] localStorage.setItem시 iOS7 사파리에서 QuotaExceededError: DOM Exception 22 해결법(?)

* 이번에 간단하게 웹을 통해서 몇백KB 정도 되는 데이터를 웹에서 불러다가 처리하는 개인 프로젝트를 개발하다가 매번 몇백KB를 불러오는게 부담이 되어, localStorage의 캐쉬를 이용하는 간단한 웹을 만들고 있었는데 안드로이드와 구형 아이패드에서는 잘 되는데 이상하게 최신 아이폰5에서는 잘 안되는 것이었다. 왜그런가 살펴보다가 디버깅툴을 이용해서 이것저것 테스트하다가 아래와 같은 에러가 일어나는 것을 발견했다.

"QuotaExceededError: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota."

: 대충 너무 큰 사이즈의 데이터를 입력하려고 했다는 의미인 것 같았는데, 검색해보니 iOS7에서의 사파리는 기본적으로 5MB의 사이즈를 가지고 있다는데, 몇백KB를 예상하고 있어서 그 이상이 될리가 만무했다. 그래서 더 자세하게 찾아보니,

"iOS7의 사파리에서는 private browsing을 실행하고 있으면 해당 localStorage를 사용할 수 없다"

: 이번에는 개인적인 프로젝트라 이것을 원초적으로 해결하는 방법은 그 "private browsing"을 해제하는 일이다. 그 방법은, 사파리를 열고 

"북마크 > 개인정보 보호 > 모두 유지(또는 모두 닫기) 순으로 진행"하면 이후에 localStorage를 에러 없이 사용할 수 있다.

      

: 하지만 일반 사용자들의 설정을 일일이 바꿀수는 없는 법. 단도직입적으로 말하자면, 이것을 피해갈 수 있는 방법은 없다. 따라서, 상용 웹 프로젝트에서 아이폰의 localStorage를 사용하고 싶은 경우(특히, 웹앱의 경우) 아래와 같이 고려해야할 것이다.

• 캐쉬 기능을 사용하지 않는 경우를 최우선으로 고려
• 위의 localStorage에서 에러가 일어나는 경우를 처리할 수 있도록 try-catch문으로 감싸고, 해당 에러를 무시
• 캐쉬 기능이 반드시 필요하다면 위의 try-catch알람 팝업으로 경고를 띄우는 것이 최후의 방법이 될 것이다.

: 간단하게 localStorage가 가용한지 여부를 체크하기 위한 소스는 아래와 같다.

function isLocalStorageSupported() {
  var testKey = 'test', storage = window.localStorage;
  try {
    storage.setItem(testKey, '1');  // storage가 undefined인 경우 브라우져가 지원 안 함, setItem 하다가 QuotaExceededError가 일어나면 private browsing으로 막혀져 있음
    storage.removeItem(testKey);
    return true;
  } catch (error) {
    return false;
  }
}

: 만약 반드시 localStorage가 필요하다면 위의 함수를 호출하고 사용자한테 알람을 띄우겠지만, 웬만하면 강요는 하지 말고, 그냥 캐쉬가 불가능하면 다시 서버에서 읽어오되 캐쉬를 활성화 시키려면 private browsing을 끄라는 toast를 살짝 띄우는 것이 제일 좋은 방법이 아닌가 싶다.

끝.