Displaying the most recent queries retrieved from a search API

Our web application built on angular.js utilizes a REST search API to query users within the system.

The endpoint for searching users is:

search/user?q='abc'

Upon revisiting the web application, we aim to display the user's recent search results.

Questions to consider :

Can this functionality be achieved within Angular.js or does it require a separate backend API to retrieve and display recent searches? If a backend solution is needed, should the data be stored in a database with timestamps for retrieval?

Answer №1

In my perspective, it is essential to focus on client-side development and use the "storage" feature provided by web browsers. There are three main options available for this purpose (although there may be others that I have overlooked).

  1. Utilizing cookie storage
  2. Implementing session storage
  3. Leveraging local storage

To delve deeper into these three options, refer to the following answer:

However, one drawback of utilizing these techniques is that the user's search history may not be permanently saved. Therefore, if the user accesses your web application through a different platform (such as an Android mobile app), their previous searches may not be retrievable.

Answer №2

Short version: I've developed a library specifically designed to handle recent searches and their edge cases. Check out https://github.com/JonasBa/recent-searches#readme for instructions on how to use it.

While the examples provided are valid, they don't cover all possible scenarios when storing recent searches. Things like implementing expiration, ranking, or limits for LocalStorage space need to be considered. One major drawback of using LocalStorage is that it's limited to the browser and device where the searches originate from. For example, if you search on your desktop and then switch to your mobile device, recent searches won't sync between the two. The same applies to different domains since LocalStorage is specific to each domain.

When implementing recent searches, remember to consider factors such as:

Expiration: Old queries may become obsolete over time, so having a system in place to manage this is crucial.

Ranking: Prioritizing more recent or relevant searches can enhance the user experience, especially when dealing with similar queries.

Efficiently managing LocalStorage: Simply adding data to LocalStorage without proper organization can lead to performance issues as the storage grows. This can eventually impact your application's speed and usability.

The recent-searches library addresses these challenges and provides solutions to help you create efficient recent searches functionality quickly and effectively!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transforming an older React website with react-helmet-async

I am working on a React site that is client-side rendered and I want to use the react-helmet-async module (version 1.0.7). Here's my scenario in the React app: /public/index.js: <head> <title>My title in the index file</title> ...

Is there a way to modify an element in an array in AngularJS without using splice?

I encountered a situation similar to the one described in this post here, where I not only want to retrieve an element but also change its name value. I came across a method that involves using splice: dataList.splice(index, 1); dataList.splice(index, 0, ...

How to eliminate rows with images in Exceljs

I created a worksheet with an image in each row. However, when I filter or remove a row, the image for that row stays visible. I tested this on versions v4.4.0 and v4.3.0 I attempted various methods of adding images, but none of them seemed to work. Initi ...

Executing Tests Using Selenium GRID

I've been trying to run my Selenium Test on a grid instead of locally. I've set up the HUB and NODE, started with CMD, and ensured that I'm using the correct IP addresses. Despite all my efforts, I can't seem to get it to run. Could the ...

Get the page downloaded before displaying or animating the content

Is there a method to make a browser pause and wait for all the content of a page to finish downloading before displaying anything? My webpage has several CSS3 animations, but when it is first loaded, the animations appear choppy and distorted because the ...

Sharing state between components in NextJS involves using techniques like Context API, passing

I am trying to pass state between pages in Next.js. In my App.js, I have wrapped it in a context provider like this: import { useRouter } from 'next/router' import { ClickProvider } from '../context/clickContext' function MyApp({ Compo ...

Why is it necessary to call the .call(this) method when extending a THREE.js "class"?

Currently, I am in the process of creating a new object that should inherit from THREE.Object3D(). In my code snippet, you can see how I have set it up: function myNewObject() { THREE.Object3D.call(this); //... } myNewObject.prototype = new THREE.O ...

Utilizing CSS transitions to smoothly adjust the width of an element until it completely fills the container div in ReactJS

import React from 'react'; import PropTypes from 'prop-types'; import SearchIcon from '@material-ui/icons/Search'; import InputBase from '@material-ui/core/InputBase'; import { AccountCircle } from '@material-ui ...

Android's Essential Settings

Greetings! This is my debut post. As a rookie Android developer, I've been immersed in creating a live wallpaper for the past few weeks. The live wallpaper itself is complete, but now I'm looking to enhance it with some customization options. I& ...

Tips on automating the process of moving overflowing elements into a dropdown menu

Challenge Description In need of a dynamic navigation bar, I faced the problem of displaying only the first X items on one line and have the remaining items hidden in a "Show more" dropdown. The challenge was to calculate the width of each item accurately ...

Manipulate the value(s) of a multi-select form field

How can you effectively manage multiple selections in a form field like the one below and manipulate the selected options? <select class="items" multiple="multiple" size="5"> <option value="apple">apple</option> <option va ...

Tips on sending the total value of a form to a PHP script

Looking for help with a PHP script to calculate the sum of checked checkboxes with corresponding numeric values. For example, if checkbox 1 = 80; checkbox 2 = 21; and checkbox 3 = 15, and the user checks checkboxes 2 and 3, the PHP should output 36. I hav ...

The x-axis values in Amchart are transitioning rather than shifting

I'm facing an issue with my x-axis values as I'm using real-time amcharts. The x-axis values change every 3 seconds, but instead of smoothly moving, they abruptly change to the next value. I would like it to slide smoothly like this example: htt ...

JS call for Bootstrap 5 collapse toggle not functioning as expected

I'm exploring the use of JavaScript to display or hide a collapsible element without toggling between the two states. In other words, I want to prevent the toggle functionality. According to the information provided in the documentation at https://ge ...

Conceal flexbox item depending on neighboring element dimensions or content

I've encountered an issue while using a flexbox to display two elements side by side. The left element contains text, while the right one holds a number. When the value in the right element has at least 7 digits ( > 999,999 or < -999,999), I ne ...

What is the best method for arranging multiple images in a grid while keeping them within a specific maximum width and height?

I've been staring at this problem for a while now, attempting every possible solution to resize images and maintain aspect ratio, but none seem to work in my case. Here are two images that I manually resized so you can view them side by side: highly ...

After installing all essential plugins and drivers, I encountered an ERROR when attempting to run the Feature file

I'm currently using IntelliJ IDEA as my development environment. Despite having all the necessary plugins and drivers installed, I'm unable to pinpoint the reason for this error. Please refer to the code snippet provided in the image below: Ex ...

Maintain the same javascript variable throughout multiple pages

I am working on a project that involves utilizing a database along with 2 drop down menus. Through the use of JavaScript, I am able to capture the value selected from the drop down menus and then pass it on to my PHP script. The PHP script retrieves releva ...

Converting an Angular JSON encoded array to PHP format

I need to send a JS array to the server in this format: "['id' => ['users'=>[] ]]" In my Angular code, I have an id: var id = '3534534543535'; How can I convert my id to the expected PHP format? ...

Issues have been raised with IE11's refusal to accept string(variable) as a parameter for the localStorage

Why is it that Internet Explorer does not recognize a string variable as a parameter for the setItem method, even though it works fine in Chrome? For example, in IE: This code snippet works: var itemName = 'anyname'; localStorage.setItem(itemN ...