Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

brendon hanson
brendon hanson
6,191 Points

How to store data entered through a prompt, even after page refreshes.

I am making a payroll data collection interface. I need it to work where the employee can go to the site and enter in the info by clicking a button and that said info is collected and thrown into different buckets and displayed on screen in his/hers profile. The problem is it doesn't save. How can i get it to save? Note: This is not the entire code and is not anywhere near complete.

// TODO: Get the job codes
// TODO: finish working on info button
// TODO: billing
// TODO: Add a section for each department
// TODO: Find way to store data
let date;
let code;
let jobNum;
let job;
let message = "";
let name;
let employee;
let conf;
let user;
let qAdd;
let amount;
var i;
const print = (message) => {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}
const getReport = (employee) => {

  let report = `<h1 class="name" id="name"> ${employee.name} </h1>`;
  `<ol>`
  report += `<li class="earn"> Earned: ${employee.earnedSoFar} </li>`;
  report += `<li class="job"> JobsCompleted: ${employee.jobsDone} </li>`;
  report += `<li class="rating"> Rating: ${employee.rating} </li>`;
  report += `<li class="service">ServiceAgreements: ${employee.serviceAgreements} </li>`;
  report += `<li class="deptTen">ResidentialReplacements: ${employee.ResidentialReplacements}</li>`;
  report += `<li class="deptTwenty">ResidentialServiceCall: ${employee.ResidentialServiceCall}</li>`;
  `</ol>`
  return report;
};


const data = document.getElementById('data');
const matt = document.getElementById('mattReport');
const mike = document.getElementById('mikeReport');
const vlad = document.getElementById('vladReport');
const company = document.getElementById('company');
const jobCode = document.getElementById('jobCode');
//const add = document.getElementById('add');
//const textInput = document.getElementById('textInput');
//onst input = document.getElementById('input');

/*add.addEventListener('click', () => {
  const text = document.createElement('button');
  text.className = "summary";
  input.appendChild(text);
 text.textContent = textInput.value;

});*/


;
matt.addEventListener('click', () => {
  var i = 0;
  message = getReport(employees[0]);
  print(message);
});
mike.addEventListener('click', () => {
  var i = 1;
  message = getReport(employees[1]);
  print(message);
});
vlad.addEventListener('click', () => {
  var i = 2;
  message = getReport(employees[2]);
  print(message);
});
company.addEventListener('click', () => {
 user = prompt("Who are you?");
});

if (user === 'matt') {
  qAdd = prompt("What are you wanting to add? EX: Job, serviceAgreements, etc.");
}
if (qAdd === 'job'){
  amount = prompt('How many did you do');
}

jobCode.addEventListener("click", () => {
  code = prompt("What's the department?");
  jobNum = prompt("What's the code?");
  if (parseInt(code) === 10) {
    if (parseInt(jobNum) === 1001) {
      alert("Residential Replacement, Evaporator Coil, $300");
    } else if (parseInt(jobNum) === 1002) {
      alert("Residential Replacement, Furnace, $300");
    } else if (parseInt(jobNum) === 1003) {
      alert("Residential Replacement, condensor, $250");
    } else if (parseInt(jobNum) === 1004) {
      alert("Residential Replacement, TXV, $50");
    } else if (parseInt(jobNum) === 1005) {
      alert("Residential Replacement, Plenum/Transition, $50");
    } else if (parseInt(jobNum) === 1006) {
      alert("Residential Replacement, Duct Run, $40");
    } else if (parseInt(jobNum) === 1007) {
      alert("Residential Replacement, Cut in boot/return, $40");
    } else if (parseInt(jobNum) === 1008) {
      alert("Residential Replacement, Misc 1, $50");
    } else if (parseInt(jobNum) === 1009) {
      alert("Residential Replacement, Misc 2, $100");
    } else if (parseInt(jobNum) === 1010) {
      alert("Residential Replacement, Misc 3, $150");
    }
  }
  if (parseInt(code) === 20) {
    if (parseInt(jobNum) === 2000) {
      alert("Residential Service Call, service fee collected, $15");
    } else if (parseInt(jobNum) === 2001) {
      alert("Residential Service Call, ALL/Pictures/Info, $10");
    } else if (parseInt(jobNum) === 2002) {
      alert("Residential Service Call, 5 Star Review, $10");
    } else if (parseInt(jobNum) === 2003) {
      alert("Residential Service Call, 20% of repair cost, 20%");
    } else if (parseInt(jobNum) === 2004) {
      alert("Residential Service Call, 1 component, $125");
    } else if (parseInt(jobNum) === 2005) {
      alert("Residential Service Call, 2 components, $250");
    } else if (parseInt(jobNum) === 2006) {
      alert("Residential Service Call, 3 components, $350");
    } else if (parseInt(jobNum) === 2007) {
      alert("Residential Service Call, Maintenance, $30 silver, $40 gold, $50 platinum");
    } else if (parseInt(jobNum) === 2008) {
      alert("Residential Service Call, Maintenance Service, $20, $10, $10");
    }
  }




});

1 Answer

Steven Parker
Steven Parker
231,261 Points

Generally this kind of application requires database support from the server. The user submits information on a form, the server stores and/or process it, and the data is available again to the user in later sessions or on other pages.

But if you want to persist data just in the local machine, this can be done with local storage. And there happens to be a workshop available here called Using Local Storage with JavaScript.

brendon hanson
brendon hanson
6,191 Points

How would I get database support from the server? If you could point me towards a video that'd be great! btw... I have a 1tb server but I have no clue how to use it...

Steven Parker
Steven Parker
231,261 Points

Developing server applications, including use of databases, is a primary focus of the courses here that deal with the languages they are developed in, such as PHP, Ruby, Python, and C#. Check the Library listings for courses involving database use for the language your server application is (or will be) written in.