LocalStorage
로컬스토리지는 저장된 데이터를 삭제하기 전까지 영구히 보존
저장되는 모든 데이터는 자바스크립트의 Object 데이터처럼 키와 값의 쌍으로 저장
다만 저장되는 모든 값은 String(문자열)으로만 저장 가능
Number,Boolean,Object,Array 같은 형태의 데이터를 저장할 때는
JSON.stringify를 이용해 문자열로 변환해 저장
반대로 데이터를 읽을 때는 JSON.parse를 이용해 원래의 데이터 형태로 변환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// Storage를 사용할 수 있는지 체크
if (typeof Storage !== "undefined") {
localStorage.setItem("title", "The Great"); // 로컬스토리지의 title키에 The Great 저장
const users = [
{
id: 1,
name: "Hyeok",
},
{
id: 2,
name: "Seo",
},
];
localStorage.setItem("users", JSON.stringify(users)); // 로컬스토리지의 users 키에 users 배열을 문자열로 저장
}
if (typeof Storage !== "undefined") {
console.log(localStorage.getItem("title"));
console.log(JSON.parse(localStorage.getItem("users"))); // 배열을 문자열로 변환해서 저장한 데이터는 읽어올 때 다시 배열로 변환
}
localStorage.removeItem("title"); // 저장할 때 사용한 Key로 삭제
</script>
</body>
</html>
SessionStorage
세션스토리지에 저장된 데이터는 브라우저 창(탭)을 닫는 순간 자동으로 삭제
일회성 데이터를 보관해서 사용하면 됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// Storage를 사용할 수 있는지 체크
if (typeof Storage !== "undefined") {
sessionStorage.setItem("title", "The Great"); // 세션스토리지의 title키에 The Great 저장
const users = [
{
id: 1,
name: "Hyeok",
},
{
id: 2,
name: "Seo",
},
];
sessionStorage.setItem("users", JSON.stringify(users)); // 세션스토리지의 users 키에 users 배열을 문자열로 저장
}
if (typeof Storage !== "undefined") {
console.log(sessionStorage.getItem("title"));
console.log(JSON.parse(sessionStorage.getItem("users"))); // 배열을 문자열로 변환해서 저장한 데이터는 읽어올 때 다시 배열로 변환
}
sessionStorage.removeItem("title"); // 저장할 때 사용한 Key로 삭제
</script>
</body>
</html>
코딩공부