使用localStorage存储复选框值的方法如下:
import React, { useState, useEffect } from 'react';
const [checkedValues, setCheckedValues] = useState([]);
useEffect(() => {
const storedValues = localStorage.getItem('checkboxValues');
if (storedValues) {
setCheckedValues(JSON.parse(storedValues));
}
}, []);
const handleCheckboxChange = (e) => {
const value = e.target.value;
const isChecked = e.target.checked;
if (isChecked) {
// 添加选中的值
setCheckedValues((prevValues) => [...prevValues, value]);
} else {
// 移除取消选中的值
setCheckedValues((prevValues) =>
prevValues.filter((val) => val !== value)
);
}
};
useEffect(() => {
localStorage.setItem('checkboxValues', JSON.stringify(checkedValues));
}, [checkedValues]);
return (
<div>
<label>
<input
type="checkbox"
value="value1"
checked={checkedValues.includes('value1')}
onChange={handleCheckboxChange}
/>
Option 1
</label>
<label>
<input
type="checkbox"
value="value2"
checked={checkedValues.includes('value2')}
onChange={handleCheckboxChange}
/>
Option 2
</label>
</div>
);
这样,复选框的值将会被存储在localStorage中,并且在页面刷新后能够保持选中状态。
腾讯云相关产品:无特定推荐,可自行参考腾讯云文档进行选择使用。
领取专属 10元无门槛券
手把手带您无忧上云