I am generating multiple (unlimited) popups with specific unique id for each which they have settings of their own that separates paths on the domain that they're allowed to be shown on.
for example imagine we have a website like www.site.com and we want to show some popups on them like a popup on main root path / and another on /about and another on /products and so on...
I want to track the their status for specific users to show them on some schedules for example the main root popup on each visit, the /about popup on each 7 days.
They reason for suggesting cookie is to use it's expiration time and check if it exists for the showing purpose of all that.
for example if the popup on /about firstly is loaded and a unique cookie is set with 7-day expiration time, I can check the cookie flag each time user visits the route and if it still exists means not showing it.
I came up with a solution to use cookie for that but it seems a little weird because of the dynamic part of this issue which i need to create alot of cookies if I want to track them all uniquely.
any help is appreciated. thanks.
Probably the easiest is to create your cookie name with some predictable key based on other properties. For example, the path itself might be sufficient for the cookie name, something like:
const name = `cookie-${path}`
Since the path may contain special characters (like the slash), you could replace those with a hyphen. Just be careful as cookie names can only have ASCII, so if the paths might be UTF-8 or another encoding (like with non-latin characters), this might be tricky.
Or, you could have just one cookie whose value is a JSON string containing the various bits of info:
const state = {
'/': 5,
'/about': 10,
'/products': 11
};
document.cookie = `popups=${JSON.stringify(state)}`;
Then, whenever needed, you could read the cookie, JSON.parse() the value, read whatever you need, and if you need to update, just update the parsed object then store it again. This is probably the easiest and most foolproof method, so I'd probably go with it. This still has the probably of only supporting ASCII, so if you might have non-ASCII characters, you could also do basically the same approach, but store it in localStorage instead.