[javascript] HTML5 및 JavaScript에서 localStorage를 통해 반복

Question 1

그래서 길이가 있기 때문에 일반 객체처럼 localStorage를 반복 할 수 있다고 생각했습니다. 이것을 어떻게 반복 할 수 있습니까?

localStorage.setItem(1,'Lorem');
localStorage.setItem(2,'Ipsum');
localStorage.setItem(3,'Dolor');

내가 할 경우 올바른 localStorage.length반환 3합니다. 그래서 for...in루프가 작동 한다고 가정합니다 .

나는 다음과 같이 생각하고 있었다.

for (x in localStorage){
    console.log(localStorage[x]);
}

그러나 소용이 없습니다. 어떤 아이디어?

내가 가진 다른 생각은

localStorage.setItem(1,'Lorem|Ipsum|Dolor')
var split_list = localStorage.getItem(1).split('|');

어떤에서이 for...in작업을 수행합니다.

Question 2

key방법을 사용할 수 있습니다 . th 키를 localStorage.key(index)반환합니다 index(순서는 구현에 따라 정의되지만 키를 추가하거나 제거 할 때까지 일정 함).

for (var i = 0; i < localStorage.length; i++){
    $('body').append(localStorage.getItem(localStorage.key(i)));
}

순서가 중요한 경우 JSON 직렬 배열을 저장할 수 있습니다.

localStorage.setItem("words", JSON.stringify(["Lorem", "Ipsum", "Dolor"]));

초안 사양에서는 구조화 된 복제 를 지원하는 모든 개체가 값이 될 수 있다고 주장합니다 . 그러나 이것은 아직 지원되지 않는 것 같습니다.

편집 : 배열을로드하려면 배열에 추가 한 다음 저장합니다.

var words = JSON.parse(localStorage.getItem("words"));
words.push("hello");
localStorage.setItem("words", JSON.stringify(words));

Question 3

가장 간단한 방법은 다음과 같습니다.

Object.keys(localStorage).forEach(function(key){
   console.log(localStorage.getItem(key));
});

Question 4

다른 모든 답변 외에도 jQuery 라이브러리에서 $ .each 함수 를 사용할 수 있습니다 .

$.each(localStorage, function(key, value){

  // key magic
  // value magic

});

결국 다음과 같이 개체를 가져옵니다.

JSON .parse (localStorage.getItem (localStorage.key (key)));

Question 5

이것은 Chrome에서 나를 위해 작동합니다.

for(var key in localStorage) {
  $('body').append(localStorage.getItem(key));
}

Question 6

이전 답변을 바탕으로 키 값을 모르고 키별로 로컬 저장소를 반복하는 기능이 있습니다.

function showItemsByKey() {
   var typeofKey = null;
   for (var key in localStorage) {
       typeofKey = (typeof localStorage[key]);
       console.log(key, typeofKey);
   }
}

콘솔 출력을 살펴보면 코드에 의해 추가 된 항목에 모두 typeof 문자열이있는 것을 볼 수 있습니다. 내장 항목은 함수 {[native code]}이거나 길이 속성의 경우 숫자입니다. typeofKey 변수를 사용하여 문자열 만 필터링하여 항목 만 표시 할 수 있습니다.

숫자 또는 부울 값을 모두 문자열로 저장하기 때문에 값으로 저장하더라도 작동합니다.

Question 7

이 모든 답변은 브라우저 간 localStorage 구현 간의 차이점을 무시합니다. 이 도메인의 기여자는 설명하고있는 플랫폼에 대한 응답을 엄격하게 한정해야합니다. 하나의 브라우저 전체 구현은 https://developer.mozilla.org/en/docs/Web/API/Window/localStorage에 문서화되어
있으며 매우 강력하지만 몇 가지 핵심 메서드 만 포함합니다. 내용을 반복하려면 개별 브라우저에 특정한 구현을 이해해야합니다.

Question 8

localStorage입니다 Object.

다른 객체와 마찬가지로 JavaScript for / in Statement로 반복 할 수 있습니다 .

그리고 .getItem()각 키 (x)의 값에 액세스하는 데 사용 합니다.

for (x in localStorage){
    console.log(localStorage.getItem(x));
}