React - 如何为挂钩值应用本地存储

Question

我将react-range包用于我项目的个人用途，问题是刷新页面时我无法保存值，我尝试使用本地存储但我不能

如您所知，我需要使用本地存储来保存该值，此外，我将在codesandbox link

上留下一个link来挖掘

SideBarBlurChange.jsx

import React, {useEffect, useState} from "react";
import {getTrackBackground, Range} from "react-range";

const STEP = 0.1;
const MIN = 0;
const MAX = 100;

export default function SideBarBlurChange(props) {

    const [values, SetValues] = useState([20])

    const SaveChanges = () => {
        alert(values)
    }

        return (
            <>
                <div
                    style={{
                        display: "flex",
                        justifyContent: "center",
                        flexWrap: "wrap",
                    }}
                >
                    <Range
                        values={values}
                        step={STEP}
                        min={MIN}
                        max={MAX}
                        onChange={(values) => SetValues(values)}
                        renderTrack={({ props, children }) => (
                            <div
                                onMouseDown={props.onMouseDown}
                                onTouchStart={props.onTouchStart}
                                style={{
                                    ...props.style,
                                    height: "36px",
                                    display: "flex",
                                    width: "100%"
                                }}
                            >
                                <div
                                    ref={props.ref}
                                    style={{
                                        height: "5px",
                                        width: "100%",
                                        borderRadius: "4px",
                                        background: getTrackBackground({
                                            values: values,
                                            colors: ["#548BF4", "#ccc"],
                                            min: MIN,
                                            max: MAX
                                        }),
                                        alignSelf: "center"
                                    }}
                                >
                                    {children}
                                </div>
                            </div>
                        )}
                        renderThumb={({ props, isDragged }) => (
                            <div
                                {...props}
                                style={{
                                    ...props.style,
                                    height: "42px",
                                    width: "42px",
                                    borderRadius: "4px",
                                    backgroundColor: "#FFF",
                                    display: "flex",
                                    justifyContent: "center",
                                    alignItems: "center",
                                    boxShadow: "0px 2px 6px #AAA"
                                }}
                            >
                                <div
                                    style={{
                                        height: "16px",
                                        width: "5px",
                                        backgroundColor: isDragged ? "#548BF4" : "#CCC"
                                    }}
                                />
                            </div>
                        )}
                    />
                    <output style={{ marginTop: "30px" }} id="output">
                        {values[0].toFixed(1)}
                    </output>

                    <button onClick={() => SaveChanges()}>Save</button>
                </div>
            </>
        );
}

Answer 1

我认为您的主要问题是 localStorage 除了字符串之外不存储任何内容。您将要 parseInt 然后检查以确保 localStorage 不为空。你能试试看它是否有效吗？

  const ls = parseInt(window.localStorage.getItem('values'));
  const [values, SetValues] = useState(ls ? [ls] : [20]);

  const SaveChanges = () => {
      alert(values);
      localStorage.setItem('values', values);
  }