using sessionStorage for refresh, backtrack

[ghost]

using sessionStorage

sessionStorage는 다음과 같이 쓸 수 있습니다.

sessionStorage.setItem(str,str)
sessionStorage.getItem(str)

현재 저장된 값은 username, token, mytrips, tripID, triptitle입니다. 이 값은 초기에는 null로 되어 있고 login 후, trip title 클릭 후 업데이트 되며 logout시sessionStorage.clear()를 사용하여 다시 null로 초기화됩니다. (key별로 초기화하지 않아도 됨)

[ghost]

user page problem solved with sessionStorage

• sessionStorage를 이용하여 user page와 add trip을 구현하였습니다.
• add trip 결과가 바로 반영되며, refresh를 하거나 trip homepage에서 다시 user page를 가도 list가 유지됩니다.

[choppaluv]

Session Storage in Rules, Adduser, Todos, Schedules

Rules, Adduser, Todos, Schedules store에 해당하는 부분에 각각 sessionStorage를 추가하여 page refresh이후에도 해당 data들이 유지되는 것을 확인할 수 있었습니다.

[choppaluv]

Shortcut(Tips) for using Session Storage

saga에서 sessionStorage를 하는 action을 put할 때, component에서 sessionStorage의 data를 꺼낼 때 각각 string으로 변환, string에서 변환하는 과정을 하는 대신 reducer와 container의 수정만으로 이를 쉽게 해결할 수 있습니다. reducer에서 sessionStorage.setItem('key', JSON.stringify(data))와 같은 형태로 작성해주면 data가 list 혹은 object 등 다른 어떤 형태이던 string 형태로 넣어줄 수 있습니다. container에서는 JSON.stringify의 reverse과정인 JSON.parse()를 이용할 수 있습니다. 즉, var tmp = sessionStorage.getItem('key'); 해준 후 JSON.parse(tmp)를 container의mapStateToProps에 넣어주면 component에서는 그 data를 string형태가 아닌 원래 data를 가져올 수 있습니다. JSON.stringify와 JSON.parse를 사용하면 saga에서는 기존 data형태로 action을 put하고 component는 수정할 필요없이 기존 data 형식대로 container에서 값을 가져올 수 있습니다. 자세한 사항은 store/rules/reducer.js와 container/Rulelist.js를 참고하시면 됩니다.

[ghost]

Partial update with JSON

• []로 초기화 후 single json element를 push하도록 하면 storage 전체를 바꾸지 않고 내용을 update 할 수 있습니다.
• 위의 방식으로 addtrip session을 수정하였습니다.
• 초기값 null인 경우 rendering하지 않이야 map 오류가 나지 않습니다. 참고하시기 바랍니다.

[ghost]

Stay in current Menu after refresh, backtrack

• 현재 메뉴를 key menu로 저장하여 새로고침하거나 뒤로가기 후 다시 trip title을 눌렀을 때 유지되도록 하였습니다.
• home에서 user button을 이용하여 user page에 간 후 다시 trip에 들어올 때는 home으로 초기화됩니다.
• 로그인 후 처음 home에 들어왔을 때 rendering이 되지 않은 것은 sessionStorage 초기값 null을 생각하지 못해서였습니다. #27 을 참고해주세요.

[ghost]

Problem with undefined sessionStorage

• 처음 로그인했을 때나 로그아웃한 후에는 sessionStorage가 null이기 때문에 JSON parse를 하면 uncaught error가 납니다.

• 다음과 같이 사용전에 undefined인지 체크를 해줍시다. (주로 container에서 사용)

const mapStateToProps = (state) => {
  var sche = []
  console.log(sessionStorage.getItem('tripSchedules'))
  if (sessionStorage.getItem('tripSchedules')!=="undefined"){
    sche = JSON.parse(sessionStorage.getItem('tripSchedules'))
  }
  console.log("SCHE########",sche,state.schedules.schedules)
  return {
    schedule : sche,
    updated : state.schedules.updated
  }
}