How to save checkbox checked values in localstorage in react?

Question

I am trying to add checkboxes in my web application. Checkboxes are showing on the webpage. I want to save checkbox checked values in local storage, So I can keep checkboxes checked on page refresh. How can I do this?

{
  Object.keys(catagory_products).map((item, index) => {
    if (item == 'brandlist') {
      return catagory_products.brandlist.map((BrandList, index) =>
      // console.log(BrandList)
        (
          <div className="custom-control custom-checkbox ml-2">
            <input
              type="checkbox"
              className="custom-control-input checksave"
              id={`${BrandList}`}
              name="brand[]"
              value={`${BrandList}`}
              onChange={this.toggleCheckboxChange}
              autoComplete="off"
            />
            <label
              className="custom-control-label brandname"
              htmlFor={`${BrandList}`}
            >
              {BrandList}
         I  </label>
          </div>
        ),

      );
    }
  });
}

Please help me how can I do this?

Piyush Zalani · Accepted Answer · 2019-01-11 13:59:22Z

2

Please find the following code:

componentDidMount() {
  const items = {...localStorage};
  this.setState({
    items,
  })
}

toggleCheckboxChange = (e) => {
   e.preventDefault()
   if (e.target.type === 'checkbox') {
     localStorage.setItem({ [e.target.id]: e.target.checked })
   }
}

render() {
return( 
<div>
{
  Object.keys(catagory_products).map((item, index) => {
    if (item === 'brandlist') {
      return catagory_products.brandlist.map((BrandList, index) =>
      // console.log(BrandList)
        (
          <div className="custom-control custom-checkbox ml-2">
            <input
              type="checkbox"
              className="custom-control-input checksave"
              id={BrandList.id}
              name="brand[]"
              value={!!this.state[BrandList.id]}
              onChange={this.toggleCheckboxChange}
              autoComplete="off"
            />
            <label
              className="custom-control-label brandname"
              htmlFor={BrandList}
            >
              {BrandList}
         I  </label>
          </div>
        ),

      );
    }
  });
}
</div>
)}

answered Jan 11, 2019 at 13:59

Piyush Zalani

3,9641 gold badge17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Piyush Zalani Over a year ago

did you have id defined in BrandList?

Vinay Over a year ago

I am getting this error. TypeError: Failed to execute 'setItem' on 'Storage': 2 arguments required, but only 1 present

Collectives™ on Stack Overflow

How to save checkbox checked values in localstorage in react?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related