在 HTML5 和 JavaScript 中循環遍歷 localStorage

Question

所以，我想我可以像普通對象一樣循環遍歷 localStorage，因為它有長度。 我怎樣才能遍歷這個？

localStorage.setItem(1,'Lorem');
localStorage.setItem(2,'Ipsum');
localStorage.setItem(3,'Dolor');

如果我做一個localStorage.length它返回3這是正確的。 所以我假設for...in循環會起作用。

我在想這樣的事情：

for (x in localStorage){
    console.log(localStorage[x]);
}

但無濟於事。 有任何想法嗎？

我的另一個想法是

localStorage.setItem(1,'Lorem|Ipsum|Dolor')
var split_list = localStorage.getItem(1).split('|');

其中for...in確實有效。

Answer 1

您可以使用key方法。 localStorage.key(index)返回第index個鍵（順序是實現定義的，但在您添加或刪除鍵之前保持不變）。

for (var i = 0; i < localStorage.length; i++){
    $('body').append(localStorage.getItem(localStorage.key(i)));
}

如果順序很重要，您可以存儲一個 JSON 序列化數組：

localStorage.setItem("words", JSON.stringify(["Lorem", "Ipsum", "Dolor"]));

規范草案聲稱任何支持結構化克隆的對象都可以是一個值。 但這似乎尚未得到支持。

編輯：要加載數組，添加到它，然后存儲：

var words = JSON.parse(localStorage.getItem("words"));
words.push("hello");
localStorage.setItem("words", JSON.stringify(words));

Answer 2

最簡單的方法是：

Object.keys(localStorage).forEach(function(key){
   console.log(localStorage.getItem(key));
});

Answer 3

除了所有其他答案之外，您還可以使用 jQuery 庫中的$.each函數：

$.each(localStorage, function(key, value){

  // key magic
  // value magic

});

最后，使用以下命令獲取對象：

JSON .parse(localStorage.getItem(localStorage.key(key)));

Answer 4

這在 Chrome 中對我有用：

for(var key in localStorage) {
  $('body').append(localStorage.getItem(key));
}

Answer 5

建立在前面的答案的基礎上是一個函數，它將在不知道鍵值的情況下通過鍵循環遍歷本地存儲。

function showItemsByKey() {
   var typeofKey = null;
   for (var key in localStorage) {
       typeofKey = (typeof localStorage[key]);
       console.log(key, typeofKey);
   }
}

如果您檢查控制台輸出，您將看到代碼添加的項目都有一個 typeof 字符串。 而內置項目要么是函數 { [native code] }，要么是長度屬性的數字。 您可以使用 typeofKey 變量僅對字符串進行過濾，以便僅顯示您的項目。

請注意，即使您將數字或布爾值存儲為值，這也有效，因為它們都存儲為字符串。

Answer 6

localStorage是一個Object 。

我們可以像任何其他對象一樣使用JavaScript for/in Statement循環遍歷它。

我們將使用.getItem()來訪問每個鍵 (x) 的值。

for (x in localStorage){
    console.log(localStorage.getItem(x));
}

Answer 7

所有這些答案都忽略了跨瀏覽器的 localStorage 實現之間的差異。 這個領域的貢獻者應該用他們所描述的平台來充分限定他們的回答。 https://developer.mozilla.org/en/docs/Web/API/Window/localStorage記錄了一種瀏覽器范圍的實現，雖然非常強大，但僅包含一些核心方法。 循環瀏覽內容需要了解特定於各個瀏覽器的實現。

Answer 8

localStorage 將數據保存為鍵值對，並且可以通過函數 localStorage.getItem(key) 訪問這些值，該函數以鍵為參數並返回具有給定鍵的鍵值對的值。

localStorage 的鍵值對可以通過函數 localStorage.setItem(key, value) 設置。

如果您想遍歷 localStorage，您可以使用數字作為鍵。

localStorage.setItem(localStorage.length, value);

使用上面的這條指令，您將一個帶有升序鍵的值附加到 localStorage，因為每次調用都會增加 localStorage 的長度。

現在可以使用以下 for 循環來迭代 localStorage。

for (let i = 0; i < localStorage.length; i++){
  console.log(localStorage.getItem(i));
} 

使用“let”還是“var”來聲明變量並不重要。 兩者的區別在於范圍。 如果您想更多地了解 let 和 var 之間的區別，我會建議您通過 tutorialspoint ( https://www.tutorialspoint.com/difference-between-var-and-let-in-javascript ) 進行解釋。

Answer 9

for (const [key, value] of Object.entries(localStorage)) {
   console.log(key, value);
}

這里我們分別循環遍歷本地存儲中的每個鍵和值。