Kevin Powell - Community•2y ago

Done with HTML/CSS, how to approach this in JS.

So i created a json file as database which is then stored in localStorage. since my knowledge in js is limited, this is how i planned to code, create/delete a new object when user clicks on something and then it is pushed into an array of objects. With this json data, i will update the frontend. i read an article few days ago(cant remember the name) where they mentioned to used of class constructor to create a newobject, Now i wanna know how should i implement this? are they any simpler method??? Also i have shared json file in codepen which is likely how the database is structured. https://codepen.io/avinash-tallapaneni/pen/dygGrjR

Avinash-Tallapaneni

CodePen

dygGrjR

...

3 Replies

13eck•2y ago

Using local storage is decent, but you're probably going to run into memory issues sooner or later. The browser has it's own dedicated database, IndexedDB (https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) but really what you're showing should be done with a backend server. That's what they do, store loads of data and send what's needed to the front end. As for your question on classes for making new objects, it's pretty basic stuff and you can read all about it here: https://javascript.info/classes. But in brief, you declare a class and in the constructor function you assign key/values pairs and the class returns the object with only the key/value pairs you gave it. You can also add methods to that classes prototype outside the constructor function if there's a need for functions. As an example:

class BasicMaths {
  constructor(startingNumber) {
    this.number = startingNumber;
  }
  
  add(num) {
    this.number += num;
  }

  subtract(num) {
    this.number -= num;
  }

  total() {
    return this.number;
  } 
}

class BasicMaths {
  constructor(startingNumber) {
    this.number = startingNumber;
  }
  
  add(num) {
    this.number += num;
  }

  subtract(num) {
    this.number -= num;
  }

  total() {
    return this.number;
  } 
}

The constructor function takes one parameter: the starting number. It then sets the object's number property to that value. It has three methods: one that adds to the number, one that subtracts from the number, and one that gets the current number.

AvinashOP•2y ago

its too much to wrap around my head. with localstorage all you need to do is run this command localStorage("key", "value") and it will set. Indexeddb looks advanced and i cant wrap my head around it. Any video resources available that you can recommend?

13eck•2y ago

IndexedDB is indeed an advanced feature and not one that is easy to use, sadly. And yes, local storage is super easy to use and for now is working but as more data is added you might run into storage limits…which is, sadly, different for every browser and very difficult to find. Really, though, this is the kind of thing your backend should be storing in a database and sending to the frontend on an as-needed basis.

Gaming

Programming

Done with HTML/CSS, how to approach this in JS.