Как добавить больше в LocalStorage, а не перезаписывать это?

Вопрос или проблема

function saveToLocalStorage(){
    var title = document.getElementById("title1");
    var titlesaved = title.innerHTML;
    var para = document.getElementById("p1");
    var parasaved = para.innerHTML;

    localStorage.setItem("Title", titlesaved);
    localStorage.setItem("Paragraph", parasaved);    
}

function RetrieveData(){
    document.getElementById("title2").innerHTML = localStorage.getItem("Title");
    document.getElementById("paragraph2").innerHTML = localStorage.getItem("Paragraph");
}

var data = [{Title: '', Paragraph: ''}];
localStorage.setItem("items", JSON.stringify(data));

var data = JSON.parse(localStorage.getItem("items"));
data.push({Title: 'a', Paragraph: ''});
localStorage.setItem("items", JSON.stringify(data));

<input type="text" id="user" placeholder="Имя пользователя">
<input type="password" id="password" placeholder="Пароль">
<button id="button">Зарегистрироваться</button>

let number = 0;
let button = document.getElementById("button");
button.addEventListener ("click", function(){
   number++;
});
$("#button").click(function (e) { 
   e.preventDefault();
   let user = $("#user").val();
   let password = $("#password").val();

   localStorage.setItem("Username" + number, user);
   localStorage.setItem("Password" + number, password);
});

Ответ или решение

Как добавлять данные в LocalStorage, не перезаписывая их

В процессе разработки блога вы могли столкнуться с необходимостью сохранения нескольких элементов данных в LocalStorage без их перезаписи. LocalStorage предоставляет простой способ хранения данных в виде пар ключ-значение, но при добавлении новых данных важно избегать перезаписи уже существующих значений. В этом ответе мы разберем несколько эффективных подходов к решению этой задачи.

1. Сохранение данных как JSON

Использование формата JSON для хранения данных — это лучший подход, позволяющий вам эффективно управлять несколькими записями в LocalStorage. Рассмотрим шаги для реализации.

Сохранение данных:

function saveToLocalStorage() {
    var title = document.getElementById("title1").innerHTML;
    var paragraph = document.getElementById("p1").innerHTML;

    // Получение существующих данных из LocalStorage
    var data = JSON.parse(localStorage.getItem("items")) || [];

    // Добавление новых данных
    data.push({ Title: title, Paragraph: paragraph });

    // Сохранение обновленного массива данных обратно в LocalStorage
    localStorage.setItem("items", JSON.stringify(data));
}

Получение и отображение данных:

function retrieveData() {
    var data = JSON.parse(localStorage.getItem("items")) || [];
    var container = document.getElementById("dataContainer");
    container.innerHTML = ""; // Очистка контейнера перед выводом

    data.forEach(item => {
        var itemDiv = document.createElement("div");
        itemDiv.innerHTML = `<h3>${item.Title}</h3><p>${item.Paragraph}</p>`;
        container.appendChild(itemDiv);
    });
}

В этом случае мы сначала извлекаем массив из LocalStorage, добавляем в него новые записи и затем сохраняем его обратно. Это позволяет избежать перезаписи и сохранять все предыдущие записи.

2. Использование ключей с индексами

Если вы не хотите использовать JSON, вы можете также динамически генерировать ключи для LocalStorage. Например, добавляя индекс к каждому храненому элементу:

let number = localStorage.length; // Начальное значение для индекса

document.getElementById("button").addEventListener("click", function() {
    let user = document.getElementById("user").value;
    let password = document.getElementById("password").value;

    localStorage.setItem("Username" + number, user);
    localStorage.setItem("Password" + number, password);
    number++; // Увеличиваем индекс для следующей записи
});

Здесь мы используем значение number как индекс, который увеличивается с каждой записью, что позволяет нам сохранять неоднократно уникальные данные без перезаписи.

Заключение

Выбор метода хранения данных в LocalStorage зависит от ваших потребностей и структуры данных. JSON-структура позволяет удобно работать с массивами объектов, тогда как метод с индексами просто и эффективен для менее сложных случаев. Оба метода обеспечивают сохранность данных и предотвратят перезапись уже сохраненной информации.

Следуя указанным подходам, вы сможете успешно интегрировать функциональность сохранения данных в вашем блоге, улучшая пользовательский опыт и обеспечивая надежное хранение информации.