web-dev-qa-db-ja.com

localStorageで保存されたすべての変数を表示するにはどうすればよいですか？

特定のページに保存されているすべてのローカルストレージ変数にアクセスしたい。それ、どうやったら出来るの？ join（）関数で配列を表示するように表示したい

javascripthtml5local-storage
52
Ariel

LocalStorageオブジェクト内のすべてのアイテムを繰り返し試すことができます。

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

このコードブロックを頻繁に使用します。

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)) + "]");
}
26
Mark

googleでlocalStorageのステータスとデータを直接確認することもできますchrome開発者ツール

12
jujule

コンソールはlocalStorageを記録します。とても簡単です。

console.log(localStorage);
8
Ananta Prasad
for(var i in localStorage) {
    console.log(i + ' = ' + localStorage[i]);
}
5
zanetu

このページからヒントを得て、今これを使用しています：

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

皆さんありがとう！

2
Brook Jordan

これを拡張するために、以下はlocalStorageのすべてを取得します。

エントリのタイプに関係なく、object、array、または単にvalue.

そして、すべてを適切に書き戻します。

save/export/restore任意の設定に便利！

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キーが見つからないか破損している場合にスクリプトが失敗しないように使用します。

ユーザーがボタンですべてのローカル設定を消去できるようにするか、ログアウト後に自動化することもできます。

1
NVRM

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"
1
Jan Papenbrock