localStorage | Notion

locaStorage는 map처럼 사용할 수 있다.

→ localStroage에 저장되는 순서가 보장되지 않음

→ 중요: localStorage 는 문자열만 저장가능 -> 곧 객체를 그대로 저장하지 못함

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
//localStroage 요즘은 cookie 대신 많이 사용(용량도 넉넉, 사용법도 쉬움)
localStorage.setItem("내키", "165");
localStorage.setItem("내키", "200");    //  키값이 같으면 덮어쓴다.(수정)
alert(localStorage.getItem("내키")); //읽기
localStorage.setItem("merong", "안메롱"); // 추가
alert(localStorage.length); // 크기 읽기
localStorage.removeItem("내키"); // 삭제
alert(localStorage.key(0));      // 키값 읽어오기(생각보다 잘 안씀 순서보장x)
localStorage.clear(); // 전체 지우기
</script>

Untitled

json 객체 저장 및 읽기

<!DOCTYPE html>
    <meta charset="UTF-8">
    <script>
    let testObj = { name:"진현성", ment:"이름어려움"};
    localStorage.setItem("jhs", JSON.stringify(testObj)); 

    let readData = JSON.parse(localStorage.getItem("jhs")); // 문자열을 객체화
    alert("체킁: " + readData.ment);
    </script>

Untitled

배열 객체 저장 및 읽기

<!DOCTYPE html>
    <meta charset="UTF-8">
    <script>
    let testObj = { name:"진현성", ment:"이름어려움"};
    localStorage.setItem("jhs", JSON.stringify(testObj)); 

    let readData = JSON.parse(localStorage.getItem("jhs"));  // 문자열을 객체화
    alert("체킁: " + readData.ment);

    // 배열(객체임) 자동 실행되는 toString 메소드에 속으면 안됨
    localStorage.clear();
    let testArr = [2,5,7,9];
    localStorage.setItem("test", JSON.stringify(testArr));
    alert(JSON.parse(localStorage.getItem("test"))[2]);
    </script>

Untitled