当window.history.back()被调用时如何维护用户输入？

Question

我正在处理的网站上有两个HTML页面.第一页接受用户输入(开始和结束位置),然后将信息传递到Google Maps Javascript API,以确定两个位置之间的距离.

第二页显示该用户的信息.

但是,我也有一个Edit调用的按钮onclick="window.history.back()".

我遇到的问题是,用户输入的两个部分也使用Google自动填充功能来处理地址,因此当我转到下一页并单击Edit按钮时,用户输入将从输入框中删除,而没有Google自动填充功能,它仍然保持在那个位置.我认为问题出在Google自动填充功能本身,但我该如何解决？

以下是Google自动填充的Javascript:

google.maps.event.addDomListener(window, 'load', initialize);
// ==========================================================================================================
// ==========================================================================================================
// ==========================================================================================================
// USES THE GOOGLE PLACES LIBRARY
// ==============================
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autoCompleteOrigin, autoCompleteDest;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initialize() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autoCompleteOrigin = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('start')),
        { types: ['geocode'] });
  autoCompleteDest = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('destination')),
      { types: ['geocode'] });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autoCompleteOrigin, 'place_changed', function() {
    fillInAddress();
  });
  google.maps.event.addListener(autoCompleteDest, 'place_changed', function() {
    fillInAddress();
  });
}

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

Answer 1

要在页面重新加载时维护 edittext 字段中的值，您需要利用浏览器支持的各种本地存储机制。其中一些如下：

• 文件接口
• 索引数据库
• 网络存储
• 饼干

对于这个特定的场景，我将使用 Web 存储，您将在其中拥有基于持久会话的存储。edittext 字段中的数据将持续存在，直到用户完全关闭浏览器。

这是一个代码示例实现：

window.onbeforeunload = function() {
    localStorage.setItem(addresss1, $('#addresss1').val());
    localStorage.setItem(addresss2, $('#addresss2').val());

}

这是同步调用，因此每当用户切换回此页面时，您都可以检查数据是否仍然存在。请遵循此代码示例。

window.onload = function() {

    var name = localStorage.getItem(address1);
    if (name !== null) $('#address1').val(address1);

    // ...
}

getItemnull如果数据不存在则返回。