프로그래밍 & IT 정보/Javascript

로컬스토리지에서 배열로 저장하는 방법

아미넴 2020. 7. 3.
반응형

목차

    목표

    JSON Object를 활용하여 localStorage에 배열 형태로 값을 저장할 수 있습니다.

     

    방법

    JSON Object를 만들어 저장하고 불러오는 방식으로 구현하였습니다.

     

    Set 함수 구현

    key에 대응하는 value를 배열로 갖는 JSON Object를 만든 후 JSON String으로 변환하여 localStorage에 저장합니다.

    function setArray(key, value, limitMax){
      var str = localStorage.getItem(key);
      var obj = {};
      try {
        obj = JSON.parse(str);
      } catch {
        obj = {};
      }
      if(!obj){
        obj = {};
        obj[key] = [];
      }
      obj[key].push(value);
      if (limitMax && limitMax < obj[key].length) {
        let tempList = [];
        for(let i = obj[key].length-limitMax; i < obj[key].length; i++) {
          tempList.push(obj[key][i]);
        }
        obj[key] = tempList;
      }
      localStorage.setItem(key, JSON.stringify(obj));
    }

    추가로 배열 길이를 제한할 수 있는 기능을 구현했습니다.

    제한 길이가 넘어갈 경우 가장 먼저 입력 된 값을 제거합니다.

     

     

    Get 함수 구현

    localStorage에 저장 된 JSON String을 읽어들인 후 JSON Object로 파싱 후 배열을 리턴합니다.

    function getArray(key, reverse) {
      var str = localStorage.getItem(key);
      var obj = {};
      try {
        obj = JSON.parse(str);
      } catch {
        obj = {};
      }
      if(!obj){
        obj = {};
        obj[key] = [];
      }
      return reverse?obj[key].reverse():obj[key];
    }

    필요에 따라 역순 정렬도 가능하도록 구현했습니다.

    반응형

    댓글

    💲 추천 글