How to make a javascript storage in OOP?

Question

I have a file using storage API and it works. I'm trying to make it OOP but I can't.

I tried to create a storage class with parameters. And put actions in functions which I call in my object but it doesn't work.

my regular code

// STORAGE

// Used Elements
var input_textarea = document.querySelector('#firstname_area');
var input_textarea_bis = document.querySelector('#lastname_area');
var chosen_station = document.querySelector('#station')
var output_div = document.querySelector('.personal-greeting');
var output_station = document.querySelector('#custumerstation'); 
var save_button = document.querySelector('.send');

// Onclick start function
save_button.addEventListener('click', updateOutput);

// Saved Elements
output_div.textContent = localStorage.getItem('content');
input_textarea.value = localStorage.getItem('content');
input_textarea_bis.value = localStorage.getItem('contentbis');
chosen_station.innerHTML = sessionStorage.getItem('content');

// Function actions setting saved elements
function updateOutput() {
  localStorage.setItem('content', input_textarea.value);
  localStorage.setItem('contentbis', input_textarea_bis.value);
  output_div.textContent = input_textarea.value;
  output_station.textContent = chosen_station.innerHTML;
}

Here is my not working OOP code

// STORAGE

class Storage {
    constructor(firstName, name, bookedStation, personalText, customerStation, validStorage) {
        this.input_textarea = document.querySelector(firstName);
        this.input_textarea_bis = document.querySelector(name);
        this.chosen_station = document.querySelector(bookedStation)
        this.output_div = document.querySelector(personalText);
        this.output_station = document.querySelector(customerStation); 
        this.save_button = document.querySelector(validStorage);

        this.getStorage();
        this.save_button.addEventListener('click', updateOutput());
    }

    // Saved Elements
    getStorage () {
        this.output_div.textContent = localStorage.getItem('content');
        this.input_textarea.value = localStorage.getItem('content');
        this.input_textarea_bis.value = localStorage.getItem('contentbis');
        this.chosen_station.innerHTML = sessionStorage.getItem('content');
    }

    // Function actions setting saved elements
    updateOutput() {
      localStorage.setItem('content', this.input_textarea.value);
      localStorage.setItem('contentbis', this.input_textarea_bis.value);
      this.output_div.textContent = this.input_textarea.value;
      this.output_station.textContent = this.chosen_station.innerHTML;
    }
}

let newStorage = new Storage("#firstname_area", "#lastname_area", "#station", ".personal-greeting", "#custumerstation", ".send");

what does not work? are you getting error messages? if so, what kind of error are you getting? also, you should check wether your localstorage is filled / has the item you're looking for, before doing stuff with it — rebecca, Jul 11 '19 at 12:18
Problem: `this.save_button.addEventListener('click', updateOutput());` you want `updateOutput`, like in your regular code. — , Jul 11 '19 at 12:19

score 1 · Accepted Answer · edited Jul 11 '19 at 12:28

1

The updateOutput() should be invoked using this reference and bind the this reference to access the class properties inside that updateOutput() method.

this.save_button.addEventListener('click', this.updateOutput.bind(this));

Please refer to this answer for more info: https://stackoverflow.com/a/20279485/1914034

edited Jul 11 '19 at 12:28

Below the Radar

7,321
11
63
142

answered Jul 11 '19 at 12:22

MH2K9

11,951
7
32
49

How to make a javascript storage in OOP?

1 Answers1