Локальное хранилище HTML5 - могу ли я хранить более одного значения для каждого ключа, если нет, то какую альтернативу я могу использовать?

#javascript #html #local-storage

#javascript #HTML #локальное хранилище

Вопрос:

У меня есть страница, где находится форма, которую пользователь может отправлять через нее несколько раз, я хочу сохранить каждое значение, отправленное в одном ключе локального хранилища, но проблема в том, что ключ может хранить только одно значение и перезаписывается следующим значением

Есть ли какая-либо альтернатива?

1. Почему вы не хотите использовать несколько ключей?

2. Как я могу создать ключ для каждого отправленного значения? как я могу назвать каждый из них? например, пользователь отправляет значение, затем оно присваивается ключу1, а затем снова отправляет другое значение через форму, и оно присваивается ключу2 . Но не станет ли это утомительным, если пользователь отправит 50 раз, и у нас будет 50 разных ключей?

3. Вы могли бы назвать ключи после input name="" атрибутов вашей формы.

4. Можно хранить целые объекты и массивы в одном ключе, используя JSON.stringify() и JSON.parse() при их извлечении

5.@Yoda Объекты JavaScript являются расширяемыми (т. Е. Вы можете добавлять и удалять к ним свойства) — в части 2 моего ответа вы можете видеть, что код добавляет field5 к formState объекту.

Ответ №1:

Есть ли какая-либо альтернатива?

ДА. Используйте объект JSON, который вы десериализуете редактируете повторно сериализуете.

Вот так:

 // 1: Initial save:

const formState = {
    field1: document.getElementById( 'input1' ).value,
    field2: document.getElementById( 'input2' ).value,
    field3: document.getElementById( 'input3' ).value,
    field4: document.getElementById( 'input4' ).value
};

window.localStorage.setItem( "formState", JSON.stringify( formState ) );

( const Ключевое слово означает, что ссылка на объект не может быть переназначена, это не означает, что formState она неизменяема)

Чтобы добавить новое значение к объекту, просто установите его (значения JavaScript object концептуально совпадают с хэш-таблицей / словарем):

 const formState = JSON.parse( window.localStorage.getItem( "formState" ) );

formState.field5 = document.getElementById( 'input5' ).value;

window.localStorage.setItem( "formState", JSON.stringify( formState ) );

Чтобы удалить запись из formState объекта, используйте delete ключевое слово:

 const formState = JSON.parse( window.localStorage.getItem( "formState" ) );

delete formState.field3; // This removes 'field3' completely.

window.localStorage.setItem( "formState", JSON.stringify( formState ) );

Вы также можете быстро сбросить все <form> в объект, например:

 // WARNING: This code is a quick-and-dirty demonstration, it is not production-quality. You'll need to sort-out handling of multiple-select <select> elements and other types of <input>, like file inputs.

const formState = {};

const form = document.getElementById( 'myForm' );

const inputs = form .querySelectorAll( 'input[name], select[name], textarea[name]' );

for( const input of inputs ) {
    let shouldInclude = true;
    if( input.tagName == 'INPUT' amp;amp; ( input.type == 'radio' || input.type == 'checkbox') ) {
        if( input.checked === false ) shouldInclude = false;
    }

    if( shouldInclude ) formState[ input.name ] = input.value;
}