시베리안 허숙희의 자바스크립트 비기닝 25 (LocalStorage...)

자바스크립트

by e7e 2023. 6. 21. 00:21

브라우져에는 쿠키(cookie)라는 저장공간이 있고, 도메인당 약 4KB의 Max Limit로

50개 까지 저장 가능하다고 알려져 있당. 이걸 이용해서 접속자의 ID나,

보안상 위험(암호등)하지 않은 것들을 유효기간을 주어 저장하곤 했었는데, 요즘은

localStorage나 sessionStorage를 사용하는 거시 훨씬 모던해 보일뿐더러 사용도 쉽당.

(localStorage의 용량은 크롬 기준으로 도메인당 5M 정도로 알려져 있당.)

localStorage와 sessionStorage는 사용법은 완전히 똑같고, 단지 브라우져에서

해당사이트를 닫으면 저장내용이 자동삭제가 되는가(sessionStorage)?

안 되는가?(localStorage)만 다르당.

아직 너무 cookie에만 메달려 있다면 이번 기회에 제발 사용해 보기 바란당! (꼬옥....!)

2개의 사용법이 똑같으니 localStorage 사용법만 보도록 하장!

아래가 localStorage의 속성과 메소드 리스트당. ( 누느로 보자마자 음.. 쉽넹!이당)

setItem/ getItem/ removeItem/ length/ key/ clear 6개만 알면 쓰는데는 문제없당!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    localStorage.setItem("name","로제");
    localStorage.age = 26;             // setItem을 안쓰고 요따구로 써도 된당!
    localStorage.setItem("dummy","그냥");
    localStorage.songs='["gone","ground"]';

    alert("체킁 name: " + localStorage.getItem("name"));
    alert("체킁 age: " + localStorage.getItem("age"));
    alert("체킁 dummy: " + localStorage.dummy); // getItem을 안쓰고 요따구로 써도 됨
    alert("체킁 songs: " + localStorage.songs);
    alert("몇개1: " + localStorage.length);

    localStorage.removeItem("dummy");
    delete localStorage.age;      // removeItem을 안쓰고 요따구로 써도 됨

    alert("몇개2: " + localStorage.length);
    alert("첫번째 키값" +localStorage.key(0));

    localStorage.setItem("name","로제짱!"); // key값 같으면 덮어쓰깅
    
    //localStorage.clear(); 모두 지우깅, 일부러 주석
</script>

크롬에서 F12를 누르고, Application 탭을 누르면, 아래와 비슷한 모습을 볼 것이당.

localStorage를 사용할 때 꼬옥 주의(기억)해야 할 거시 있는데, 그거슨

객체를 저장할 땐 꼭 JSON.stringify를 해서 문자열로 저장해야 하는 것이당. 안 그러면

[Object,Object]라는 똑같은 문자열(어디서 온걸깡?)만 저장되어서 꺼내 쓸 의미가 없어진당

(배열은 괜찮지만, 괜찮지 않당 이유는? 생각해 보장!)

결국 객체(배열포함)를 저장할 땐 JSON.stringify를 해서 저장하고, 읽을 때는 문자열로 읽어서

객체를 나타내는 문자열인 경우 JSON.parse를 해야 하는 불편함이 번거롭당.

어떻게든 쪼메라도 편하게 쓰고 싶다면, 아래 코드를 참고하장(내 맘이당! -> 도우미 된당)

<!DOCTYPE html>
<meta charset="UTF-8">
<script>    
  const localUtil = {}; // 네임스페이스용 텅빈 객체
  //저장 또는 더퍼쓰깅 메소드 추가
  localUtil.save = function(pKey,pVal){
    // JSON.stringify는 문자열,숫자,불린에 적용해도 문자열로 바꾼당
    localStorage.setItem(pKey,JSON.stringify(pVal));
  }

  //읽기 메소드 추가
  localUtil.read = function(pKey){
    let rslt;
    try {
        rslt = JSON.parse(localStorage.getItem(pKey));
    } catch (error) {  // JSON형식이 아닌 걸 바꾸었을 때 error 발생
        rslt = localStorage.getItem(pKey);
    }
    return rslt;
  }
  //지우기 메소드 추가
  localUtil.del = function(pKey){
    localStorage.removeItem(pKey);
  }

  //모두 지우기 메소드 추가
  localUtil.delAll = function(){
    localStorage.clear();
  }

  // 테스통
  localUtil.save("array",["1","2","3"]);
  localUtil.save("obj",{name:"제니",age:27});
  localUtil.save("merong","hello");
  localUtil.save("number",272);
  localUtil.save("boolean",true);
  // 

  alert(localUtil.read("obj").name);
  alert(localUtil.read("array")[2]);
  alert(localUtil.read("merong"));
  alert(localUtil.read("number"));
  localUtil.del("number");
  alert(localUtil.read("number")); // 없는 건 null이 return됨
