230608 TIL - 로컬 스토리지와 JSON과 unexpected token

오늘 발생했던 에러

unexpected token 'c' in JSON....

에러가 발생한 위치조차 엉뚱한 곳을 가르킴

 

- 에러 원인 

로컬 스토리지에 저장한 댓글 수정 기능 작성 중

const obj = {
            id: localStorage.getItem('id'),
            cmt: $txt.value,
            movieId: idParams,
            cmtKey: priKey
};

localStorage.setItem(priKey, JSON.stringify(obj));
// JSON.stringify(): 객체 obj 를 string 타입으로 저장함


// 로컬 스토리지에서 확인했을때는 다음과 같다.

// key: 3
// value: {"id":"testID","cmt":"test3","movieId":238,"cmtKey":3}

// 객체의 형태이지만 string 타입이다.

// 그리고 데이터를 불러올 때는
// (함수와 반복문 생략)
const id = JSON.parse(localStorage.getItem(item))['id'];
const cmt = JSON.parse(localStorage.getItem(item))['cmt'];
const movieId = JSON.parse(localStorage.getItem(item))['movieId'];
const cmtKey = JSON.parse(localStorage.getItem(item))['cmtKey'];

//JSON.parse: string 타입으로 로컬 스토리지에 저장했던 데이터를 객체 타입으로 변환하여 사용함

이러한 내용이었고,

 

수정 테스트를 위해 아래와 같이 '수정하고자 하는 텍스트' string 데이터를 바로 덮어씌워줬더니

기존에 저장된 {"id":"testID","cmt":"test3","movieId":238,"cmtKey":3} 가

'수정하고자 하는 텍스트.'로 바뀌며 unexpected 에러 발생

const crtTxt = '수정하고자 하는 텍스트.'

localStorage.setItem((key), crtTxt)

// 에러 발생!

 

const id = JSON.parse(localStorage.getItem(item))['id'];
const cmt = JSON.parse(localStorage.getItem(item))['cmt'];
const movieId = JSON.parse(localStorage.getItem(item))['movieId'];
const cmtKey = JSON.parse(localStorage.getItem(item))['cmtKey'];

위 부분에서 string {"id":"testID","cmt":"test3","movieId":238,"cmtKey":3}을

다시 객체로 바꿔 값들을 가져와야하는데 그러지 못하니 발생한 것으로 확인함.

 

 

- 에러 증상

웹 페이지 내 존재하던 Javascript 함수가 전부 다 작동을 멈춤

로컬 스토리지에 정상적으로 등록되어 있던 다른 데이터도 불러오지 못함

빈 화면만 나옴

함수가 작동하지 않으니 localStorage.clear()도 먹히지 않음

 

- 해결 방법

개발자도구 - application 로컬 스토리지에 저장된 데이터 중

value: '수정하고자 하는 텍스트.' 를 직접 삭제(우클릭-delete)해주니 해결됨