Получить ключи HTML5 localStorage

Question

Мне просто интересно, как получить все значения ключей в localStorage.

---

Я пытался получить значения с помощью простого цикла JavaScript

for (var i=1; i <= localStorage.length; i++)  {
   alert(localStorage.getItem(i))
}

Ноон работает только в том случае, если ключи являются прогрессивными числами, начиная с 1.

---

Как получить все ключи, чтобы отобразить все доступные данные?

Answer 1

for (var key in localStorage){
   console.log(key)
}

РЕДАКТИРОВАТЬ: этот ответ вызывает много голосов, поэтому я думаю, что это общий вопрос. Я чувствую, что обязан всем тем, кто может наткнуться на мой ответ и подумать, что это «правильно» только потому, что было принято сделать обновление. Правда в том, что приведенный выше пример на самом деле не правильный способ сделать это. Лучший и самый безопасный способ - сделать это так:

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  console.log( localStorage.getItem( localStorage.key( i ) ) );
}

Answer 2

Мне нравится создавать из этого легко видимый объект, как этот.

Object.keys(localStorage).reduce(function(obj, str) { 
    obj[str] = localStorage.getItem(str); 
    return obj
}, {});

Я делаю то же самое с печеньем.

document.cookie.split(';').reduce(function(obj, str){ 
    var s = str.split('='); 
    obj[s[0].trim()] = s[1];
    return obj;
}, {});

Answer 3

function listAllItems(){  
    for (i=0; i<=localStorage.length-1; i++)  
    {  
        key = localStorage.key(i);  
        alert(localStorage.getItem(key));
    }  
}

Answer 4

Вы можете использовать функцию localStorage.key(index) для возврата строкового представления, где index - это n-й объект, который вы хотите получить.

Answer 5

Если браузер поддерживает HTML5 LocalStorage, он также должен реализовать Array.prototype.map, включив это:

Array.apply(0, new Array(localStorage.length)).map(function (o, i) {
    return localStorage.key(i);
})

Answer 6

Поскольку вопрос касается поиска ключей, я решил упомянуть, что для отображения каждой пары ключ-значение вы можете сделать это следующим образом (основываясь на ответе Кевина):зарегистрируйте данные в формате «ключ: значение»

(Кевин: не стесняйтесь просто вводить эту информацию в свой ответ, если хотите!)

Answer 7

в ES2017 вы можете использовать:

Object.entries(localStorage)

Answer 8

Для тех, кто упоминает об использовании Object.keys(localStorage) ... не, потому что он не будет работать в Firefox (как ни странно, потому что Firefox верен спецификации).Учтите это:

localStorage.setItem("key", "value1")
localStorage.setItem("key2", "value2")
localStorage.setItem("getItem", "value3")
localStorage.setItem("setItem", "value4")

Поскольку key, getItem и setItem являются методами-прототипами Object.keys(localStorage) будет возвращать только ["key2"].

Лучше всего сделать что-то вроде этого:

let t = [];
for (let i = 0; i < localStorage.length; i++) {
  t.push(localStorage.key(i));
}

Answer 9

Мы также можем читать по имени.

Скажем, мы сохранили значение с именем 'user', как это

$localStorage.user = user_Detail;

Затем мы можем прочитать его, используя

localStorage["ngStorage-user"];

Я использовал его, и он работает плавно, не нужно делать цикл for

Answer 10

Я согласен с Кевином, у него лучший ответ, но иногда, когда у вас есть разные ключи в вашем локальном хранилище с одинаковыми значениями, например, вы хотите, чтобы ваши публичные пользователи видели, сколько раз они добавляли свои товары в свои корзины, что вам нужнопокажите им количество раз, тогда вы можете использовать это:

var set = localStorage.setItem('key', 'value');
var element = document.getElementById('tagId');

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  element.innerHTML =  localStorage.getItem(localStorage.key(i)) + localStorage.key(i).length;
}