AL DI AL DI - 1 month ago 5
Ajax Question

Storing a php array client side

I have a web page that queries a database to get a list of products with their related data like price, size,weight e.t.c and displays it to the user, I want to add one of those sort dropdown list so that a user can sort the products by price or any other key I specify.

I plan to do it using Ajax on dropdown change query the database again and use the selected value as the sort key in the query.
My question is, is there a way that this can be done client side without running another query? Can php send the query result to the browser and store it there and then use jquery to sort it over and over again?

Thanks everyone for the help!


There are many ways this can be achieved. A simple example can be done with HTML5 LocalStorage.

Here's a general overview of how that can be done:

  1. You make an initial call to your DB for products via AJAX, returns a JSON object.
  2. You serialize that JSON object via javascript e.g. var stringData = JSON.stringify(data)

  3. Store said variable into localstorage: window.localStorage.setItem("products", stringData);

  4. You can then later access it via var products = window.localStorage.getItem("products) and finally deserialize it with var productsObj = JSON.parse(products) or do it all in one c-c-c-c-c-combo breaker: productsObj = JSON.parse(window.localStorage.getItem("products))

  5. Do as you please by using filtering functions!

Another way is to store the initial JSON object using some form of store e.g. Redux, but let's save that for another day ;)

And of course, you may optionally have a globally accessible object that you can assign the initial JSON data to as a property and later access as you would any other property.