[JavaScript] - LocalStorage & JSON

📍 window.localStorage

localStorage속성은 현재 도메인의 로컬 저장소에 접근할 수 있게 도와주는 속성이다.

로컬 저장소는 웹 브라우저에서 각 도메인에 대해 할당해주는 저장공간으로, 데이터를 영구적으로 보관할 수 있다.

데이터 보관시에는 데이터의 이름(key)과 데이터의 실제 값(value)을 각각 지정하며,

이때 데이터 타입은 문자열 형태만 허용된다.

 

🔍 영구적으로 보관한다는 것은?

브라우저를 껐다가 켜거나 페이지를 새로고침해도 해당 페이지에 데이터가 남아있도록 할 수 있다는 것

 

💡 로컬 스토리지는 어디에서 확인할 수 있을까?

크롬의 경우 개발자도구의 application 하위 폴더에서 Local Storage를 확인할 수 있다.

 

---

📍  로컬 스토리지 사용법

로컬스토리지로부터 데이터를 읽거나 쓸 때에는 메소드를 이용해 접근한다.

메소드명	기능	사용 예
setItem	키와 밸류를 전달받아 저장	localStorage.setItem("key","value")
getItem	전달받은 키에 해당하는 밸류를 반환	localStorage.getItem("key")
removeItem	전달받은 키에 해당하는 데이터 삭제	localStorage.removeItem("key")
clear	모든 데이터를 삭제	localStorage.clear()

⚠️ 로컬 스토리지의 데이터이름(key)은 중복될 수 없다.

(키는 중복될 수 없지만, 밸류는 중복으로 사용이 가능하다.)

 

➰ localStorage에 저장하기

// localStorage에 userName저장하기
const userName = 'kiji';
localStorage.setItem('userName',userName);

userName이 저장되어있다.

위에 작성한 코드를 지운 후 새로고침을 해도 로컬스토리지에는 남아있다.

 

➰ 저장해둔 데이터 가지고오기

// localStorage에 저장해둔 데이터 가져오기
const userName = localStorage.getItem('userName');
console.log(userName)

콘솔창에 찍힌 userName

➰ 여러 데이터 저장하기

localStorage.setItem('cat','고양이')
localStorage.setItem('dog','강아지')
// 중복된 key에 다른 데이터값 넣기
localStorage.setItem('userName','김기지')

먼저 저장되어있던 데이터는 새로 넣은 데이터로 덮어씌워짐

 

➰ localStorage에 배열,객체 저장하기

localStorage에는  문자열 형태만 저장이 가능하다.

따라서, 배열이나 객체를 localStorage에 저장하기 위해서는 문자열로 변환해야한다.

배열이나 객체를 문자열 형태로 변환하기 위해서는 JSON 표현식을 사용한다.

---

📍 JSON (JavaScript Object Notation)

텍스트 정보를 저장하고 바꾸는데 사용되는 문법
 자바스크립트의 객체를 표현하는 방식으로, key-value 쌍으로 이루어진 데이터를 전달하기 위한 개방형 표준 포맷이다.

• JSON 문법

Javascript 객체와 마찬가지로 key와 value가 존재할 수 있으며 key값이나 문자열은 항상 " "를 이용하여 표기 해야 한다.

1. 객체 형태

{
    "userName" : "kiji",
    "age" : 20
}

2. 배열 형태

{
    "users" : [
        {
            "userName" : "kiji",
            "age" : 20
        },
        {
            "userName" : "zzionie",
            "age" : 27
        },
        {
            "userName" : "minkyu",
            "age" : 26,
            "hobby" : ["swimming", "cooking"]
        }
    ]
}

• JSON 형식 텍스트를 JavaScript Object로 변환하기

- JSON.parse( JSON으로 변환할 문자열 ) : JSON 형식의 텍스트를 자바스크립트 객체로 변환
- JSON.stringify( JSON 문자열로 변환할 값 ) : 자바스크립트 객체를 JSON 텍스트로 변환

---

➡︎ localStorage에 배열이나 객체형태의 데이터를 넣을때 JSON을 사용하여 변환하자

// 객체형태
const user = {
    userName : 'kiji',
    age : 20
}
// 배열형태
const hobby = ['cooking','crossing animals','swimming']
// 문자열 형태로 변환하기
const objUser = JSON.stringify(user);
const arrHobby = JSON.stringify(hobby);

localStorage.setItem('user',objUser);
localStorage.setItem('hobby',arrHobby);

 

➰ 특정 데이터 삭제하기

localStorage.removeItem('cat')
localStorage.removeItem('dog')
localStorage.removeItem('userName')

cat, dog, userName이 제거되었다.

➰ 모든 데이터 삭제하기

localStorage.clear()

안에 들어있던 모든 데이터가 제거되었다.