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

목차

목표

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];
}

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