HTML5 로컬 저장소 키 가져오기

HTML5 로컬 저장소 키 가져오기

어떻게 모든 핵심 가치를 얻을 수 있는지 궁금할 뿐입니다.localStorage.

---

간단한 JavaScript 루프로 값을 검색해 보았습니다.

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

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

---

사용 가능한 모든 데이터를 표시하기 위해 모든 키를 가져오려면 어떻게 해야 합니까?

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

EDIT: 이 답변은 많은 지지를 받고 있기 때문에 일반적인 질문이라고 생각합니다.저는 제 대답을 우연히 발견할 수도 있고, 단지 업데이트를 하는 것이 받아들여졌다고 해서 그것이 "옳다"고 생각할 수도 있는 사람에게 빚진 것 같습니다.사실은, 위의 예는 이것을 하는 올바른 방법이 아닙니다.가장 좋고 안전한 방법은 다음과 같습니다.

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

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

Object.entries(localStorage)

저는 이렇게 쉽게 볼 수 있는 물체를 만들고 싶습니다.

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; i++)  
    {  
        key = localStorage.key(i);  
        alert(localStorage.getItem(key));
    }  
}

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

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

사용할 수 있습니다.localStorage.key(index)문자열 표현을 반환하는 함수, 여기서index검색하려는 개체의 수가 다음입니다.

브라우저가 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" 형식으로 기록됩니다.

(케빈: 원한다면 이 정보를 자유롭게 답변에 포함시키세요!)

로컬 저장소 키를 찾으려고 검색하는 사용자에게...

답은 간단하게 다음과 같습니다.

Object.keys(localStorage);

케빈의 말에 동의합니다. 하지만 로컬 스토리지에 동일한 값을 가진 서로 다른 키가 있는 경우(예: 공용 사용자가 자신의 항목을 바구니에 추가한 횟수를 확인해야 하는 경우) 다음과 같은 이유가 있습니다.

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

localStorage의 모든 키와 값이 인쇄됩니다.

ES6:

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

다음을 사용하여 개체를 더욱 쉽게 만들 수 있습니다.Object.assign:

// returns an object of all keys/values in localStorage
Object.assign({}, window.localStorage);

MDN에서 자세한 내용을 보실 수 있습니다.

캐니유즈 페이지에 따르면 현재 전체 브라우저 점유율의 약 95%가 지원됩니다(IE가 유일하게 지원되는 것은 정말 놀라운 일입니다).

jQuery 솔루션을 찾는 사용자를 위해 간단한 예를 들어 보겠습니다.

$.each(localStorage, function(key, str){
  console.log(key + ": " + str);
});

사용을 언급하는 사람들을 위해Object.keys(localStorage)파이어폭스에서 작동하지 않기 때문에 하지 마십시오(아이러니하게도 파이어폭스는 사양에 충실하기 때문입니다).고려 사항:

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

키, getItem 및 setItem은 프로토타입 방식이기 때문입니다.Object.keys(localStorage)만 됩니다.["key2"].

다음과 같은 작업을 수행하는 것이 가장 좋습니다.

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

냥입 력그를 입력하세요.localStorage개발자 콘솔에 연결합니다.로컬 스토리지 키를 올바르게 포맷하여 기록합니다.답일 때가 있어요 :) ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ

언급URL : https://stackoverflow.com/questions/8419354/get-html5-localstorage-keys