유저가 검색을 하였을 때, 해당 검색내용이 유효하면 localstorage에 검색값을 저장하고자 한다.
그런데 유저가 여러 번 같은 값을 검색하면 localstarage에 같은 검색어가 저장되게 된다.
이에 find()함수를 이용하여, 이미 존재하는 검색어이면 저장하지 않도록 할 것이다.
우선 find함수의 사용법을 알아보자.
find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.
const inventory = [
{name: 'apples', quantity: 2},
{name: 'bananas', quantity: 0},
{name: 'cherries', quantity: 5}
];
const result = inventory.find(fruit => fruit.name === 'cherries');
console.log(result) // { name: 'cherries', quantity: 5 }
위의 코드를 보면 arr.find()를 이용하여 배열 안에서 원하는 값을 뽑을 수 있다.
이제 실제로 사용해보자.
let getUser = [];
const savedUser = localStorage.getItem("username");
//localStorage에서 값 가져옴
if (savedUser !== null) {
getUser = JSON.parse(savedUser);
}
// localStorage에값이 존재하면 해당 값을 parse를 하여
// json 문자열 값을 JavaScript 값이나 객체로 생성합니다.
if (data !== undefined) {
//api에서 들어온 data가 있다면(즉, 검색어가 유효하다면)
const newObject = {
username,
server,
};
//검색된 서버와 게임아이디를 object로 생성
const exist = getUser.find(
(element) => element.username === newObject.username
);
console.log(exist);
if (exist) {
return;
}
//localStorage에서 가져온 값에 같은 게임아이디가 있는지 체크
getUser.push(newObject);
localStorage.setItem("username", JSON.stringify(getUser));
//없다면 localStorage에 새로운 object추가
}
성공!!!👍