Javascript - флажок и локальное хранилище. Если есть совпадающие значения, установите флажок - PullRequest
Новая
       20

Javascript - флажок и локальное хранилище. Если есть совпадающие значения, установите флажок

1 голос
/ 02 августа 2020

У меня есть форма, которая при отправке помещает отмеченные поля в localStorage.

При возврате или обновлении sh я хотел бы, чтобы проверялись поля, в которых есть совпадающие значения с localStorage. У меня есть условное обозначение в моем Javascript ниже, где находятся мои комментарии. Это правильное условие для этого?

Также, если есть лучшие способы сделать это, поделитесь, пожалуйста. На самом деле я собираюсь сделать это с помощью React и Redux Thunk. Но просто хотел попробовать с ванилью JS.

HTML

<form onsubmit='setStorage()'>
  <input type='checkbox' value='toy'/> Toy
  <input type='checkbox' value='bag'/> Bag
  <input type='checkbox' value='cup'/> Cup
  <input type='submit' value='Submit'>
</form>

<ul class='cart'>

</ul>

Javascript

const storage = JSON.parse(localStorage.getItem('cart'));

const inputs = document.querySelectorAll('input');

const checkInputs = () => {
  inputs.forEach((input) => {
    // check if localStorage has matching values with existing input values.
    const exist = storage.find((item) => item.name === input.value);

    // if exist returns true, then check that input box, otherwise leave box unchecked;
    exist ? input.checked === true : input.checked === false;
  })
}

const setStorage = () => {
  const updatedStorage = [];
  inputs.forEach((input) => {
    input.checked ? updatedStorage.push({name: input.value}) : null;
  })
  localStorage.setItem('cart', JSON.stringify(updatedStorage));
}

const setCart = () => {
  const cart = document.querySelector('.cart');

  storage.forEach((item) => {
    const li = document.createElement('li');
    const name = document.createElement('p');
    name.innerText = item.name;
    
    cart.append(li);
    li.append(name);    
  })

}

checkInputs();
setCart();

Ответы [ 2 ]

1 голос
/ 02 августа 2020

Вам просто нужно изменить эту строку, вы вместо сравнения назначаете. 

exist ? input.checked = true : input.checked = false;

const checkInputs = () => {
  inputs.forEach((input) => {
    // check if localStorage has matching values with existing input values.
    const exist = storage.find((item) => item.name === input.value);
    console.log(exist)
    // if exist returns true, then check that input box, otherwise leave box unchecked;
    exist ? input.checked = true : input.checked = false;
  })
}
1 голос
/ 02 августа 2020

Вы должны установить значение по умолчанию (пустой массив) для storage, если ни один элемент не сохранен. 

const storage = JSON.parse(localStorage.getItem('cart')) || [];

Затем измените checkInputs на 

const checkInputs = () => {
    inputs.forEach((input) => {
        // check input if name in storage
        input.checked = storage.some((item) => item.name === input.value);
    })
}

Я использую метод some, чтобы проверить, находится ли имя в хранилище.

...