react localStorage 사용하여 데이터 로컬에 저장후 사용

localStorage로 데이터 저장하기 

 

* localStorage, sessionStorage 차이

Local storage: 영구지속 되는 컴퓨터 임시 저장공간(텍스트만저장,5 mb)

Session storage:휘발성이 있는 컴퓨터 임시 저장공간(브라우저끄면날아감,텍스트만저장,5 mb)

 

*데이터 저장시 텍스트로만 저장가능함으로 JSON.stringify  사용,

*데이터 불러올시 JSON.parse 사용

//moment패키지,metarialui,mock_data, className의 설정은 테일윈드
import React, { useState, useContext, useEffect } from "react";
import moment from "moment";
/*ui */
import ArrowBackIosOutlinedIcon from "@material-ui/icons/ArrowBackIosOutlined";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import SearchIcon from "@material-ui/icons/Search";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
/*fooddata */
import JSONDATA from "../datas/MOCK_DATA.json";

const formSubmitHandle = () => {
  console.log("submit");
};
const nowTime = moment().format("A hh:mm");
console.log(nowTime);

const Meal = ({ history }) => {
  const [searchTerm, setSearchTerm] = useState("");

  const onChangeHandle = (e) => {
    setSearchTerm(e.target.value);
  };
  const onFoodChange = (e) => {
    console.log(e.target.value);
  };
  const onFoodClick = (e) => {
    let cartFood = localStorage.getItem("watched");
    if (cartFood == null) {
      cartFood = [];
    } else {
      cartFood = JSON.parse(cartFood);
    }
    cartFood.push(e.target.value);
    cartFood = new Set(cartFood);
    cartFood = [...cartFood];
    localStorage.setItem("watched", JSON.stringify(cartFood));
  };

  return (
    <div id="morning" style={{ height: "100vh", overflow: "scroll" }}>
      <div className="morning_tit border-b-2 py-8">
        <div className="inner max-w-md mx-auto flex justify-between">
          <div
            className="back cursor-pointer"
            onClick={() => history.push("/foodreport")}
          >
            <ArrowBackIosOutlinedIcon style={{ fontSize: 25 }} />
          </div>
          <p className="font-bold text-2xl">아침식사</p>
          <div className="calander cursor-pointer">
            <MoreVertIcon
              style={{ width: 30, height: 30 }}
              onClick={() => history.push("/mealamount")}
            />
          </div>
        </div>
      </div>
      <div className="morning_request bg-gray-100 p-6">
        <p className="text-2xl">
          검색창에서 먹은 음식을 검색해서 추가해주세요.
        </p>
      </div>
      <div className="morning_search pt-6">
        <div className="inner max-w-md mx-auto">
          <form
            className="food_search mb-4 border w-full h-12 p-2 flex justify-between"
            style={{ borderRadius: "0.3rem" }}
            onSubmit={formSubmitHandle}
          >
            <input
              className="bg-transparent text-xl w-full"
              type="text"
              placeholder="음식명을 입력하세요"
              onChange={onChangeHandle}
            />
            <SearchIcon
              className="text-gray-400"
              style={{ width: 30, height: 30 }}
            />
          </form>

          {searchTerm === "" ? (
            <div className="bg-gray-100 text-center text-base py-2">
              <p>
                입력하신 검색 결과가 없습니다.
                <br />
                다시 입력해 주세요.
              </p>
            </div>
          ) : null}

          {JSONDATA.filter((val) => {
            if (searchTerm === "") {
              return null;
            } else if (
              val.name.toLowerCase().includes(searchTerm.toLowerCase())
            ) {
              return val;
            }
          }).map((val, key) => {
            return (
              <div className="foods " key={key}>
                <div className="inner flex items-center py-4 border-b">
                  <FormControlLabel
                    onChange={onFoodChange}
                    onClick={onFoodClick}
                    value={[val.name, val.unit, val.calorie]}
                    control={<Checkbox color="primary" />}
                  />
                  <div>
                    <p>{val.name}</p>
                    <p>
                      1인분({val.unit}) {val.calorie}kcal
                    </p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <button
        className="bottomBTN absolute bottom-0 w-full h-16 text-white text-2xl pointer"
        onClick={() => {
          history.push("/foodreport/morningcart");
        }}
      >
        추가 완료
      </button>
    </div>
  );
};

export default Meal;