08.Json
Updated:
Json (JavaScript Obejct Notation)
-
속성: 값 쌍으로 (arrtibute-value pairs and array data) 이뤄진 데이터 오브젝트를 전달하기 위한 개방형 표준 포멧입니다.
-
비동기 브라우저 / 서버 통신(
AJAX) 을 위해 또는XML을 데체하는 주요 데이터 포맷입니다. -
특히 인터넷에서 자료를 주고 받을때 그 자료를 표현하는 방법으로 널리 쓰입니다.
-
주의할 점은
str형식에는 “” 만 사용됩니다 (‘’ 안됨) -
Jason파일의 모양은 객체 데이터 지만 속성은 결국 하나의 큰 덩어리의 문자 데이터 입니다.
{
"sting": "Jacob",
"number": 123,
"boolean": true,
"null": null,
"object": {},
"array": []
}
import myData from "./myData.json";
console.log(myData);
const user = {
name: "Jacob",
age: 80,
email: ["jacobkosmart@gmail.com", "jacobko@kakao.com"],
};
console.log("user", user);
const str = JSON.stringify(user); // Jason 데이터 타입으로 변환 -> 문자 데이터임
console.log("str", str); // 문자데이터로 사용가능
console.log(typeof str);
const obj = JSON.parse(str); // 반대로 문자 데이터인 json 파일을 js에서 쓸수 있겠끔 object 타입으로 변환 시켜주는것
console.log("obj", obj);
Data Storage
1.local storage
Domain주소에 종속되서 저장하는 것입니다.- 저장한 데이터는 브라우저 세션간에 공유합니다.
local storage는 데이터가 만료 되지 않습니다. 즉, 따로 지우지 않으면 없어지지 않고 저장되있습니다.
localStorage.setItem('myCat', 'Tom');// 현재 도메인의local storage객체에 접근한 후,myCat,Tom의key,value값을 저장합니다.
- 위와 같이
myCat은key값,Tom은value값입니다. - 데이터는 항상 문자형태
str형식으로 사용되는데, 만약 데이터가 array 나 object 방식이면 JSON 형식으로 사용해서 결국 str 형태로 저장 되어야 합니다.
const cat = localStorage.getItem('myCat');// 저장된 데이터를 읽는 방법 입니다.
localStorage.removeItem('myCat'); // 저장된 데이터를 지우는 방법입니다.
- 주의할점, 저장할때는 str 형태로 변환 (JSON) 으로 local storage 에 저장 해야 합니다.
const user = {
name: "Jacob",
age: 80,
email: ["jacobkosmart@gmail.com", "jacobko@kakao.com"],
};
localStorage.setItem("user", user);
- JSON 으로 str 형태로 저장하기
const user = {
name: "Jacob",
age: 80,
email: ["jacobkosmart@gmail.com", "jacobko@kakao.com"],
};
localStorage.setItem("user", JSON.stringify(user));
console.log(localStorage.getItem("user")); // local storage 저장된 data 읽기
- 근데 불러온 데이터가 타입이 str 이기 때문에 원래 데이터의 형식인 obj 으로 변환 해주어야 합니다.
console.log(JSON.parse(localStorage.getItem("user")));
- 저장한 데이터 지우기
localStorage.removeItem('user')
- 저장한 데이터를 수정하기
const str = localStorage.getItem("user"); // data 를 가져와서
const obj = JSON.parse(str); // obj 형태로 형변환
obj.age = 22; // value 값 변경
localStorage.setItem("user", JSON.stringify(obj)); // 다시 local storage에 저장하는데 이때, JSON 형태로 변환해서 저장해줘야 함
2.Session storage
-
페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 데이터 입니다.
-
특수한 경우가 이니고는 대부분 local storage 를 사용합니다.
🔑 3.유용한 library - lowdb
-
Powered by lodash
Leave a comment