HTML5 localStorage 키 가져 오기

의 모든 키 값을 얻는 방법이 궁금합니다 localStorage.

간단한 JavaScript 루프로 값을 검색하려고했습니다.

for (var i=1; i <= localStorage.length; i++)  {
   alert(localStorage.getItem(i))
}

그러나 키가 1부터 시작하는 점진적인 숫자 인 경우에만 작동합니다.

사용 가능한 모든 데이터를 표시하려면 모든 키를 어떻게 얻습니까?

ES2017에서는 다음을 사용할 수 있습니다.

Object.entries(localStorage)

for (var key in localStorage){
   console.log(key)
}

편집 :이 답변은 많은 찬사를 받고 있으므로 일반적인 질문이라고 생각합니다. 나는 내 대답에 걸려 넘어 질지도 모르는 누군가에게 그것을 빚진 것 같은 느낌이 들었고 그것이 단지 업데이트를 받아 들여서 받아 들여 졌기 때문에 그것이 옳다고 생각한다. 진실은 위의 예가 실제로 올바른 방법 이 아니라는 것 입니다. 가장 안전하고 안전한 방법은 다음과 같습니다.

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  console.log( localStorage.getItem( localStorage.key( i ) ) );
}

나는 이것처럼 쉽게 보이는 객체를 만들고 싶다.

Object.keys(localStorage).reduce(function(obj, str) { 
    obj[str] = localStorage.getItem(str); 
    return obj
}, {});

쿠키도 마찬가지입니다.

document.cookie.split(';').reduce(function(obj, str){ 
    var s = str.split('='); 
    obj[s[0].trim()] = s[1];
    return obj;
}, {});

function listAllItems(){  
    for (i=0; i<=localStorage.length-1; i++)  
    {  
        key = localStorage.key(i);  
        alert(localStorage.getItem(key));
    }  
}

이 localStorage.key(index)함수를 사용하여 문자열 표현을 리턴 할 수 있습니다. 여기서 indexn 번째로 검색하려는 오브젝트가 있습니다.

브라우저가 HTML5 LocalStorage를 지원하는 경우 Array.prototype.map도 구현해야합니다.

Array.apply(0, new Array(localStorage.length)).map(function (o, i) {
    return localStorage.key(i);
})

질문은 키 찾기를 언급했기 때문에 모든 키와 값 쌍을 표시하기 위해 다음과 같이 할 수 있다고 언급했습니다 (Kevin의 답변을 기반으로).

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  console.log( localStorage.key( i ) + ": " + localStorage.getItem( localStorage.key( i ) ) );
}

"key : value"형식으로 데이터를 기록합니다.

(Kevin : 원하는 경우이 정보를 답변에 자유롭게 입력하십시오!)

localStorage의 모든 키와 값을 인쇄합니다.

ES6 :

for (let i=0; i< localStorage.length; i++) {
    let key = localStorage.key(i);
    let value = localStorage[key];
    console.log(`localStorage ${key}:  ${value}`);
}

다음과 같은 키와 값을 얻을 수 있습니다.

for (let [key, value] of Object.entries(localStorage)) {
  console.log(`${key}: ${value}`);
}

나는 케빈이 최선의 답변을하지만 때로는 같은 값을 가진 로컬 스토리지에 다른 키가있을 때 공개 사용자가 바구니에 항목을 몇 번 추가했는지 확인하기를 원할 때 여러 번 다음을 사용할 수도 있습니다.

var set = localStorage.setItem('key', 'value');
var element = document.getElementById('tagId');

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  element.innerHTML =  localStorage.getItem(localStorage.key(i)) + localStorage.key(i).length;
}

Object.keys(localStorage)...를 사용하는 사람들 은 Firefox에서 작동하지 않기 때문에하지 마십시오 (철 새롭게 Firefox가 사양에 충실하기 때문에). 이걸 고려하세요:

localStorage.setItem("key", "value1")
localStorage.setItem("key2", "value2")
localStorage.setItem("getItem", "value3")
localStorage.setItem("setItem", "value4")

key, getItem 및 setItem은 프로토 타입이므로 메소드 Object.keys(localStorage)는["key2"] 합니다.

다음과 같이하는 것이 가장 좋습니다 :

let t = [];
for (let i = 0; i < localStorage.length; i++) {
  t.push(localStorage.key(i));
}

이름으로도 읽을 수 있습니다.

다음과 같이 'user'라는 이름으로 값을 저장했다고 가정 해보십시오.

localStorage.setItem('user', user_Detail);

그럼 우리는 그것을 사용하여 읽을 수 있습니다

localStorage.getItem('user');

나는 그것을 사용했고 매끄럽게 작동하고 for 루프를 수행 할 필요가 없다.