如何显示所有 localStorage 保存的变量？

您可以尝试迭代 localStorage 对象中的所有项:

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

你也可以在 Google chrome Developer 工具中查看 localStorage 的状态和数据:

我经常使用这段代码:

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

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

根据这个页面的提示，我现在使用这个:

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

Thanks all!

Console log the localStorage. It's very simple.

console.log(localStorage);

为了扩展它，下面检索 localStorage 中的所有内容。

不管条目的类型是 对象，数组还是 < em > 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 密钥丢失或损坏，则脚本不会失败。

允许用户删除所有本地配置与一个按钮或注销后自动，也是一个好主意！

我对 脚本: 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"

根据具体情况，Object.keys()和 Object.entries()函数可能会有所帮助。在他们的帮助下，很容易创建存储在 localStorage中的键数组或[ key，value ]对数组。然后您可以过滤这些数组，映射它们，轻松地迭代它们。

示例1 : 显示存储在 localStorage中的所有值的键

console.log(Object.keys(localStorage));

示例2 : 清除除选定键之外的 localStorage

const importantKeys = [ 'JSESSIONID', 'cart' ];
Object.keys(localStorage)
.filter(key => !importantKeys.includes(key))
.forEach(key => localStorage.removeItem(key));

示例3 : 迭代 localStorage键，值对

Object.entries(localStorage).forEach(([ key, value ]) => {
console.log(`${key} => ${value}`);
})