VueUse useStorage - Store array of objects with limit

Question

I'm using useStorage (@vueuse/core). I'm trying to store searches performed by the user on the site. Each index in the array looks like this:

export type TSearchHistoryItem = {
  tab: string,
  inventory?: {
    id: number | null,
    name: string | null
  },
  keyword?: string | null,
  city: {
    id: number | null,
    name: string | null
  },
  radius: number | null,
  label?: string
}

I want to store up to 10 searches maximum in the localStorage. Thank you.

Answer 1

Your question is unclear regarding what you are going to do with it, but here is how you add a limit. Once the condition is met, it won't add to the local storage anymore. This can be adjusted depending on your needs.

<script setup lang="ts">
import { useStorage } from '@vueuse/core';

interface TSearchHistoryItem {
  tab: string,
  inventory?: {
    id: number | null,
    name: string | null
  },
  keyword?: string | null,
  city: {
    id: number | null,
    name: string | null
  },
  radius: number | null,
  label?: string
}

const searched: TSearchHistoryItem[] = []
const searchStrorage = useStorage('history_search', searched)
function handleSearch() {
  if (searchStrorage.value.length < 10) {
    const values: TSearchHistoryItem = {
      tab: 'Tab 1',
      inventory: {
        id: 1234,
        name: 'Name'
      },
      keyword: 'Keyword',
      city: {
        id: 1234,
        name: 'City'
      },
      radius: 12345,
      label: 'Hello Label'
    }
    useStorage('history_search', searchStrorage.value.push(values))
  } else {
    alert('Search limit is reached!')
  }
}

</script>
<template>
  <div>
    <button type="button" @click="handleSearch">Search</button>
    <div>Number of Searched: {{ searchStrorage.length }}</div>
  </div>
</template>
<style scoped lang="css"></style>

Tested and it works.