I wrote a script I use on an e-commerce site where hundreds of products are added in largely random order throughout the day. The product SKUs just happen to be

I wrote a script I use on an e-commerce site where hundreds of products are added in largely random order throughout the day. The product SKUs just happen to be in data-* HTML attributes, so I chuck them into an array that gets stored in localStorage. On each subsequent refresh, any product with a SKU that wasn’t seen previously gets a CSS background applied to its container, and is moved to the top of the listing. The new items’ SKUs are merged back into the locslStorage array, ready for the next refresh. There are also category listings on the side of this page that include a count of the items in each category, so I store those values in localStorage as well, and compute the delta on each refresh. The category is then highlighted with a pale green or pale red background if the count increased or decreased, respectively. Finally, I append the delta amount to the element’s text. “Widgets and Frambulators (17)” turns into “Widgets and Frambulators (17) (+5)” if five new items are in that category since the last page load. Thankfully, this site uses CSS Grids for this particular product listing, so moving a container to the top is as simple as setting its order property to 1.