Мне просто интересно, как получить все ключевые значения в localStorage.
Я попытался получить значения с помощью простого цикла JavaScript
for (var i=1; i <= localStorage.length; i++) {
alert(localStorage.getItem(i))
}
Но он работает только в том случае, если ключи являются прогрессивными числами, начиная с 1.
Как мне получить все ключи, чтобы отобразить все доступные данные?
в ES2017 вы можете использовать:
Object.entries(localStorage)
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 ) ) );
}
Мне нравится создавать легко видимый объект из него следующим образом.
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;
}, {});
function listAllItems(){
for (i=0; i<=localStorage.length-1; i++)
{
key = localStorage.key(i);
alert(localStorage.getItem(key));
}
}
Вы можете использовать localStorage.key(index) для возврата строкового представления, где index - это n-й объект, который вы хотите получить.
Если браузер поддерживает HTML5 LocalStorage, он также должен реализовать Array.prototype.map, что позволяет:
Array.apply(0, new Array(localStorage.length)).map(function (o, i) {
return localStorage.key(i);
})
Поскольку вопрос касался поиска ключей, я подумал, что я бы сказал, что для отображения каждой пары ключей и значений вы можете сделать это так (на основе ответа Кевина):
for ( var i = 0, len = localStorage.length; i < len; ++i ) {
console.log( localStorage.key( i ) + ": " + localStorage.getItem( localStorage.key( i ) ) );
}
Это приведет к регистрации данных в формате "ключ: значение"
(Кевин: не стесняйтесь просто взять эту информацию в свой ответ, если хотите!)
Я согласен с Кевином, что у него лучший ответ, но иногда, когда у вас есть разные ключи в локальном хранилище с такими же значениями, например, вы хотите, чтобы ваши публичные пользователи видели, сколько раз они добавляли свои предметы в свои корзины, вам нужно покажите им количество раз, а затем вы можете использовать это:
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;
}
Это напечатает все ключи и значения в localStorage:
ES6:
for (let i=0; i< localStorage.length; i++) {
let key = localStorage.key(i);
let value = localStorage[key];
console.log('localStorage ${key}: ${value}');
}
Мы также можем прочитать по имени.
Скажем, мы сохранили значение с именем 'user', как это
$localStorage.user = user_Detail;
Затем мы можем прочитать его, используя
localStorage["ngStorage-user"];
Я использовал его, и он работает плавно, не нужно делать цикл for
Для тех, кто упоминает использование 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));
}