localstorage 이란?

Todo list를 만들때 값을 저장하기 위해 localstorage를 사용하는데

사용하는 방법은 알아도 정확한 이론은 한번쯤 정리해야겠다는 생각을 하였다. 

 

✨loclastorage에 대해서 알아보도록 하자! ✨

 

 

 

---

 

💖 localstorage

1. localstorage는 HTML5에서 추가된 저장소로 브라우저에 위치한다.

 

2. localstorage는 window 객체 안에 들어있고, 'Storage'객체를 상속받기 때문에 메소드를 사용할 수 있다.

3. 간단한 키와 값을 저장할 수 있고, 로컬 스토리지에 저장된 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있다. 영구적으로 값이 저장되는 메모리 공간(비휘발성 메모리)

-자바스크립트 변수는 프로그램이 실행되는 기간에만 존재한다. 그래서프로그램이 실행될 때 아니면, 접근할 수 없는 데이터이다. 그것을 해결해주는 것이 localstorage이다.

 

 

 

 

---

 

 

✨ localstorage 특징

1. 브라우저 안에 저장되는 데이터들을 모아놓은 공간 중 하나입니다.

 

2. 비휘발성이며, 값이 만료되지 않는다.

 

3. 사용자가 값을 삭제할 수는 있다.

 

4. 키와 밸류의 형태로 값을 저장한다.(JSON 형태) ▶ JavaScript Object Notation

 

5. 키와 밸류는 문자열 형태로 입력된다.

 

 

 

 

---

 

 

💻 localstorage 메소드

 

1. 데이터 저장

 

localstorage.setItem("Key", "value")

 

- localstorage에 데이터를 저장할 때 쓰인다.
key-value 순서대로 인자를 받으며, 값으로는 string, boolean, number, null, undefined 등을 저장할 수 있지만 모두 문자열로 변환된다. key도 문자열로 변환된다.

위 문법처럼 key-value 형식으로 풀어서 여러 개를 저장할 수도 있지만, 객체를 통째로 저장하려면 JSON.stringify()를 사용해 객체를 그대로 문자열화 해주어야 한다.

 

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

 

통째로 저장한 객체

 

 

 

2. 데이터 조회

 

localstorage.getItem("key")

 

- localStorage.setItem('키', '값');로 저장된 데이터는 key와 위 메소드를 사용해서 가져올 수 있다.
JSON.stringify()를 통해 객체형식으로 저장했다면, 조회 역시 JSON.parse()를 해주어야한다.

 

- JSON.parse(JSON 형식의 텍스트) : JSON 형식의 텍스트를 자바스크립트 객체로 변환합니다.

 

 

 

 

3. 데이터 Key값과 동일한 key 삭제

 

localstorage.removeItem("key")

 

 

 

 

4. 데이터 모두 삭제

 

localstorage.clear()

 

 

 

 

---

 

 

https://tlsdnjs12.tistory.com/11

JSON 이란?