localStorage не хранит более одного фрагмента данных - PullRequest
Новая
       0

localStorage не хранит более одного фрагмента данных

0 голосов
/ 14 ноября 2018

Я пытаюсь сохранить несколько частей данных в 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 на вкладке приложения хранится «Джонс», а «Смит» - нет. Я проверил похожие вопросы, но ни один из них не дал конкретного решения.

1 Ответ

0 голосов
/ 14 ноября 2018

Вы перезаписываете lastname каждый раз, когда вы звоните setItem, поэтому выигрывает последний (сохраняющий "Jones").

Если вы хотите сохранить более одного элемента, либо:

  1. Используйте другую клавишу (lastname1, lastname2, ...) или

  2. Сохранение строки в каком-либо формате, который можно разбирать на отдельные элементы, например, массив, который вы 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 является оператором, а не функцией. Нет необходимости в паренсе вокруг операнда.)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...