너무 많이 재 장전하는 습관에서 사용자를 해소하는 한 가지 방법

페이지 새로 고침은 일입니다. 때로는 반응이 없다고 생각하거나 새로운 콘텐츠를 사용할 수 있다고 생각할 때 페이지를 새로 고침합니다. 때때로 우리는 Dang 사이트에 화가 났고 Rage-Refresh는 우리가 불쾌한 사실을 알리기 위해 화를냅니다.

사용자가 페이지를 새로 고치는시기를 아는 것이 좋지 않습니까? 그뿐만 아니라 몇 번? 이 데이터는 특정 수의 재 장전 후에 일종의 동작을 유발하는 데 도움이 될 수 있습니다.

스포츠 사이트가 좋은 예입니다. 진행중인 게임의 점수를 확인하고 싶지만 점수가 업데이트되지 않은 경우, 나는 무리를 상쾌하게 할 수 있습니다.

우리의 목표는 사용자를 그 습관에서 벗어나는 것입니다. 실시간 점수 업데이트 덕분에 Page-Refresh-Counting Power를 사용하여 새로 고침이 불필요하다는 것을 사람들에게 알리겠습니다. 그리고 그들이 세 번 이상 재 장전되면? 우리는 그들의 세션에서 쫓아 낼 것입니다. 그것은 그들에게 보여줄 것입니다.

다음은 그 개념의 간단한 데모입니다.

함께 다시 만들어 봅시다. 그러나 우리가 가기 전에 코딩을 시작하기 전에 답해야 할 질문은 몇 가지 있습니다.

• 사용자가 사이트를 다시로드 한 횟수를 어떻게 유지할 수 있습니까? 사용자가 사이트를 리로드 한 횟수 (ReloadCount)를 유지할 수있는 장소가 필요합니다.이 장소는 재 장전 사이에 해당 값을 지속해야합니다. LocalStorage는 좋은 솔루션처럼 들립니다.
• 사용자가 사이트를 다시로드했는지 또는 몇 시간 후에 방금 돌아 왔는지 어떻게 감지합니까? ReloadCount를 LocalStorage에 저장하면 Reload 사이의 값이 유지되지만 프로그래밍 방식으로 제거하거나 브라우저 스토리지를 지울 때까지 해당 값을 유지합니다. 몇 시간 후에 돌아 오면 사이트는 여전히 마지막 재 장전 계산을 기억하고 경고없이 첫 번째 새로 고침 후 로그 아웃을 수행 할 수 있음을 의미합니다. 우리는 그것을 피하고 사용자가 일정 기간이 지나면 사용자가 다시 돌아올 때마다 사이트를 두 번 다시로드 할 수 있도록합니다. 그 마지막 문장은 질문에 대한 답을 가지고 있습니다. 사용자가 사이트를 떠난 시간을 저장 한 다음 사이트가 다시로드되는 시점을 다시 확인해야합니다. 그 기간이 충분하지 않으면 다시로드 카운팅 로직을 활성화합니다.
• 사용자가 언제 사이트를 떠날 때를 어떻게 알 수 있습니까? 이 시간을 저장하려면 Wefore Window Window 이벤트를 사용하고 해당 값을 LocalStorage에 저장합니다.

좋아, 이제 우리는 답을 얻었으므로 코드에 뛰어들합시다.

1 단계 : 마지막 재 장전 시간을 저장해야합니다

전후로드 윈도우 이벤트를 사용하여 Last Reload 시간을 저장합니다. (1) 이벤트를 듣고 적절한 방법을 해고하는 이벤트 청취자와 (2) 이전의 하중 핸들러 방법.

먼저 Window 개체에서 addeventListener 메소드를 사용하여 이벤트 리스너를 설정하는 InitializerEloadCount라는 기능을 작성하겠습니다.

 함수 initializerEloadCount () {
  window.addeventListener ( "전후", 전하드 핸들러 전)
}

그런 다음 사이트를 떠나기 전에 해고 될 두 번째 방법을 만듭니다. 이 방법은 로컬 스토리지에서 새로 고침이 발생하는 시간을 절약합니다.

 전기 전하드 핸들러 () {
  localstorage.setitem ( "lastunloadat", math.floor (date.now () / 1000)))
  window.removeEventListener ( "전부로드", 전 후드 핸들러 이전);
}

2 단계 : 재 장전 수를 처리하고 저장하는 방법이 필요합니다.

사이트가 마지막으로 닫힌 시간이되었으므로 사이트가 다시로드 된 횟수를 감지하고 계산하는 논리를 진행하고 구현할 수 있습니다. ReloadCount를 보유하고 사용자가 사이트를 다시로드했는지 알려주기 위해 변수가 필요합니다.

 ReloadCount = NULL을하자

그런 다음 InitializerEloadCount 함수에서는 두 가지 작업을 수행해야합니다.

