Home>

With a simple stopwatch app with 3 buttons for start, stop and clear, I want to save the elapsed time in memory.json and restart the measurement from the elapsed time before updating even if the browser is updated.

As a procedure, install the fs module and set the elapsedTime variable that shows the elapsed time.fs.writeFileSyncSave to memory.json in JSON format usingreadFileSyncI thought of substituting the data read using for the elapsedTime.

The app freezes. (It does not react even if you press the start button.)

Applicable source code
var timer = document.getElementById('timer');
var start = document.getElementById('start');
var stop = document.getElementById('stop');
var clear = document.getElementById('clear');
var startTime = 0;
var elapsedTime = 0;
var memoriedTime = 0;
const fs = require('fs');
const fileName ='./memory.json';
try {
  const data = fs.readFileSync(fileName,'utf-8');
  elapsedTime = parseInt(JSON.parse(data));
} catch (ignore) {
  console.log(fileName + could not be restored from');
}
function saveTime() {
  fs.writeFileSync(fileName, JSON.stringify(elapsedTime),'utf8');
}
function updateTimeText() {
  var m = Math.floor(elapsedTime/60000);
  var s = Math.floor(elapsedTime %60000/1000)
  var ms = elapsedTime %1000;
  m = ('0' + m).slice(-2);
  s = ('0' + s).slice(-2);
  ms = ('0' + ms).slice(-3);
  timer.innerText = m +':' + s +':' + ms;
  saveTime();
}
function countUp() {
  timerID = setInterval(() =>{
    elapsedTime = Date.now()-startTime + memoriedTime;
    updateTimeText();
  }, Ten);
}
start.addEventListener('click', () =>{
  startTime = Date.now();
  countUp();
  updateTimeText();
});
stop.addEventListener('click', () =>{
  clearInterval(timerID);
  memoriedTime = elapsedTime;
})
clear.addEventListener('click', function () {
  elapsedTime = 0;
  memoriedTime = 0;
  timer.innerText = "00:00:000"
})
What I tried
const fs = require('fs');
const fileName ='./memory.json';
try {
  const data = fs.readFileSync(fileName,'utf-8');
  elapsedTime = parseInt(JSON.parse(data));
} catch (ignore) {
  console.log(fileName + could not be restored from');
}
function saveTime() {
  fs.writeFileSync(fileName, JSON.stringify(elapsedTime),'utf8');
}


If I comment out this part, it works, but I don't know the cause. The method itself may be somewhat redundant. I would appreciate if anyone would be able to teach me a solution or another method.

Supplemental information (FW/tool ​​version, etc.)

node.js
express

  • Answer # 1

    Save elapsed time to external file using fs module

    First, the fs module is a module that can be used under the NodeJS execution environment, so it cannot be used on the browser side.

    If you really want to use the fs module, you need to learn the following two processes on the server side.

    Read/save files on the server side

    Use POST request/response communication (browser form/Ajax) between browser and server
    (Data processing after reception by NodeJS)

    I want to be able to restart the measurement from the elapsed time before the update even if the browser is updated

    If you just want to resume,Another wayThere is also a method of using storage on the browser side.

    WebStorage (localStorage): (Google Search MDN localStorage)
    You can make the record permanent and realize the resume function regardless of the external file.

    If you need files, you also need to learn the download and upload processes.


    As with the previous questions, I think the browser side/server (NodeJS) side is confused.
    There are things that can and cannot be done for each, so I think it will be easier to achieve results if you divide them and organize them first.