How to make a notification appear only once

[nd3w]

How do I make a notif appear only once? When I went back from another page, the notif was appearing again.

[AbrahemAlhofe]

Add a cookie on each path that your user have visited, so if they returns back again to the page that includes the cookie you can prevent notyf from appear

[juliyvchirkov]

@nd3w you can utilize globalThis.localStorage API to track notifications you've already pushed

As well as cookies, localStorage is bound to visitors's browser and resourse domain, but in contrast to cookies (with their strictly limits with predefined TTL, 4kb data max storage and exposure on the network on every http request), localStorage data can be accessed only directly in browser on client's side with JavaScript, stored data has no expiration time and almost no limits in size of data records, so it's definitely would be much better choice than legacy cookies

Read the stored log from localStorage before pushing a notification and update it as notification has been pushed. Store every notification in your log object under unique key (the easiest way probably would be the digest of notification message content, thru, for example, SheetJs crc32 implementation)

import { crc32_str as crc32 } from 'https://cdn.sheetjs.com/crc-32-latest/package/crc32.mjs'

/* ... Some subroutines ... */

/* The id of log record in localStorage */
const logId = 'notyfLog' 

/* Message to be pushed */
const message =  'Lorem ipsum dolor sit amet, consectetur adipiscing elit' 

/* Digest of the above message to be utilized as key below */
const digest = crc32(message)

const type = 'success'

const logRecord = { /* Track data on message to be pushed */
    type,
    message,
    postedAt : null
}   /* And any other info you'd like to log, unlimited */

/* ... Another subroutines ... */

/* Time to push message. Retrieving full log from localStorage */
const log = JSON.decode(localStorage.getItem(logId) ?? '{}')

/**
 * . Let log object be like
 *
 * {
 *.    cbb14041 : {
 *         type : 'error',
 *         message : 'Phasellus eu vulputate justo, et placerat erat. Proin odio ex, ornare in ante ac',
 *         postedAt : 1669643082
 *     },
 *     a657f58c : {
 *         type : 'warning',
 *         message : 'Vestibulum pellentesque sed mi ut bibendum. Morbi odio quam, posuere',
 *         postedAt : 1606571082
 *     }
 * }
 *
 */

/* Pushing message only if it has not been already pushed */
if (!Object.keys(log).includes(digest)) {
    /* Pushing message */
    notyf.open({ type, message })

    /* Timestamp when message has been pushed */
    logRecord.postedAt = Date.now()

    /* Storing record of pushed message to log */
    log[digest] = logRecord

    /* Putting the whole updated log back to localStorage */
    localStorage.setItem(logId, JSON.stringify(log))
}

/* ... More subroutines ... */

You can find a nice clean guide for localStorage here.

Bugs free coding!