Блог

У меня есть вариант использования, в котором я хотел бы генерировать журналы для моего веб-приложения JS, которые могли бы храниться в виде файла на стороне клиента (храниться на компьютере пользователя).

Поэтому я хочу знать, какому подходу я могу следовать для создания журналов в JS?

Если вы имеете в виду, что хотите сделать это из кода JavaScript, размещенного в браузере, боюсь, вы не сможете. Браузерный код JavaScript не может записывать в произвольные файлы на компьютере пользователя. Это было бы серьезной проблемой безопасности.

Вы можете хранить «журнал» в веб-хранилище, но обратите внимание, что веб-хранилище имеет ограничения по размеру, поэтому вы не хотите, чтобы оно становилось слишком большим.

Вот простая функция ведения журнала, которая добавляется к журналу в локальном хранилище:

 function log(...msgs) {
    // Get the current log's text, or "" if there isn't any yet
    let text = localStorage.getItem("log") || "";
    // Add this "line" of log data
    text  = msgs.join(" ")   "rn";
    // Write it back to local storage
    localStorage.setItem("log", text);
}
 

Очевидно, что затем вы можете использовать это различными способами (уровни журнала, регистрация даты / времени и т. Д.).

Вы можете использовать локальное хранилище для имитации файла :

Создайте идентификатор для каждой строки вашего «файла» и сохраните номер последней строки

 function logIntoStorage (pMsg) {
    if (!pMsg) pMsg = "pMsg is not here !";
    if ((typeof pMsg) != "string") pMsg = "pMsg is Not a string:" (typeof pMsg);        
    let logNb = "logNb";
    let padLong = 7;
    let strLg = "0";
    let lg = 0;
    let maxSize = 50; // max nb of lines in the log
    
    // Reading log num line
    strLg = localStorage.getItem(logNb);
    if(!strLg) { //logNb not stored yet
        lg = 0;
        strLg = "0";
        localStorage.setItem(logNb, lg.toString(10)); // store the number of cur line
    } else { // Read logNb from storage
        strLg = localStorage.getItem(logNb);
        lg = parseInt(strLg,10);
    } 
        
    if (lg >= maxSize) {
       lg = maxSize; // size limit nb lines.
       pMsg = "LIMIT SIZE REACHED";
    }


    // log msg into localStorage at logLine:0000#### 
    let s = ("0000000000000000" strLg).substr(-padLong);  // padding zeros
    localStorage.setItem("logLine:" s, pMsg);
    
    if (lg >= maxSize) return;
    lg  ;  // point to the next line
    localStorage.setItem(logNb, lg.toString(10));
}
 

В современном Chrome вы можете фактически «передавать» данные на диск пользователя после того, как они дадут разрешение, благодаря API доступа к файловой системе.

Для этого вам нужно запросить файл для сохранения, позвонив showSaveFilePicker() .

Как только вы получите одобрение пользователя, вы получите дескриптор, из которого вы сможете получить записываемый поток.
Как только вы закончите писать, вам просто нужно к .close() писателю.

 onclick = async () => {

  if( !("showSaveFilePicker" in self) ) {
    throw new Error( "unsupported browser" );
  }

  const handle = await showSaveFilePicker();
  const filestream = await handle.createWritable();
  const writer = await filestream.getWriter();
  // here we have a WritableStream, with direct access to the user's disk
  // we can write to it as we wish
  writer.write( "hello" );
  writer.write( " world" );
  // when we're done writing
  await writer.ready;
  writer.close();

};

 

Живой пример.