</script>

활용에 자신을 얻도록 먼저 더미 데이터를 만들어 넣는 코드를 한번 보장!

(잘 보아두면 좋은 거시, 이 형식이 MongoDB의 Collection(관계형DB의 Table) 모양이당!)

<!DOCTYPE html>
<meta charset="UTF-8">
<script>    
  const localUtil = {};
  localUtil.save = function(pKey,pVal){
    // JSON.stringify는 문자열,숫자,불린에 적용해도 문자열로 바꾼당
    localStorage.setItem(pKey,JSON.stringify(pVal));
  }

  localUtil.read = function(pKey){
    let rslt;
    try {
        rslt = JSON.parse(localStorage.getItem(pKey));
    } catch (error) {  // JSON형식이 아닌 걸 바꾸었을 때 error 발생
        rslt = localStorage.getItem(pKey);
    }
    return rslt;
  }

  localUtil.del = function(pKey){
    localStorage.removeItem(pKey);
  }

  localUtil.delAll = function(){
    localStorage.clear();
  }

  // 더미 데이터(IT 글 게시판 데이터라 치장) 맹글깅,
  // 글번호,글쓰니,제목,내용,날짜,카테고리(html,css,js,java,oracle중 2개이상 관련)
  const tableName = "board"; // localStorage 키값;
  const cateStr = '["HTML","CSS","JS","JAVA","ORACLE"]';

  // 괘니 만든 1개이상 랜덤 카테고리 배열 리턴
  const ranCat = function(){
     const category = JSON.parse(cateStr);
     let rslt = [];
     let ranLoop = 2 + Math.floor(Math.random()* (category.length-2));
     
     for(let i=0; i<ranLoop; i++){
        let ransu = Math.floor(Math.random()* category.length);
        rslt.push(category[ransu]);
        category.splice(ransu,1); 
     }
     return rslt;
  }

  // 더미 데이터 생성 108번뇌
  let now = new Date();
  let dummyData = [];
  for(let i=1; i<=72; i++){
    let gesiGul = {};
    gesiGul.num = i;
    gesiGul.writer = "지으니 " + i;
    gesiGul.title = "제목 " + i;
    gesiGul.cont = "내용 " + i;
    now.setDate(i);
    gesiGul.wdate = now.toLocaleString();
    gesiGul.cate = ranCat();
    dummyData.push(gesiGul);
  }

  localUtil.save(tableName,dummyData); // localStorage에 저장!

</script>

크롬 Application 탭을 확인해 보면 아래 처럼 데이타가 보일거시당(느낌이 오길!...)

만약 위에 보이는 num:4 의 title을 "로제 만만세", cont를 "로제님 생각에 노이로제" 로 바꾸려면

코드를 어떻게 짜면 될깡? 코드를 보기 전에 먼저 생각해 보장!

localStorage를 다룰때는 값을 덮어쓰는 거시 거의 핵심이라 할 수 있겠당!

 /*
   localUtil 부분 생략
 */
 
 //먼저 localStorage에서 읽어 오깅 
 let readData = localUtil.read(tableName);

 // num 속성값 4인 것 찾아내깅
 for(let i=0; i<readData.length; i++){
    if(readData[i].num == 4){ // 찾았다면
        readData[i].title = "로제 만만세";
        readData[i].cont = "로제님 생각에 노이로제";
        break; // 더 할 필요없음!
    }
 }

 // 바뀐 데이타로 더퍼쓰깅!
 localUtil.save(tableName, readData);

객체지향DB는 비정형데이타에 적합하고, 관계형DB는 정형데이터에 적합하단 의미는?

관계형DB의 table만 흉네내어 보았는데, DB를 흉네낸다면 어케?

너무나도 안타깝게도 자바스크립트만 잘해도,

자바도, 오라클도, 다른 언어들도, 개념도 절로 눈에 들어오게 된다는 걸 가슴만 안당.

가슴은 눈이 없어 보이는 것에 현혹되지 않고, 귀도 없어 솔깃하지 않으니

가슴이 느끼고 진동한다면 가슴이 가는 대로 Let It Go ~~

후회는 땀과 같은 것!

https://www.youtube.com/watch?v=hl9EXRLRZlI

'자바스크립트' 카테고리의 다른 글

시베리안 허숙희의 자바스크립트 비기닝 27 ( 스크립트 게시판!) (0)	2023.06.22
시베리안 허숙희의 자바스크립트 비기닝 26 (리팩토링...) (0)	2023.06.21
시베리안 허숙희의 자바스크립트 비기닝 24 (JSON 유틸) (2)	2023.06.20
시베리안 허숙희의 자바스크립트 비기닝 23 (ArrayList, HashMap도..) (0)	2023.06.19
시베리안 허숙희의 자바스크립트 비기닝 22 ( sort 확장...) (1)	2023.06.18