Vòng qua localStorage trong HTML5 và JavaScript

Vì vậy, tôi đã nghĩ rằng mình có thể lặp qua localStorage như một đối tượng bình thường vì nó có chiều dài. Làm thế nào tôi có thể lặp lại điều này?

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

Nếu tôi làm một, localStorage.lengthnó trả về 3là chính xác. Vì vậy, tôi giả sử một for...invòng lặp sẽ hoạt động.

Tôi đã nghĩ một cái gì đó như:

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

Nhưng vô ích. Bất kỳ ý tưởng?

Ý tưởng khác mà tôi có là một cái gì đó giống như

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

Trong đó for...incông việc.

Bạn có thể sử dụng keyphương pháp này. localStorage.key(index)trả về indexkhóa thứ (thứ tự được xác định bởi việc triển khai nhưng không đổi cho đến khi bạn thêm hoặc xóa khóa).

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

Nếu thứ tự quan trọng, bạn có thể lưu trữ một mảng được tuần tự hóa JSON:

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

Thông số kỹ thuật dự thảo tuyên bố rằng bất kỳ đối tượng nào hỗ trợ bản sao có cấu trúc đều có thể là một giá trị. Nhưng điều này dường như chưa được hỗ trợ.

CHỈNH SỬA: Để tải mảng, hãy thêm vào nó, sau đó lưu trữ:

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

Cách đơn giản nhất là:

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

Ngoài tất cả các câu trả lời khác, bạn có thể sử dụng $ .each chức năng từ thư viện jQuery:

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

  // key magic
  // value magic

});

Cuối cùng, lấy đối tượng với:

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

Điều này phù hợp với tôi trong Chrome:

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

Dựa trên câu trả lời trước ở đây là một hàm sẽ lặp qua bộ lưu trữ cục bộ bằng khóa mà không cần biết các giá trị khóa.

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

Nếu bạn kiểm tra đầu ra bảng điều khiển, bạn sẽ thấy các mục được mã của bạn thêm vào tất cả đều có một chuỗi kiểu. Trong khi các mục tích hợp là hàm {[mã gốc]} hoặc trong trường hợp thuộc tính độ dài là một số. Bạn có thể sử dụng biến typeofKey để lọc ngay trên các chuỗi để chỉ các mục của bạn được hiển thị.

Lưu ý rằng điều này hoạt động ngay cả khi bạn lưu trữ một số hoặc boolean dưới dạng giá trị vì cả hai đều được lưu trữ dưới dạng chuỗi.

Tất cả các câu trả lời này đều bỏ qua sự khác biệt giữa việc triển khai localStorage trên các trình duyệt. Các cộng tác viên trong miền này phải đủ điều kiện phản hồi của họ với nền tảng mà họ đang mô tả. Một triển khai trên toàn trình duyệt được ghi lại tại https://developer.mozilla.org/en/docs/Web/API/Window/localStorage và mặc dù rất mạnh mẽ nhưng chỉ chứa một vài phương pháp cốt lõi. Lặp qua các nội dung yêu cầu hiểu biết về việc triển khai cụ thể cho các trình duyệt riêng lẻ.

localStoragelà một Object.

Chúng ta có thể lặp qua nó với JavaScript for / in Statement giống như bất kỳ Object nào khác.

Và chúng tôi sẽ sử dụng .getItem()để truy cập giá trị của mỗi khóa (x).

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