Question

我正在使用localStorage，我希望在关闭页面时更改计数器。

我发现<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><a href="#" data-id="content-1">How you drive</a> </li> <li><a href="#" data-id="content-2">Where you’ve been</a> </li> <li><a href="#" data-id="content-3">Who you know</a> </li> <li><a href="#" data-id="content-4">Where you get on the bus</a> </li> <li><a href="#" data-id="content-5">How is your car</a> </li> </ul> <div id="car" class="col-md-6"> <div id="outer-circle" class="point_1"> <div id="inner-circle"> <span id="content-1" class="tooltip-content clearfix"> <div class="triangle-left"></div> <h3>How you drive</h3> <ul> <li>Maximum engine revs</li> <li>Length of time the driver used the different driving modes</li> <li>Number of electromotive seatbelt tightening, e.g. due to sudden braking</li> </ul> <span>Threats: loss of warranty / law enforcement</span> </span> </div> </div> <div id="outer-circle" class="point_2"> <a id="inner-circle"> <span id="content-2" class="tooltip-content clearfix"> <div class="triangle-left"></div> <h3>Where you’ve been</h3> <ul> <li>The vehicle’s last approx. 100 parking locations</li> <li>The latest destinations entered into the satnav system</li> </ul> <span>Threats: big brother</span> </span> </a> </div> <div id="outer-circle" class="point_3"> <div id="inner-circle"> <span id="content-3" class="tooltip-content clearfix"> <div class="triangle-left"></div> <h3>Who you know</h3> <p>Mobile phone synced contact data (name, address, phone numbers, e-mail address and even personal images) </p> <span>Threats: hacking</span> </span> </div> </div> <div id="outer-circle" class="point_4"> <div id="inner-circle"> <span id="content-4" class="tooltip-content clearfix"> <div class="triangle-right"></div> <h3>Where you get on the bus</h3> <p>Where the driver changed to other means of transport such as bus or rail</p> <span>Threats: profiling</span> </span> </div> </div> <div id="outer-circle" class="point_5"> <div id="inner-circle"> <span id="content-5" class="tooltip-content clearfix"> <div class="triangle-right"></div> <h3>How is your car</h3> <ul> <li>Detailed data of the drive battery</li> <li>Mileage reading</li> <li>Quality of the charging voltage, failures</li> </ul> <span>Threats: expensive maintenance / unrequested offers</span> </span> </div> </div> </div> </div>是一个有用的事件，所以我决定调用我的函数。（onbeforeunload在firefox / chrome中对我不起作用）

但是当我尝试调用一个函数时，它什么也没做。

关闭/刷新标签时有没有办法调用函数？

onunload

更新

根据 Oday 的建议，我修复了绑定。但现在，它随机起作用。

在chrome中，它不会捕获刷新事件，但有时会捕获退出。

在Firefox中，它捕获退出，并随机捕获刷新。

class MyLib{
   constructor(){
        window.onbeforeunload = function() {
            this._onClosePage();
        };
   }

    _onClosePage() {
        let openWindowsCount = this._getItem('countOpenWindow');
        openWindowsCount--;
        if (openWindowsCount === 0) {
            this._clearUp();
        }
    }

    _clearUp() { 
        this._removeItem('countPagesVisited');
    }
}

Answer 1

为了清除localStorage上的beforeunload，而不是直接使用window.onbeforeunload，您应该使用window.addEventListener()方法来开始监听beforeunload事件。这还允许您在找到合适的对象后删除事件侦听器。

请参阅Mozilla开发人员文档中的以下说明：

绑定到此事件可用于阻止浏览器完全运行在使用javascript呈现内容的情况下缓存页面。在返回到已执行的页面时的某些情况 javascript为了填充内容，您可能会找到javascript 向后导航时未在回访时运行。如果 window.onbeforeunload已绑定（因此在离开时触发该页面）页面中的javascript将会在随后的页面中触发回访并因此更新内容。

此处全文：https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

这可能是您提到的随机性的原因。

作为示例，请参见上面的React组件，该组件在完成安装时添加事件侦听器，然后，在卸载后将其删除。这是一个非常基本的示例，但是我在Firefox 60，Chrome 69 canary，Safari 11.1上进行了测试，并且工作正常。

import React, { Component } from 'react'

class App extends Component {
  constructor(props) {
    super(props)
    this.handleLoad = this.handleLoad.bind(this)
    this.handleBeforeunload = this.handleBeforeunload.bind(this)
  }

  componentDidMount() {
    this.handleLoad()
    window.addEventListener('beforeunload', this.handleBeforeunload)
  }

  componentWillUnmount() {
    window.removeEventListener('beforeunload', this.handleBeforeunload)
  }

  render() {
    return (
      <div className="App">
        <p>
          Hello World!
        </p>
      </div>
    )
  }

  handleLoad() {
    let countOpenWindow = parseInt(localStorage.getItem('countOpenWindow'), 10)
    if (!countOpenWindow) {
      countOpenWindow = 0
    }

    localStorage.setItem('countOpenWindow', ++countOpenWindow)
  }

  handleBeforeunload() {
    let countOpenWindow = parseInt(localStorage.getItem('countOpenWindow'), 10)
    if (countOpenWindow > 1) {
      localStorage.setItem('countOpenWindow', --countOpenWindow)
    } else {
      localStorage.removeItem('countOpenWindow')
    }
  }
}

export default App

Answer 2

您需要在onbeforeunload事件处理程序中捕获类的上下文。目前，'this'指的是触发事件的窗口。

constructor(){
    let that = this;
    window.onbeforeunload = function() {
        that._onClosePage();
    };
}

清除localStorage onbeforeunload

2 个答案: