如何使用 javascript 保存最近的搜索？

Posted 2023-02-22

【中文标题】如何使用 javascript 保存最近的搜索？

【英文标题】：How to save recent searches with javascript?

【发布时间】：2012-11-13 10:50:02

【问题描述】：

当用户执行搜索时，应保存这些搜索设置以备将来使用。

用户应填写一些表单字段，然后执行搜索。当他执行新的搜索时，旧的应该可以，等等。

我正在使用 javascript，jQuery。

我怎么能这样做？

我的意思是保存在本地机器，而不是数据库中。

【问题讨论】：

您是否尝试过查看本地存储 API？最好的办法是尝试做某事，当你遇到困难时发布代码以及卡在哪里，人们往往很乐意提供帮助，但如果还没有代码，那就很难了 :)

但我只是不知道如何开始：我是一个初学者，我在这里寻求一点帮助，只是为了开始

【参考方案1】：

使用 html5 本地存储来存储和读取保存的搜索。：

// Write a local item..
localStorage.setItem("myKey", "myValue");

// Read a local item..
var theItemValue = localStorage.getItem("myKey");

// Check for changes in the local item and log them..
window.addEventListener('storage', function(event) 
    console.log('The value for ' + event.key + ' was changed from' + event.oldValue + ' to ' + event.newValue);
, false);

// Check for HTML5 Storage..
function supports_html5_storage() 
    try 
        return 'localStorage' in window && window['localStorage'] !== null;
     catch (e) 
        return false;
    

【参考方案2】：

你可以试试这个插件https://sites.google.com/site/daveschindler/jquery-html5-storage-plugin

您的目标是保存搜索，一旦他们在您执行操作之前输入它们，因此请提交表单，使用插件将其保存到本地存储，然后执行搜索。

您还需要在每次用户访问页面时从存储中加载，以获取最后几次搜索。

【参考方案3】：

您可以使用 cookie 或网络存储。更多浏览器支持 Cookie，但 Web Storage 更易于使用。如果你使用cookies，我推荐这个jQuery插件https://github.com/carhartl/jquery-cookie

保存设置$.cookie('key', 'value');

读取设置$.cookie('key');

使用所有主流浏览器最新版本支持的网络存储：

localStorage.setItem(key, value);
localStorage.getItem(key, value);

您可以使用 Google 查找有关 API 的更多详细信息

【参考方案4】：

TL；DR 我已经编写了一个库来处理这个 + 它的边缘情况，请参阅 https://github.com/JonasBa/recent-searches#readme 了解用法。

虽然所有示例在技术上都可以，但它们并未涵盖存储最近搜索的任何边缘情况，例如实现 LocalStorage 空间的过期、排名或限制。

示例 有效期： 考虑到有人搜索查询 iPhone，但在 1 个月前搜索了查询 repairing iPhone，那么修复 iPhone 查询可能已过时。

近期搜索排名 进行前缀搜索时的排名也是如此，如果用户在 3 小时前查询“Apple TV”和在 8 小时前查询“电视电缆”，而他们现在搜索“电视”，您可能希望实现一个排名系统两个。

安全处理存储 仅写入 LocalStorage 将导致您每次都需要解析大量 JSON，从而逐渐减慢您的应用程序，直到您达到限制并失去此功能。

正是因为这个问题，我构建了一个最近搜索库来帮助您解决所有这些问题。您可以通过 npm 使用它并找到它here。它将帮助您解决上述所有问题，并允许您非常快速地建立最近的搜索！