인프런 커뮤니티 질문&답변

안녕하세요.

로컬스토리지?에 데이터를 넣고 싶은데 하는 방법을 몰라 문의드립니다

코드는 아래와 같이 짜져 있고 로컬스토리지?에 저장해서 삭제하면 삭제된 데이터가 안보이게 하고 싶은데..추후에 추가 기능도 만들 예정입니다..ㅠㅠ

검색을 해도 모르겠고..어려워서 문의 남겨 봅니다 ㅠㅠ

/*sessionStorage.clear();*/

var list = [
    {
      id: 300,
      name: '대성갈비',
      old: 18000,
      email: '백반',
      status: 'ㄱ월요일 휴일',
      birthday: '2018-04-12'
    },
    {
      id: 500,
      name: '세븐갈비',
      old: 20000,
      email: '갈비',
      status: 'ㄱ월요일 휴일',
      birthday: '2018-04-1'
    },
    {
      id: 400,
      name: '퍼니주',
      old: 10000,
      email: '오므라이스',
      status: 'ㄴ화요일 휴일',
      birthday: '2018-04-11'
    },
    {
      id: 200,
      name: '멘야코노하',
      old: 18000,
      email: '돈까스',
      status: 'ㄴ화요일 휴일',
      birthday: '2018-04-12'
    },
    {
      id: 150,
      name: '춘배버거',
      old: 18000,
      email: '햄버거',
      status: 'ㄷ수요일 휴일',
      birthday: '2018-04-12'
    },
    {
      id: 150,
      name: '술래감자탕&순대국',
      old: 18000,
      email: '감자탕',
      status: 'ㄹ목요일 휴일',
      birthday: '2018-04-12'
    },
    {
      id: 7,
      name: '빠오즈푸',
      old: 18000,
      email: '돈까스',
      status: 'ㄱ연중무휴',
      birthday: '2018-04-12'
    },
    {
      id: 8,
      name: '하늘분식',
      old: 18000,
      email: '갈비',
      status: 'ㄱ연중무휴',
      birthday: '2018-04-12'
    },
    {
      id: 9,
      name: '서울숲쭈꾸미',
      old: 18000,
      email: '쭈꾸미',
      status: 'ㄱ연중무휴',
      birthday: '2018-04-12'
    }
  ];
  
  Vue.component('modal', {
    template: '#modal-template'
  });
  
  new Vue({
    el: '#ssfcrud',
    data: {
      list: list,
      item: {},
      checkedList: [],
      filterToggle: false,
      filterByName: [],
      filterByStatus: [],
      sortById: false,
      sortByName: false,
      sortByOld: false,
      sortByStatus: false,
      sortByEmail: false,
      notification: false,
      showModal: false,
      modalType: 0,
      isFormValid: false
    },
    computed: {
      listView: function () {
        var self = this;
        if (self.filterByName.length > 0 || self.filterByStatus.length > 0) {
          return self.list.filter(function(item) {
            return self.filterByName.indexOf(item.name) > -1 || self.filterByStatus.indexOf(item.status) > -1;
          });
        } else {
          return self.list;
        }
      },
      checkedAll: {
        get: function () {
          var self = this;
          if (self.checkedList.length > 0) {
            return self.listView.length == self.checkedList.length;
          } else {
            return false;
          }
        },
        set: function (val) {
          var self = this;
          self.checkedList = [];
          if (val) {
            for (var i = 0; i < self.listView.length; i++) {
              self.checkedList.push(self.listView[i].id);
            }
          } else {
            self.checkedList = [];
          }
        }
      }
    },
    watch: {
      sortById: function (val) {
        var self = this;
        self.listView = self.sortBy(self.listView, 'id', val);
      },
      sortByName: function (val) {
        var self = this;
        self.listView = self.sortBy(self.listView, 'name', val);
      },
      sortByOld: function (val) {
        var self = this;
        self.listView = self.sortBy(self.listView, 'old', val);
      },
      sortByEmail: function (val) {
        var self = this;
        self.listView = self.sortBy(self.listView, 'email', val);
      },
      sortByStatus: function (val) {
        var self = this;
        self.listView = self.sortBy(self.listView, 'status', val);
      }
    },
    methods: {
      sortBy: function(array, param, reverse) {
        var filterA, filterB;
        return array.sort(function (a, b) {
          switch (param) {
            case 'id':
              filterA = a.id;
              filterB = b.id;
              break;
            case 'name':
              filterA = a.name;
              filterB = b.name;
              break;
            case 'old':
              filterA = a.old;
              filterB = b.old;
              break;
            case 'status':
              filterA = a.status;
              filterB = b.status;
              break;
          }
          if (reverse) {
            return (filterA > filterB) ? 1 : -1;
          } else {
            return (filterA < filterB) ? 1 : -1;
          }
        });
      },
      checkEmailValid: function (email) {
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
      },
      openModal: function (item) {
        var self = this;
        if (item) {
          self.item = item;
          self.modalType = 2;
        } else {
          self.item = {
            id: self.list[self.list.length - 1].id + 1,
            name: null,
            old: null,
            email: null,
            status: 'created'
          };
          self.modalType = 1;
        }
        self.showModal = true;
      },
      submit: function (item) {
        var self = this;
        if (item.id == null
          || item.name == null
          || item.old == null
          || item.email == null
          || !self.checkEmailValid(item.email)) {
          self.isFormValid = true;
        } else {
          if (self.modalType == 1) {
            self.list.push(item);
          } else if (self.modalType == 2) {
            self.list.find(function (value, index) {
              if (value.id == item.id) {
                self.list[index] = item;
              }
            });
          } else {
            return;
          }
          self.item = {};
          self.showModal = false;
        }
      },
      deleting: function (index) {
        var self = this;
        var confirmDelete = confirm("삭제 하시겠습니까?");
        if (confirmDelete) {
          sessionStorage.setItem(index, index)
          self.list.splice(index, 1);
        }
      }
    },
    filters: {
      getDayOfBirthday(val) {
        var temp = val.slice(4);
        var toYear = new Date().getFullYear();
        var thisBirthday = toYear + temp;
        var _getDay = new Date(thisBirthday).getDay();
        var todayDays = ['Chu Nhat', 'Thu 2', 'Thu 3', 'Thu 4', 'Thu 5', 'Thu 6', 'Thu 7'];
        return todayDays[_getDay];
      }
    }
  });