面试题：Solid.js中如何实现响应式状态与本地持久化存储的结合

Question

在Solid.js项目里，假设我们有一个简单的计数器状态，每次计数变化后，需要将其值存储到本地存储（localStorage）中，以便页面刷新后能恢复到之前的计数状态。请描述实现此功能的基本步骤，并给出关键代码示例。

Answer 1

基本步骤

1. 初始化计数器状态：在Solid.js中使用createSignal创建计数器状态。
2. 读取本地存储数据：在组件加载时，从localStorage读取之前存储的计数器值，并初始化计数器状态。
3. 更新本地存储：当计数器状态发生变化时，将新的值存储到localStorage中。

关键代码示例

import { createSignal, onMount } from 'solid-js';

const Counter = () => {
  // 创建计数器状态和更新函数
  const [count, setCount] = createSignal(0);

  // 组件挂载时，从localStorage读取数据并初始化count
  onMount(() => {
    const storedCount = localStorage.getItem('counter');
    if (storedCount) {
      setCount(parseInt(storedCount, 10));
    }
  });

  // 当count变化时，更新localStorage
  const updateLocalStorage = () => {
    localStorage.setItem('counter', count().toString());
  };

  // 增加计数并更新localStorage
  const increment = () => {
    setCount(count() + 1);
    updateLocalStorage();
  };

  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;