localStorage 브라우저에 데이터 저장하기(상세)

참고용사이트 https://ko.javascript.info/localstorage

localStorage와 sessionStorage

 

브라우저에 데이터를 저장할 수 있는 LocalStorage를 알아보겠습니다. 브라우저에 데이터를 저장할 수 있는 객체는 2가지가있는데 하나는 sessionStorage와 우리가 배워볼 localStorage가 있다. 이 두가지를 웹 스토리지 객체라고 부른다. 

먼저 localStorae의 특징을 알아보자. 

 

1. 데이터를 저장할때의 자료형은 '문자열'데이터만 저장할 수 있다.
2. 데이터를 새로고침하여도 데이터가 남아있다. (브라우저를 닫았다 열어도 없어지지않음)
3. 웹 스토리지객체는 네트워크 요청시 서버로 전송되지않는다. 
4. 최소 2MB이상의 객체를 저장할 수 있으며 개발자측에서 웹스토리지를 조작할 수 있다.
5. 서버측에서 HTTP헤더를 통해 스토리지객체를 조작할 수 없다. 객체의 모든 조작은 자바스크립트에서 수행된다. 
6. 스토리지 객체는 도메인 , 프로토콜 , 포트로 정의된 '오리진(origin)'에 묶여있다. 즉 프로토콜과 서브도메인이 다르면 데이터에 접근할 수 없다
7. KEY - VALUE형식으로 저장된다.

 

쇼핑몰 사이트를 들어가보면 '최근본상품' 이런UI가 있을거다. localStorage를 이용해 만들 수 있다. 내가봤던 상품의 데이터를 localStorage에 저장한거다.

 

이러한 특징들이 있다. 이해가 안갈 수도 있겠지만 , 쉽게말해 내가 사용한 브라우저의 정보를 이용해 데이터를 저장한다. 이제 localStroge를 코드로 알아보자!

 

1. 데이터 저장하기

export default function localstorageTest(){
    localStorage.setItem('name' ,'mang')
}

localStorage.setItem()함수를 이용해 데이터를 저장하는데 왼쪽이 Key가 되고 , 오른쪽이 Value가 된다. key,value모두 문자열만 저장이된다. 함수를 실행해보자. 

 

검사 -> Application

왼쪽 하단 Storage에서 Local Storage밑에 http://localhost:3000을 보면 내가 저장한 데이터를 볼 수 있다. 

Key Value 가 잘 저장되었다. 

 

2.데이터 불러오기

데이터를 저장해보았으니 이제 저장한 데이터를 불러와서 출력해보자.

export default function localstorageTest(){
    const localData = localStorage.getItem('name');
    console.log(localData);
}

데이터를 가져올때는 getItem(Key이름)을 이용하여 가져온다. localData변수에 담아줬는데 Value값이 들어간다. 그래서 콘솔에 찍어보면

콘솔

 

잘 찍히는걸 볼 수있다. 이렇게 데이터를 가져온다.

 

3.데이터 삭제하기

Key를 이용하여 데이터를 삭제해보겠다. 

export default function localstorageTest(){
    localStorage.removeItem('name')
}

removeItem()함수에 key를 넣어 해당key값의 데이터들을 통으로 삭제해버린다. 실행후 콘솔을 확인해보자.

삭제됬다.. 눈씻고 찾아봐도 찾아볼 수 없다.... 

 

3-1.데이터 모두 삭제하기

export default function localstorageTest(){
    localStorage.clear()
}

clear()함수는 localStorage의 데이터를 삭제할 수 있다. 

 

4. index의 해당하는 Key 불러오기

key()함수를 이용해서 localStorage의 index의 key를 받아올 수 있는데 코드를 보면 바로 이해가 될거다.

일단 3개의 데이터를 만들어주겠다. 

export default function localstorageTest(){
    localStorage.setItem('name', 'mang')
    localStorage.setItem('age' , '23')
    localStorage.setItem('job' , 'student')
}

먼저 이렇게 3개를 만들어서 저장하겠다.



저장완료. 순서대로 들어가있다. 이제 index는 정해져있다. 0=name , 1=age , 2=job 이되었다. 

 

export default function localstorageTest(){
    localStorage.setItem('name', 'mang')
    localStorage.setItem('age' , '23')
    localStorage.setItem('job' , 'student')

    console.log(localStorage.key(0))
    console.log(localStorage.key(1))
    console.log(localStorage.key(2))
}

차례대로 key()함수를 이용하여 0번째 , 1번째 , 2번째 해당하는 인덱스의 key값을 콘솔에 찍어보았다. 

결과

잘 나왔다.

 

5.총 localStorage데이터의 length가져오기

localStorage의 몇가지 데이터가 저장되어있는지 알아볼 수 있는 프러퍼티이다.

export default function localstorageTest(){
    localStorage.setItem('name', 'mang')
    localStorage.setItem('age' , '23')
    localStorage.setItem('job' , 'student')

    console.log(localStorage.length)
}

어떤 값이 출력될거라고 생각하나? 5초안에 답이나오지 않았다면 IQ걱정할 때가 된거같다.

출력값

3이 출력되었다 왜? localStorage.setItem()함수로 3가지의 데이터를 저장했다.

 

실전에서 (Array/Object)

1.배열 저장하기

여기서 코딩을 쫌 해본사람들은 생각해봤다고 생각한다. 문자열밖에 저장이안되는데 배열하고 객체는 어떻게 저장하지...? 그렇다 저장못한다. 못해... 그래서 우리가 사용할건 JSON을 이용하여 저장할거다. 이 JSON 데이터포멧을 이용하면 localStorage에 손쉽게 접근할 수 있다.

 

코드로 가보자.

export default function localstorageTest(){
    let arr1 = [1,2,3,4,5];

    localStorage.setItem('Array' , JSON.stringify(arr1));
}

 

 

JSON.stringify()함수를 이용해서 arr1의 배열을 문자열 형태로 포멧해준다.

잘 저장되었다. 하지만 getItem으로 불러서 쓸려고 해도 안써질거다. 왜냐면 JSON형태로 배열이 저장되어있는거다.

다시 배열형태로 돌려주면된다.

 

1.배열 불러오기

export default function localstorageTest(){

    let arr1 = JSON.parse(localStorage.getItem('Array'));

    arr1.map((element , index)=>{
        console.log(element)
    })
}

localStorage.getItem함수를 이용하여 Array를 불러오는데 JSON.parse를 감싸주어 문자열에서 다시 배열형태로 JSON이 알아서 바꿔준다. 

 

객체도 배열하고 방법이 100% 똑같다.