created시 로컬스토리지 키값 순서가 바뀌는 이유가 궁금합니다!

Question

강좌 잘보고있습니다! 다름아니라 새로고침할때마다 로컬스토리지의 인덱스 값이 뒤죽박죽 바뀌어서 혹시 다른분들도 겪으시는 문젠가 싶어 질문들을 뒤져보니, 전에 다른분께서 이미 여쭤보셨더라구요! 그때 캡틴판교님께서 답변으로 브라우저마다 key를 가져오는 방식이 달라서 sort()를 이용해보라고 하셨는데, 직접 해결해보려고 구글링도 열심히 해보고, 수시간동안 여러가지 시도를 해봤는데 해결이 안되서 질문드립니다! created시 로컬스토리지 키값 순서가 바뀌는 구체적인 이유와, 이 문제에 대해 sort메서드를 적용할 수 있는 방법을 알수있을까요?

캡틴판교 · Answer

안녕하세요 Park June houng님, 좋은 질문이네요! 말씀하신 것처럼 지난번에도 동일한 유형의 질문이 있었는데요. 그 질문 내용도 함께 살펴보시면 좋을 것 같습니다 :) 일단 질문하신 내용 중에 브라우저 별로 로컬 스토리지의 값의 순서가 일관되지 않다 라는 부분이 있었는데요. 해당 내용은 로컬 스토리지의 스펙 중 localStorage.key() API가 그렇게 구현되어 있어서 그렇습니다. 브라우저의 동작 방식까지 저희가 변경하기는 어렵습니다. 그래서 제가 권고드리는 방식은 sort() API로 데이터를 받아오고 나서 일관된 순서로 정렬하는 것입니다. 그냥 간단하게 생각해서 this.todoItems.sort() 이런식으로 호출하시면 될 것 같구요. 좀 더 특정 기준으로 정렬을 하시고 싶다면 아래 문서를 한번 확인해서 sort() API 안에 콜백 함수를 넣어주시면 될 것 같습니다 :) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort 강의 수강해주셔서 감사드립니다! :)