Vue sessionStorage 기반 검색 상자 검색 내용 유지

1531 단어 VuesessionStorage보류 하 다.
최근 에 필요 한 것 이 있 습 니 다.배경 관리 시스템 이기 때문에 페이지(경로)를 자주 전환 하고 길 을 다시 전환 하면 페이지 를 다시 불 러 옵 니 다.다시 입력 하 는 조건 이 번 거 로 우 므 로 검색 상자 의 내용 을 유지 해 야 합 니 다.(잔말 말고 항목 별 수 요 를 살 펴 보 자)
검색 상자 내용 유지:
session Storage 를 이용 하여 매번 검색 상자 의 내용 을 저장 합 니 다.
백 스테이지 관리 시스템 의 검색 창 은 필터 조건 외 에 도 검색 버튼 이 있 을 거 예요.

제 키 이름 은 제 페이지 경로 이름+'Stor'에 따라 이름 을 지 었 습 니 다.이 연결 되 는'Stor'는 개인 적 으로 이 접미사 의 키 이름 이 어떤 내용 을 저장 하 는 지 구분 할 수 있 습 니 다.원 하 는 대로 할 수 있 습 니 다.
예 를 들 어 길 은 carManage 키 이름 이 carManageStor 입 니 다.
한 페이지 만 이 효 과 를 실현 하 는 것 이 아니 기 때문에 페이지 에 들 어 갈 때 값 을 한 번 추출 하고 브 라 우 저 에 저 장 된 데 이 터 를 가 져 옵 니 다:session Storage.getItem('키 이름')
보기 위해 서 가 져 온 방법 을 method 에 썼 습 니 다.

getDefaultStor(routeName) {
  return sessionStorage.getItem(`${routeName}Stor`)
}
routeName 인 자 는 경로 이름 을 보 세 요.this.$route 에서 가 져 가세 요.
캐 시 내용 지우 기:

watch: {
  name(val) {
    if(!val) {
      sessionStorage.removeItem('  ') //         
    }   
  } 
}
또 하 나 는 사용자 가 입력 상자 의 내용 을 지 웠 을 때 값 을 지 웠 다 는 것 이다.
제 방법 은 입력 상자 의 name 값 을 감청 해서 비 워 두 는 것 입 니 다.
편리 한 방법 은 name 의 변 화 를 직접 감청 하 는 것 입 니 다.값 이 있 으 면 sessionStorage.setItem(),값 이 없 으 면 sessionStorage.removeItem()입 니 다.
그러나 나 는 이렇게 하면 에 너 지 를 비교적 소모 해 야 한다 고 생각한다.이런 게 으 름 피 우 는 방식 은 쓰 지 않 았 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
2 분 빨리 ERP 가 뭔 지 알 게 해 줄 게.
ASP.NET Core 에서 표현 식 트 리 를 사용 하여 URL 을 만 드 는 방법 에 대한 자세 한 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage