15

问题：
有什么方法可以从 javascript 触发 Webkit 的自动保存功能？如果不通过专用 API，是否至少有一种方法可以通过操作 cookie 来完成相同的功能？

背景：
我真的很喜欢 HTML5 中新的“搜索”输入类型，并希望让支持 Webkit 的用户能够轻松地回忆他们过去的搜索，而无需在我的数据库中存储所有这些搜索的开销（使用自动保存功能）。

我遇到的问题是，搜索词似乎只有在搜索输入封装在表单中并且该表单在提交时执行标准 POST 时才会保存。由于我的搜索输入用于过滤已经存在的结果，因此完全重新加载页面没有多大逻辑意义，因此我使用 AJAX 重新填充结果。如果我在我的 AJAX 函数中返回 false，则界面是干净且一致的，但这显然不会触发 POST [by design] 表单，因此浏览器（至少 Chrome）不会保存搜索词。返回 true 刷新整个页面，破坏我的 AJAX 注入内容和过滤器的整个点，但搜索词被保存。

$('#filter-form').submit(function(e) {
      var term = $('#filter').val();
      $.ajax({
        async: true,
        type: 'POST',
        url: '/Home/GetResults',
        data: {
          filter: term
        },
        success: function(returnData) {
          $('#result-list').html(returnData);
        }
      });
      return false;
    }
<form id="filter-form" name="filter-form" action="#">
  <input type="search" name="filter" id="filter" results="5" autosave="EluminitePreviousFilters" />
</form>
<div id="result-list"></div>

4

2 回答 2

8

有一个技巧是使用连接到表单的隐藏 iframe：

<iframe id="hidden-frame" name="hidden-frame" style="display:none" src="about:blank"></iframe>

<form target="hidden-frame" method="post" action="about:blank">
  <input type="search" name="filter" id="filter" results="5" />
  <button type="submit">Submit</button>
</form>

如果您的表单提交处理程序返回 true，则表单将被提交（但用户不会注意到），并且浏览器会将输入的值保存在自动完成列表中。

我在 JSBin 上创建了一个示例：http://jsbin.com/farelufaku/edit?html, output

于 2015-10-13T17:38:34.630 回答
1

演示： https ://so.lucafilosofi.com/how-to-autosave-html5-search-input-through-javascript-without-refresh/

嗨，Eluminite，我知道这可能是不可能的（？）但既然你说：

至少有一种方法可以通过操作 cookie 来完成相同的功能？

如果我没记错的话，您的主要目标是不在数据库中存储数据；你实际上可以使用

Web Storage API提供了浏览器存储键/值对的机制，比使用 cookie 更直观。

如您所见，许多现代浏览器都支持它，而在不支持它的地方，您仍然可以使用 cookie...

有关使用 jQuery UI 自动完成的代码实现，请参阅我的演示。

注意：当然有一些插件可以同时处理本地存储和cookie ，例如jQuery-Storage-API、jQuery Storage和许多其他插件。只需搜索谷歌。

希望这有帮助。

于 2015-10-20T14:32:10.563 回答