localStorage, JSON, stringfy, parse

*혼자 내용 정리를 위해 작성하는 글이라 정확하지 않은 정보가 포함되어 있을 수 있습니다.

 

"localStorage를 사용하면 Document's origin의 Storage 객체에 접근할 수 있습니다.

저장한 데이터는 브라우저 세션 간에 공유됩니다. 

localStorage는 sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다.

("사생활 보호 모드" 중 생성한 localStorage 데이터는 마지막 "사생활 보호" 탭이 닫힐 때 지워집니다.)

localStorage에 저장한 자료는 프로토콜 별로 구별 합니다. 특히 HTTP로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS와는 다른 localStorage에 저장됩니다." 출처: developer.mozilla.org/ko/docs/Web/API/Window/localStorage

 

localStorage를 MDN에 검색해보니 나온 정보이다.

대략 알고 사용하면 좋을 것 같아 첨부했다.

 

---

 

다음은 localStorage의 자세한 사용법이다.

 

localStorage.setItem("currentUser", "westone");

setItem: 현재 도메인의 localStorage 객체 값을 저장하는 함수이다. parameter는 key, value

 

currentUser = localStorage.getItem("currentUser");

getItem: localStorage의 특정 key에 대응하는 value를 반환한다. parameter는 key

 

localStorage.removeItem("currentUser");

removeItem: localStorage의 특정 key에 대응하는 key, value를 삭제한다. parameter는 key

 

localStorage.clear();

clear: localStorage를 비운다.

 

---

아 그리고 localStorage의 parameter는 UTF-16 DOMString의 형태로 저장된다고 한다.

javascript의 string도 UTF-16형식이라 DOMString과 연결된다고 한다.

만약 string이 아닌 다른 데이터형을 localStorage의 parameter로 전달하면 자동으로 문자열로 변환된다. (null을 넣으면 "null"로 변환)

 

그래서 localStorage에 다른 데이터타입을 저장하기 위해서는 localStorage(key, JSON.stringfy(value)) 해주어야한다.

그리고 저렇게 저장된 데이터를 localStorage에서 가지고 올때는 JSON.parse(localStorage.getItem(key)) 해주어야한다.

여기서 쓰이는 JSON객체는 일반적인 JSON(JavaScriptObjectNode)을 의미하는건 아닌거 같고 javascript를 JSON과 연동시키기 위한 객체인것 같다.

 

JSON객체는 stringfy, parse 두 메소드를 가지고 있는데 역할은 다음과 같다.

 

stringfy: javascript object나 다른 데이터형(string제외)을 JSON String으로 변환해주는 함수이다. 여기서 의문이 생길수도 있다. localStorage에 parameter로 넣으면 자동으로 string형이 된다면서? 하지만 이렇게 생각해보자. null과 "null"이 같은 의미인가? 아니다. 다르다. 그래서 만약 localStorage안에 javascript object를 넣는다면 문자형으로 변환되는 과정에서 다시 뽑아올 때 문제가 생길 것이다. 때문에 JSON String 형으로 변환해주는 것이다.

 

그렇다면 JSON String형이 뭘까? 

JSON String: JSONString이란 JSON 구조로 이루어진 string타입이다. JSON은 무엇일까? Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷이다. 그리고 다음 예시를 보면 이해에 도움이 될 것 같다.

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

 

첫 줄의 json에 대입되는 값을 보자. 

본론부터 말하자면 저게 JSONString이다.

string형이지만 내부 구조를 보면 javascript 객체 문법을 따르고 있으니 위에 언급된 JSON 포맷이라고 할 수 있는 것이다.

즉 JSON 포맷 = JSONString 이라고 생각하면 될 것 같다.

 

parse: JSON객체의 parse는 JSONString을 javascript object 혹은 다른 데이터타입으로 변환해준다.

예제를 보자.

분명 string형이었던 json이 JSON.parse를 통해 객체형으로 변환되어 obj에 저장되고 있다.

 

즉 JSON 포맷은 string형이긴 하지만 javascript 객체문법을 따른다. 또한 parse를 통해 javascript object형으로 변환될 수 있다.

 

이렇게 JSON.parse, JSON.stringfy를 알아보았다. 다음 문장을 다시 보면 어떨까? 이해도가 올랐을거라 생각한다.

 

 

 

"아 그리고 localStorage의 parameter는 UTF-16 DOMString의 형태로 저장된다고 한다.

javascript의 string도 UTF-16형식이라 DOMString과 연결된다고 한다.

만약 string이 아닌 다른 데이터형을 localStorage의 parameter로 전달하면 자동으로 문자열로 변환된다. (null을 넣으면 "null"로 변환)

 

그래서 localStorage에 다른 데이터타입을 저장하기 위해서는 localStorage(key, JSON.stringfy(value)) 해주어야한다.

그리고 저렇게 저장된 데이터를 localStorage에서 가지고 올때는 JSON.parse(localStorage.getItem(key)) 해주어야한다."

 

 

---

JSON, stringfy, parse에 대한 설명이 너무 복잡하고 간결하지 못하다.

 

아마도 나조차도 이 개념을 완전히 이해하지 못하고 있다는 증거겠지.

 

하지만 완전 몰랐던 개념을 알아가는 중이며 중간에 멈추지만 않는다면 다시 이 녀석을 마주할 시간은 올 것이다.

 

그때를 기다리며 오늘은 이 정도에 만족하자!

 

첫 술에 배부르랴!

 

끝.

 

참고 사이트:

developer.mozilla.org/ko/docs/Web/API/Window/localStorage

Window.localStorage

developer.mozilla.org/ko/docs/Web/API/DOMString

DOMString

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

JSON.stringify()

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

JSON.parse()

developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON

JSON으로 작업하기

www.json.org/json-en.html

JSON