1. 이미로드 카운트 값이 로컬 스토리지에 저장된지 확인하고 그렇다면 해당 값을 가져 와서 ReloadCount에 저장하십시오. 값이 존재하지 않으면 사용자가 처음으로 사이트를로드했음을 의미합니다. 이 경우 ReloadCount를 0으로 설정하고 해당 값을 LocalStorage에 저장합니다.
2. 사이트가 다시로드되었는지 또는 사용자가 오랜 시간이 지나면 사이트로 돌아 왔는지 감지하십시오. 이곳은 우리가 마지막으로 값을 필요로하는 곳입니다. 사이트가 실제로 다시로드되었는지 여부를 감지하려면 사이트가로드되는 시간 (현재 시간)을 LastUnloadat 값과 비교해야합니다. 이 두 가지가 5 초 내에 (완전히 임의적) 발생하면 사용자가 사이트를 다시로드하고 다시로드로로드해야합니다. 이 두 이벤트 사이의 기간이 더 길면 ReloadCount 값을 재설정합니다.

이를 통해 CheckReload라는 새 함수를 만들고 해당 논리를 유지하겠습니다.

 함수 checkReload () {
  if (localStorage.getItem ( "ReloadCount")) {
    ReloadCount = parseint (localStorage.getItem ( "repoadCount"))
  } 또 다른 {
    ReloadCount = 0
    localStorage.setItem ( "ReloadCount", ReloadCount)
  }
  만약에 (
    math.floor (date.now () / 1000) - localstorage.getitem ( "lastunloadat") <p> 이 단계에서 필요한 마지막 기능은 사용자가 사이트를 다시로드했는지 확인할 때 발생하는 일을 담당하는 방법입니다. 우리는 그 함수를 onreloadDetected라고 부르며 그 안에는 reloadCount의 값을 증가시킵니다. 사용자가 사이트를 세 번째로 새로 고치면 폭탄을 떨어 뜨리고 로그 아웃 로직을 호출합니다.</p><pre rel="JavaScript"> onreloadDetected () {
  ReloadCount = ReloadCount 1
  localStorage.setItem ( "ReloadCount", ReloadCount)
  if (ReloadCount === 3) {
    로그 아웃 ()
  }
}

3 단계 :“친애하는 사용자, 왜 듣지 않았습니까?!”

이 단계에서는 사용자가 사이트를 3 행 임계 값을 위반하는 시점으로 사이트를 다시로드 할 때 상황을 담당하는 논리를 구현합니다.

이 경우 API를 호출하여 사용자를 로그 아웃 한 다음 Reload Count Logic과 관련된 모든 속성을 정리합니다. 이를 통해 사용자가 다시 와서 재 장전에 대한 깨끗한 설명을 할 수 있습니다. 로그인 화면과 같이 사용자를 유용한 곳에서 리디렉션 할 수도 있습니다. (그러나 대신 여기로 보내는 것이 재미 있지 않습니까?)

 함수 로그 아웃 (Params) {
  // 로그 아웃 API 호출
  ResetReloadCount ()
}

함수 RestReloadCount () {
  window.removeeventListener ( "전후", 전하드 핸들러 전)
  localstorage.removeitem ( "Lastunloadat")
  LocalStorage.removeItem ( "ReloadCount");
}

보너스 : 다시 ...

이제 논리가 구현 되었으므로이 예를 기반으로 해당 논리를 VUE 사이트로 어떻게 이동할 수 있는지 살펴 보겠습니다.

먼저, 모든 변수를 구성 요소의 데이터로 옮길 필요가 있는데, 이는 모든 반응성 소품이 살아있는 곳입니다.

 내보내기 기본값 {
  데이터 () {
    반품 {
      ReloadCount : 0,
      경고 : [...]
    }
  },

그런 다음 모든 기능을 방법으로 옮깁니다.

 // ...
  방법 : {
    전후에 hollowhandler () {...},
    CheckReload () {...},
    로그 아웃 () {...},
    OnReloadDetected () {...},
    RestReloadCount () {...},
    InitializerEloadCount () {...}
  }
// ...

VUE 및 그 반응성 시스템을 사용하고 있기 때문에 모든 직접 DOM 조작 (예 : Document.GetElementById ( "App"). InnerHTML)을 삭제하고 경고 데이터 속성에 따라 다릅니다. 적절한 경고 메시지를 표시하려면 ReloadCount가 변경 될 때마다 다시 계산할 수있는 계산 된 속성을 추가하여 경고 관리에서 문자열을 반환 할 수 있습니다.

 계산 : {
  경고 () {
    warningmessages [this.reloadCount];
  }
},

그런 다음 구성 요소의 템플릿에서 계산 된 속성에 직접 액세스 할 수 있습니다.

 <emplate>
  <div>
    <p> {{warlingmessage}} </p>
  </div>
템플릿></emplate>

마지막으로해야 할 일은 재 장전 예방 로직을 활성화하기에 적절한 장소를 찾는 것입니다. Vue에는 정확히 필요한 구성 요소 수명주기 후크, 특히 생성 된 후크가 제공됩니다. 그것을 떨어 뜨리겠습니다.

 // ...
  생성 된 () {
    this.initializereloadcount ();
  },
// ...

멋진.

마무리

그리고 페이지가 몇 번이나 새로 고쳐 졌는지 확인하고 계산하는 논리가 있습니다. 나는 당신이 타는 것을 즐겼기를 바랍니다.이 솔루션이 유용하거나 최소한 더 나은 일을하도록 영감을 느낍니다. ?

위 내용은 너무 많이 재 장전하는 습관에서 사용자를 해소하는 한 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!