如何在LocalStorage中创建固定长度对象并设为state初始值

1. 创建固定大小的索引键对象 #

要生成以索引为键的固定大小对象，直接通过循环创建最直观，也能避免多余的转换操作：

// 生成指定大小的初始对象，键为0到size-1，默认值设为空字符串（可按需修改）
const createFixedSizeRadioObj = (size) => {
  const radioObj = {};
  for (let i = 0; i < size; i++) {
    radioObj[i] = '';
  }
  return radioObj;
};

2. 从LocalStorage读取并初始化state #

初始化state时，优先读取LocalStorage中保存的对象，若不存在则使用固定大小的默认对象。如果LocalStorage中的对象结构不完整（比如之前存储的大小和当前需求不一致），可以合并默认结构来保证固定大小：

import { useState } from 'react';

// 设定需要的固定大小，这里以3为例
const DEFAULT_RADIO_GROUP_COUNT = 3;

// 生成初始state
const initialState = (() => {
  // 读取LocalStorage中保存的值
  const savedValues = JSON.parse(localStorage.getItem('radioValues'));
  // 创建默认的固定大小对象
  const defaultRadioObj = createFixedSizeRadioObj(DEFAULT_RADIO_GROUP_COUNT);
  // 合并保存值与默认值，缺失的键用默认值填充
  return { ...defaultRadioObj, ...savedValues };
})();

const RadioComponent = () => {
  const [radioValues, setRadioValues] = useState(initialState);
  
  // 处理radio选项变化
  const handleRadioChange = (index, selectedValue) => {
    const updatedValues = { ...radioValues, [index]: selectedValue };
    setRadioValues(updatedValues);
    // 同步更新到LocalStorage
    localStorage.setItem('radioValues', JSON.stringify(updatedValues));
  };
  
  // 渲染radio组
  return (
    <div>
      {Object.keys(radioValues).map((index) => (
        <div key={index} className="radio-group">
          <label>
            <input
              type="radio"
              name={`radio-group-${index}`}
              value="option1"
              checked={radioValues[index] === 'option1'}
              onChange={() => handleRadioChange(index, 'option1')}
            />
            选项1
          </label>
          <label>
            <input
              type="radio"
              name={`radio-group-${index}`}
              value="option2"
              checked={radioValues[index] === 'option2'}
              onChange={() => handleRadioChange(index, 'option2')}
            />
            选项2
          </label>
        </div>
      ))}
    </div>
  );
};

关键注意事项 #

• LocalStorage仅支持存储字符串，所以必须用JSON.stringify序列化对象，读取时用JSON.parse反序列化。
• 若要严格限制对象的键数量，可在更新时添加校验，防止意外新增超出范围的键：

const handleRadioChange = (index, selectedValue) => {
  const idx = parseInt(index);
  // 校验索引是否在合法范围内
  if (idx >= 0 && idx < DEFAULT_RADIO_GROUP_COUNT) {
    const updatedValues = { ...radioValues, [index]: selectedValue };
    setRadioValues(updatedValues);
    localStorage.setItem('radioValues', JSON.stringify(updatedValues));
  }
};

内容的提问来源于stack exchange，提问作者jenish963