최근 에 LocalStorage에 대한 질문을했습니다 . 사용 JSON.parse(localStorage.item)및 JSON.parse(localStorage['item'])반환하기 위해 노력하지 않은 NULL항목이 아직 설정되지 않은 경우.
그러나 JSON.parse(localStorage.getItem('item')작동했습니다. 그리고 그것은 JSON.parse(localStorage.testObject || null)또한 작동합니다.
의견 중 하나는 기본적으로 다음 localStorage.getItem()과 같이 localStorage.setItem()항상 선호해야한다고 말했습니다 .
getter 및 setter는 LS api와 함께 작동하는 일관되고 표준화 된 브라우저 간 호환 방법을 제공하며 항상 다른 방법보다 선호되어야합니다. – 크리스토프
나는 localStorage에 대한 축약 형 점 및 대괄호 표기법을 사용하는 것을 좋아하게되었지만 다른 사람들이 이것을 취하는 것을 알고 싶습니다. localStorage.getItem ( ‘item’)이 localStorage.item 또는 localStorage [ ‘item’]보다 낫거나 작동하는 한 속기 표기법이 괜찮습니까?
답변
직접 속성 액세스 ( localStorage.item또는 localStorage['item'])와 기능 인터페이스 ( localStorage.getItem('item')) 사용 모두 잘 작동합니다. 둘 다 표준이며 브라우저 간 호환됩니다. * 에 따르면 사양 :
Storage 개체에서 지원되는 속성 이름은 키가 저장 영역에 마지막으로 추가 된 순서대로 개체와 연결된 목록에 현재있는 각 키 / 값 쌍의 키입니다.
요청 된 이름을 가진 키 / 값 쌍을 찾을 수없는 경우에만 다르게 작동합니다. 키는 예를 들어, 'item'존재하지 않는 var a = localStorage.item;초래할 것 a인 undefined동안 var a = localStorage.getItem('item');발생한다 a값을 갖는 null. 당신이 발견 한 것처럼 undefined및 null자바 스크립트 / ECMA 스크립트에서 서로 호환되지 않습니다. 🙂
편집 : Christoph가 답변 에서 지적했듯이 기능 인터페이스는의 사전 정의 된 속성과 동일한 키 아래에서 값을 안정적으로 저장하고 검색하는 유일한 방법입니다 localStorage. (이 여섯이있다 : length, key, setItem, getItem, removeItem,와 clear.) 그래서, 예를 들어, 다음는 항상 일 :
localStorage.setItem('length', 2);
console.log(localStorage.getItem('length'));
특히 첫 번째 문은 속성에 영향을주지 않습니다 localStorage.length( 'length'이미에 키가없는 경우 증가시키는 경우 제외 localStorage). 이 점에서 사양은 내부적으로 일치하지 않는 것 같습니다.
그러나 다음은 원하는 작업을 수행하지 못할 수 있습니다.
localStorage.length = 2;
console.log(localStorage.length);
흥미롭게도 첫 번째는 Chrome에서 작동하지 않지만 Firefox의 기능 호출과 동의어입니다. 두 번째는 항상에있는 키의 수를 기록합니다 localStorage.
* 이것은 처음에 웹 스토리지를 지원하는 브라우저에 해당됩니다. (여기에는 거의 모든 최신 데스크톱 및 모바일 브라우저가 포함됩니다.) 쿠키 또는 기타 기술을 사용하여 로컬 저장소를 시뮬레이션하는 환경의 경우 동작은 사용되는 shim에 따라 다릅니다. 에 대한 여러 polyfill은 여기localStorage 에서 찾을 수 있습니다 .
답변
질문은 이미 꽤 오래되었지만 질문에 인용되었으므로 내 진술에 대해 두 단어를 말해야 할 것 같습니다.
저장소 개체는 다소 특별하며 키 / 값 쌍 목록에 대한 액세스를 제공하는 개체입니다. 따라서 일반 객체 나 배열이 아닙니다.
예를 들어, 배열 길이 속성과 달리 읽기 전용이고 스토리지의 키 수를 리턴하는 길이 속성이 있습니다.
어레이를 사용하면 다음을 수행 할 수 있습니다.
var a = [1,2,3,4];
a.length // => 4
a.length = 2;
a // => [1,2]
여기에 게터 / 세터를 사용하는 첫 번째 이유가 있습니다. 라는 항목을 설정하려면 어떻게해야 length합니까?
localStorage.length = "foo";
localStorage.length // => 0
localStorage.setItem("length","foo");
// the "length" key is now only accessable via the getter method:
localStorage.length // => 1
localStorage.getItem("length") // => "foo"
Storage 개체의 다른 구성원은 쓰기 가능하고 실수로 .NET과 같은 메서드를 덮어 쓸 수 있기 때문에 훨씬 더 중요 getItem합니다. API 메서드를 사용하면 이러한 가능한 문제를 방지하고 일관된 인터페이스를 제공합니다.
또한 흥미로운 점은 사양의 다음 단락입니다 (제가 강조).
setItem () 및 removeItem () 메서드는 실패와 관련하여 원자 적이어야합니다. 실패한 경우 메서드는 아무 작업도 수행하지 않습니다. 즉, 데이터 저장 영역에 대한 변경이 성공하거나 데이터 저장 영역이 전혀 변경되지 않아야합니다.
이론적으로는 게터 / 세터와 []액세스 사이에 차이가 없어야합니다 .
답변
나는 그것이 오래된 게시물이라는 것을 알고 있지만 실제로 성능을 언급 한 사람은 아무도 없기 때문에 일부 JsPerf 테스트를 설정하여 벤치마킹하고 일관된 인터페이스가 getItem되었으며 setItem점 표기법이나 대괄호를 사용하는 것보다 지속적으로 빠르며 읽기가 훨씬 쉽습니다.
JsPerf에 대한 내 테스트는 다음과 같습니다.
답변
언급했듯이 존재하지 않는 키를 제외하고는 거의 차이가 없습니다. 성능 차이는 변화 하는 브라우저 / OS는 사용중인에 따라 달라집니다. 그러나 그것은 실제로 그렇게 다르지 않습니다.
권장되는 사용 방법이기 때문에 표준 인터페이스를 사용하는 것이 좋습니다.
답변
