localStorageから文字列を取得したとき""（セミコロン）で囲われてしまうときの対処法

はじめに

Reactを触りはじめて、localStorageの使い方を知りましたが、うまく文字列を扱えなかったので、備忘録として残しておきます。

やりたいこと

• ローカルストレージから文字列を取得したい
• “”で囲われていない形にしたい

エラー内容

• 以下のようになる

原因

• JSON形式で保存されているデータをそのまま使用している

import { useContext, useEffect } from "react";
import { AuthContext } from "../contexts/AuthContext";

const USER_NAME_KEY = "user-name";

export const useAuth = () => {
  const { isLoggedIn, setIsLoggedIn, userName, setUserName } =
    useContext(AuthContext);

  const login = () => {
    if (!isLoggedIn && userName) {
      setIsLoggedIn(true);
      // ここで意図的にJSON形式で保存している
      localStorage.setItem(USER_NAME_KEY, JSON.stringify(userName));
    }
  };
	.
	.
	.
  useEffect(() => {
    const loginUser = localStorage.getItem(USER_NAME_KEY);
    if (loginUser) {
    　// JSON形式のままuserNameにセットしている
      setUserName(loginUser);
      setIsLoggedIn(true);
    }
  }, []);
  .
  .
  .
 

解決策

• JSON.parse()を使ってJSONデータをパースして中身を取り出す

	.
	.
	.
  useEffect(() => {
    const loginUser = localStorage.getItem(USER_NAME_KEY);
    if (loginUser) {
    　// JSON形式をパースして文字列をuserNameにセットする
      setUserName(JSON.parse(loginUser));
      setIsLoggedIn(true);
    }
  }, []);
  .
  .
  .
 

結果

• 無事に””をなくした状態で文字列を取得できる