LocalStorage не хранит более одного фрагмента данных
Я пытаюсь хранить несколько фрагментов данных в localStorage. Однако хранится только один предмет, и я не могу понять, почему. Вот код
<!DOCTYPE html>
<html>
<body>
<div id = "result"></div>
<div id = "result2"></div>
<script>
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML =
localStorage.getItem("lastname");
}
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Jones");
// Retrieve
document.getElementById("result2").innerHTML =
localStorage.getItem("lastname");
}
</script>
</body>
</html>
В инструментах разработчика Chrome на вкладке приложения «Джонс» сохраняется, а «Смит» - нет. Я проверял похожие вопросы, но, похоже, ни один из них не предлагает конкретного решения.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы перезаписьlastname каждый раз, когда вызываете setItem, поэтому последний (за исключением "Jones") побеждает.
Если вы хотите сохранить более одного элемента, либо:
Используйте другой ключ (
lastname1,lastname2, ...) илиСохраните строку в каком-либо формате, который вы можете разобрать на отдельные элементы, например массив, который вы
JSON.stringifyпри хранении иJSON.parseпри загрузке
Боковое примечание: К сожалению, эта проверка typeof не подходит для определения того, можете ли вы использовать localStorage, потому что в некоторых браузерах в режиме частного просмотра typeof скажет, что он есть, но выдает ошибку при попытке что-то сохранить. Единственный способ узнать наверняка - это действительно попытаться что-то спасти:
// Once on page load
const canUseStorage = typeof localStorage !== "undefined" && (() {
const key = "_test_storage";
const now = String(Date.now());
try {
localStorage.setItem(key, now);
const flag = localStorage.getItem(key) === now;
try {
localStorage.removeItem(key);
} catch (e) {
}
return flag;
} catch (e) {
return false;
}
})();
// Then use `canUseStorage` as necessary to decide if you can use it
(Также обратите внимание, что typeof - это оператор, а не функция. Не нужно использовать скобки вокруг его операнда.)
Это хранилище ключевых значений. Если вы укажете второе значение для того же ключа, оно переопределит предыдущее. Если вы хотите сохранить несколько значений, сохраните их как запятую, разделенную одним и тем же ключом, или используйте совсем другой ключ.