[JS] localStorage vs IndexedDB for specific use case.

[hard hound]

I wish to create a fairly complex schedule editor and I need to store the data retreived from the backend somehow (i'll get that with ajax, but thats not the question). The schedule should have monday-friday and then a set of locations, all identical for each day. So there'll exist some parent div and then child divs for each day. This should be click+drag editable and click + Modal editable. Therefore I believe I need to store this data somehow, since querying the DOM each edit would be absolute hell.
Local storage would be nice for this, except i'd have to Stringify/JSON encode my objects (since a localStorage and sessionStorage are essentially a Map<String, String>, and I dont expect this to be efficient or manageable for the 'size' of the object.
I expect the object to have
(1) array of days
(2) array of locations (sub columns in each day [recall identical across days])
A day would have an array of Intervals,
An interval would have a (most likely) bitmasked start time and finish time, a name, a name or index mapping to its location column ([recall identical across any day]), and some other simple attributes.

I suppose I could also just have a single array of intervals and make the dayId an attribute of the interval.

In either case, I dont expect JSON to 'easily' handle this, though its doable. Should I use a simple IndexedDB instead to help with managing the data and relations? I'm not sure if it would be overkill, or i'm looking in the wrong area entirely

[errant barn]

<@&987246964494204979> please have a look, thanks.

[errant barn]

While you are waiting for getting help, here are some tips to improve your experience:

Code is much easier to read if posted with syntax highlighting and proper formatting.

If nobody is calling back, that usually means that your question was not well asked and hence nobody feels confident enough answering. Try to use your time to elaborate, provide details, context, more code, examples and maybe some screenshots. With enough info, someone knows the answer for sure.

Don't forget to close your thread using the command </help-thread close:1027500463647621170> when your question has been answered, thanks.

[young breach]

I am confident that I can help you achieve your goals. I have a proven track record of success on similar projects, and I am committed to finding creative solutions to even the most challenging problems. If you decide to work with me, I am confident that you will be pleased with the results, and I look forward to the opportunity to contribute to your success!

[eternal zenith]

chortle a nut

If there are under 10,000 things and you only need to save on an active user interaction (100ms) don't worry about it

json will be fine

[young breach]

true.....but will depend on the specific requirements!

[eternal zenith]

no it doesn't

he is talking about a drag and drop ui like google calendar

Therefore I believe I need to store this data somehow, since querying the DOM each edit would be absolute hell.
The strangeness here is just that you are storing state in the dom

instead of having the dom reflect some state

localstorage and indexed db will not outperform in memory operations - so their use is really down to a caching/offline strategy

[hard hound]

well like, structure via some javascript 'storage', not the HTML

Each 'schedule' ID will ahve at most ~100 entities/intervals with approximately (each)

6 String
4 int
2 boolean

i figure anytime the user views a different schedule ID from a dropdown, we can still maintain the previous and just ajax get and add the new selection (so they can flip between em and maintain the state of each, locally)

does json allow automatic un-stringify?

ah JSON.parse

[hard hound]

well yes, but the dom is loosely structured, and would require lots of string parsing of concatenated/derived data), so I want a 'structured' object of the whole data schema that I could easily be like okay, they clicked on div customId='123', lets find the object with id = 123 in this array, and display a modal with all its attributes

[hard hound]

lets suppose i had simplified values id, name, start, finish, days then

let schedule1 = [
  {id: 1, name: "Math 101", start: 54, finish: 94, days: 0b10101_00},
  {id: 2, name: "Math 210", start: 100, finish: 125, days: 0b10101_00},
  {id: 3, name: "CS 110", start: 90, finish: 130, days: 0b01010_00},
];

This is easily usable?

[eternal zenith]

are you always looking up by id or by other properties as well?

[hard hound]

it will sometimes be by other things i believe

[eternal zenith]

and...yeah

[hard hound]

like the days

perhaps I should unmask the days in the array

0bMTWTF_SS

i'd have to figure out how i'm gonna make the html/bootstrap classes on if i need to easily access the values

but I suppose I could just have a function that does like function isMonday(day) {return day >> 7 & 1}

or whatever syntax

[hard hound]

then a function getAllMondayCourses that loops over the array and calls isMonday on each. Probably better to make a isDay(entity, offset)

[eternal zenith]

searching through this huge ass list (and logging) only takes 93 ms on my computer

yeah, dont do it in a loop

but you are overestimating how much you need to engineer this

[hard hound]

how would u do it not in a loop?

[eternal zenith]

i mean don't do like

for every item, look it up from scratch

exponential stuff

[hard hound]

(also note i'm still learning how to do JS)

well I meant like (in java)

public static List<Course> getClasses(int dayID) {
  var out = new ArrayList<>();
  for (Course c : schedule) {
    if (isDay(c, dayID) {
      out.add(c);
    }
  }
  return out;
}```

[hard hound]

what if u try find(elem => (elem.days >> 2 & 1) === 1)

[eternal zenith]

0ms

[hard hound]

👀

why was that faster

than id ===

[eternal zenith]

because the literal first one matches

[hard hound]

oh

is there a findAll?

[eternal zenith]

including printing 289ms

just doing it, 92ms

for 10 million items

[hard hound]

(Also sry to bother u with ur top tier test environment) can u try a schedules of 10000 entities and then time Stringify the array. Then JSON.parse() that stringify

[eternal zenith]

ten million is too big

[hard hound]

yeah lmao try like 100, 1000, 10000

[eternal zenith]

11 ms with 10000

[hard hound]

nice, does it scale linearly to 1ms with 1000?

[eternal zenith]

on my machine yes

[hard hound]

oh right its clientside

eh it'll be fineee

[eternal zenith]

var schedules = Array(1000).fill('').map((_, i) => {
    return {id: i, name: "Math 101", start: 54, finish: 94, days: 0b10101_00}
});

var start = Date.now(); var a = JSON.stringify(schedules); var b = JSON.parse(a); var end = Date.now()

end - start 

[hard hound]

is there a way I can run that in an IDE or do I have to have my browser as a host?

[eternal zenith]

i mean sure

but it runs in a browser anyways so 🤷‍♂️

[hard hound]

yeah i found some nice playground for it, but i have to console.log

Where'd u learn JS? javascriptbook.net?

[eternal zenith]

don't remember at this point

[hard hound]

i have a book on js and one on jquery, havent finished reading yet :P

any suggested direction on how to go about clicking and dragging my (to be created) DOM elements and updating this json array?

[eternal zenith]

no, im not a frontend guy

i'd use elm so i would actually have fun

[hard hound]

whats an elm

a pokemon professor?

[eternal zenith]

frontend language

and pokemon professor

compiles to js

[hard hound]

do u know enough conceptually on if I can create the DOM structure basically however i want and then add-on the editing later?

[eternal zenith]

not really

[hard hound]

aight well i'll do some research on that.
Thanks again for confirming the JSON speed