모든 localStorage 저장 변수를 표시하려면 어떻게해야합니까?

모든 localStorage 저장 변수를 표시하려면 어떻게해야합니까?

---

특정 페이지에 저장된 모든 localStorage 변수에 액세스하고 싶습니다. 어떻게하나요? join () 함수로 배열을 표시하는 것처럼 표시하고 싶습니다.

---

localStorage 개체의 모든 항목을 반복 해 볼 수 있습니다.

for (var i = 0; i < localStorage.length; i++){
    // do something with localStorage.getItem(localStorage.key(i));
}

---

이 코드 블록을 자주 사용합니다.

var i;

console.log("local storage");
for (i = 0; i < localStorage.length; i++)   {
    console.log(localStorage.key(i) + "=[" + localStorage.getItem(localStorage.key(i)) + "]");
}

console.log("session storage");
for (i = 0; i < sessionStorage.length; i++) {
    console.log(sessionStorage.key(i) + "=[" + sessionStorage.getItem(sessionStorage.key(i)) + "]");
}

---

Google 크롬 개발자 도구에서 바로 localStorage 상태 및 데이터를 확인할 수도 있습니다.

---

콘솔은 localStorage를 기록합니다. 아주 간단합니다.

console.log(localStorage);

---

for(var i in localStorage) {
    console.log(i + ' = ' + localStorage[i]);
}

---

이 페이지에서 힌트를 받으면 이제 다음을 사용하고 있습니다.

new Array(localStorage.length)
  .fill()
  .map(i => localStorage.key(i));

모두 감사합니다!

---

이를 확장하기 위해 다음은 localStorage의 모든 것을 검색합니다.

항목의 유형, 객체, 배열 또는 값에 관계없이 .

그리고 모두 제자리에 잘 써주세요.

주어진 구성 을 저장 / 내보내기 / 복원 하는 데 유용합니다 !

function getLocalItems(k){
  if (k){
    try{
      return JSON.parse(localStorage.getItem(k))
     } catch(e){
       return localStorage.getItem(k)
    }
  }
}

function setLocalItems(k, value){
  if (typeof value === 'object') {
    value = JSON.stringify(value)
  }
  localStorage.setItem(k, value)
}

// Put all entries in an object «store»
let store = {}
for (let i = 0, l = localStorage.length; i < l; i++) {
  store[localStorage.key(i)] = getLocalItems(localStorage.key(i))
}
console.log(store)

// Write all keys of «store» in localStorage
for (let o in store) {
  setLocalItems(o, store[o])
}

그런 다음 로그인 후 백업 / 복원을 위해이«store»개체를 서버로 보낼 수 있습니다.

실험 후 localStorage를 많이 사용하는 경우 스크립트에서이«store»객체를 사용하는 것이 좋습니다. 이렇게하면 디스크에 하드 쓰기가 없기 때문에 더 빠른 I / O 액세스를 위해 모든 값이 메모리에 유지됩니다.

어느 쪽이든 localStorage는 매우 강력하므로 복잡한 작업을 수행 할 수 있습니다. localStorage 키가 없거나 손상된 경우 스크립트가 실패하지 않는 방식으로 사용하십시오.

사용자가 버튼으로 또는 로그 아웃 후 자동으로 모든 로컬 구성을 지울 수 있도록하는 것도 좋은 생각입니다!

---

Cryptopat 의 스크립트를 복사 + 붙여 넣기 준비가되도록 수정하고 localStorage와 sessionStorage 모두에서 작업합니다. 이것은 다른 시스템에서 전체 스토리지를 1 : 1로 재현하는 데 편리합니다.

Chrome 74.0.3729.131에서 테스트되었습니다.

function dump(storage) {
    let store = []
    for (let i = 0, l = storage.length; i < l; i++) {
        let key = storage.key(i);
        store.push({ key: key, value: storage.getItem(key) });
    }
    console.log(JSON.stringify(store))
}

function restore(storage, store, clearBefore) {
    if (clearBefore) {
        storage.clear();
    }

    for (let i = 0, l = store.length; i < l; i++) {
        let item = store[i];
        storage.setItem(item.key, item.value);
    }
}

// usage:
// 
// dump(localStorage); // manual step: copy log output to text file
// dump(sessionStorage);
//
// let contentsFromTextFile = [ ... ]; // manual step: paste from text file
// restore(localStorage, contentsFromTextFile, true);
// restore(sessionStorage, contentsFromTextFile, true);
//
//
// EXAMPLE
// -------
// Given localStorage has one entry with key "foo" and value "bar"
// And I pasted the above code into the console
//
// When I run
//    dump(localStorage)
// Then I see the log output
//    [{"key":"foo","value":"bar"}]
//
// When I run
//    restore(localStorage, [{"key":"foo2","value":"bar2"}], true);
// Then localStorage contains only one entry with key "foo2" and value "bar2"
//
// When I run
//    restore(localStorage, [{"key":"foo3","value":"bar3"}], false);
// Then localStorage contains two entries,
//   one entry with key "foo2" and value "bar2" and
//   one entry with key "foo3" and value "bar3"

ReferenceURL : https://stackoverflow.com/questions/5410820/how-can-i-show-all-the-localstorage-saved-variables