(Javascript) local storage에 값 저장하기

 

 

자바스크립트로 투두리스트를 만드는 중, 새로고침을 하면 값이 사라지기에 저장하는 방법을 찾아보던 도중

 

local storage에 값을 저장할 수 있다는 것을 알게 되었다. 

 

생각보다 사용 방법은 아래와 같으며 몹시 간단하다.

localStorage.setItem("key1", "apple"); //로컬스토리지에 요소 저장, 왼쪽요소는 키로 오른쪽요소는 값으로 저장됨
localStorage.getItem("key1"); //키로 로컬스토리지에서 값 가져오기
localStorage.removeItem("key1"); //키로 로컬스토리지에서 요소 제거
localStorage.clear(); //로컬스토리지 전체 비우기

 

 

 

중복 없는 유일한 키값 만들기

이때 키값을 유일무이한 값으로 지정하고 싶으면 아래처럼 설정하면 된다.

 

아래 코드를 작성하면 현재 시간을 밀리초로 변환해 돌려준다. 

const key = new Date().getTime();

 

 

 

새로고침했을 때, 로컬 스토리지에 저장한 값 순서가 바뀌는 것을 막는 법

 

유일한 키값을 만든 뒤 로컬스토리지에 정보를 저장했더니 값이 잘 저장되었으나 문제가 생겼다.

 

바로 새로고침할 때 로컬스토리지에 저장된 값의 순서가 바뀐다는 것이다. 

 

이를 막고 싶다면 로컬 스토리지 안에 객체를 하나 만들어서 그 안에 값을 저장하면 순서가 바뀌는 것을 막을 수 있다.

 

 

 

그런데 객체를 바로 로컬스토리지에 넣으면 {object : object} 형식으로 바뀌어버린다.

 

로컬 스토리지에는 string 타입밖에 넣을 수 없기 때문이다.

 

이 때문에 JSON.stringify를 사용해 객체를 string으로 변환해 스토리지에 넣고,

 

스토리지 값을 가져올때는 JSON.parse를 사용해 string을 다시 객체로 변환해야 한다.

let storedItems = JSON.parse(localStorage.getItem("items")) || {};

storedItems[0] = "apple";
storedItems[1] = "banana";
storedItems[2] = "grapes";

localStorage.setItem("items", JSON.stringify(storedItems));

아래와 같이 잘 저장되는 것을 볼 수 있다.