localStorage

html,css,javascript 를 이용해서 웹 개발을 하다보면 데이터를 저장해서 페이지가 새로고침 되더라도 데이터는 기억해야 할 때가 있습니다. 일반적으로는 데이터 베이스에 데이터를 저장해 이 기능을 사용하지만 저장해서 사용할 데이터가 중요한 데이터가 아니거나 개발할때 프로그램이 잘 작동되는지 확인하기 위한 용도로 이용한다면 빠르고 간단하게 개발을 진행 할 수 있습니다.

로컬 스토리지, 세션 스토리지

웹 스토리지에는 로컬 스토리지와 세션 스토리지가 존재 합니다. 이 두개의 차이점은 스토리지에 저장한 데이터가 얼마나 유지되느냐 입니다.
세션 스토리지는 창을 닫는다면 데이터가 사라집니다. 그리고 각각의 창에서 세션 스토리지의 데이터는 공유되지 않습니다.
로컬 스토리지는 창을 닫더라도 데이터가 유지됩니다. 그리고 모든 창들에서 로컬 스토리지의 데이터는 공유 됩니다.
당연하게도 로컬 스토리지는 다른 브라우저나 다른 컴퓨터에서는 저장한 데이터를 공유 할 수 없습니다.
모두 공유하기 위해서는 데이터 베이스를 사용해야 합니다.

로컬 스토리지 사용 법

로컬 스토리지와 세션 스토리지의 사용법은 같으므로 로컬 스토리지를 기준으로 알아 봅시다.

setItem(키,값)

localStorage.setItem ("키","값");

로컬 스토리지에는 키와 값으로 데이터를 저장 합니다.

getItem(키)

localStorage.getItem("키");

로컬 스토리지에 저장되어 있는 값을 가져올려면 getItem 에 키를 전달하면 됩니다. 만약 로컬 스토리지에 없는 값을 불려올려고 했다면 null 이 반환 됩니다.

removeItem(키)

localStorage.removeItem("키");

로컬 스토리지에 저장되어 있는 값을 삭제할때 사용 합니다. removeItem 에 키를 전달하면 키에 해당하는 값이 함께 로컬 스토리지에서 삭제 됩니다.

clear()

localStorage.clear();

로컬 스토리지에 저장되어 있는 모든 데이터를 삭제 합니다.

length

localStorage.length;

로컬 스토리지에 저장되어 있는 데이터의 개수를 반환 합니다.

모든 데이터는 문자열 형태로 저장 됩니다.