React – how to apply local storage for hook value

I use the react-range package for personal purposes of my project, the problem is that I cannot save the value when the page is refreshed, I tried to use the local storage but I could not

As you understand, I need to save the value using local storage, in addition, I will leave a link to mine on codesandbox 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

I think your main problem was that localStorage doesn’t store anything besides strings. You’re going to want to parseInt then check to make sure localStorage isn’t null. Can you try this and see if it works?

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

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