使用 JavaScript 遍歷存儲在本地存儲中的所有鍵

有多種方法可以遍歷存儲在 localStorage 中的所有鍵 使用 JavaScript 對象。

最快的方法是使用 for 循環像數組一樣遍歷所有鍵：

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

另一種方法是使用 for...in 循環遍歷 localStorage 的所有鍵 對象：

for (const key in localStorage) {
    console.log(`${key}: ${localStorage.getItem(key)}`);
}

上面的代碼片段遍歷存儲在 localStorage 中的所有鍵 ，並將它們打印在控制台上。但是，它也會輸出內置的 localStorage length 等屬性 , getItem , setItem ，等等。

要過濾掉對象原型自身的屬性，可以使用 hasOwnProperty() 方法如下圖：

for (const key in localStorage) {
    // Skip built-in properties like length, setItem, etc.
    if (localStorage.hasOwnProperty(key)) {
        console.log(`${key}: ${localStorage.getItem(key)}`);
    }
}

最後，最後一種方式是使用Object.keys() 收集 localStorage 的所有“自己”鍵的方法 , 然後使用 for...of 循環遍歷它們：

const keys = Object.keys(localStorage);
for (let key of keys) {
    console.log(`${key}: ${localStorage.getItem(key)}`);
}

看看這篇文章，了解更多關於 HTML Web 存儲 API 以及如何使用 localStorage 和 sessionStorage 在用戶瀏覽器中存儲信息的對象。