Как правильно реализовать сохранение последних просмотров?

Question

[di]

Хочу хранить в localstorage последние просмотренные товары.
Ну соответственно они должны быть уникальны и в порядке по дате просмотра отсортированы. хранить надо просто id товаров.
Пока сделал такую хромую реализацию

function addProductView(id) {
    // сообщаем о просмотре
    $.ajax({
        url: '/url/save/to/back',
        type: "POST",
        data: {
            product_id: id,
        },
        success: function (response) {
            if (response.error) {
                console.error(response.error);
            }
        },
        error: function (e) {
            console.error(e);
        }
    });
    // записываем в последние просмотренные
    let lastProducts = JSON.parse(localStorage.getItem('last_products'));
    // проверяем что вернулся ассоциативный массив (object)
    // https://medium.com/javascript-in-plain-english/javascript-check-if-a-variable-is-an-object-and-nothing-else-not-an-array-a-set-etc-a3987ea08fd7
    if (Object.prototype.toString.call(lastProducts) !== '[object Object]') {
        console.error("not correct last products:");
        console.error(lastProducts);
        lastProducts = {};
    }
    lastProducts[id] = Date.now();
    try {
        localStorage.setItem('last_products', JSON.stringify(lastProducts));
    } catch (e) {
        // на всякий пожарный очистка хранилища если превысили выделенную память
        if (e === QUOTA_EXCEEDED_ERR) {
            localStorage.removeItem("last_products");
            lastProducts = {};
            lastProducts[id] = Date.now();
            localStorage.setItem('last_products', JSON.stringify(lastProducts));
        }
    }
}

function getLastViews() {
    // получаем массив id отсортированные по дате просмотра
    // https://stackoverflow.com/questions/1069666/sorting-object-property-by-values
    let lastProducts = JSON.parse(localStorage.getItem('last_products'));
    return Object.keys(lastProducts).sort((a, b) => lastProducts[b] - lastProducts[a]);
}

В этой реализации мне не нравится что нет лимита и рано или поздно localstorage переполниться. Возможно мне нужна какая то другая структура для хранения данных. Ну и для получения id приходится все равно превращать object в array.
Мне нравится дешевая вставка в данной реализации.

Как лучше в этой реализации прикрутить лимит на хранение например только последних 20 товаров. может такая реализация вообще ни о чем и есть более удачный способ?

Answer 1

[twobomb]

function addProductView(id){
let lastProducts = [];
  try{
      lastProducts = localStorage.getItem("last_products");
    if(lastProducts == null)
      lastProducts = [];
     else
     lastProducts = JSON.parse(lastProducts);
  }catch(e){
    lastProducts = [];
  }
  lastProducts = lastProducts.filter(e=>e.id !=id);
  lastProducts.push({
    date:Date.now(),
    id:id
  });
  localStorage.setItem("last_products",JSON.stringify(lastProducts.sort((c,n)=>n.date - c.date).splice(0,20)));
}

function getLastViews(){
let lastProducts = [];
  try{
      lastProducts = localStorage.getItem("last_products");
    if(lastProducts == null)
      lastProducts = [];
     else
     lastProducts = JSON.parse(lastProducts);
  }catch(e){
    lastProducts = [];
  }
  return lastProducts.sort((c,n)=>n.date - c.date).map(e=>e.id);
}