Purpose: to make a local html-document of timetables to be used on mobile devices. The document will include its own styles and 20 - 40 stations (for each station there is a modal window with a schedule table).

Question: Is it possible to implement updating tables with schedules inside a local document (either one at a time or all at once), minimizing the amount of traffic, for subsequent re-saving of this html file from the browser window?

    2 answers 2

    Can.
    Read the file using input[type='file'] and the File API (you can also use browser storage as a particularly tricky one), and suggest storing new data through a link.
    Something like this:

     class Viewer{ constructor(){ // Здесь данные хранятся this.data = null; } /** * Ищем элементы и ставим для них слушатели */ init(){ [this.loadBtn, this.saveBtn, this.view, this.empty, this.addRowBtn] = document.querySelectorAll('#load, #save, #addRow, #view, #empty'); this.loadBtn.addEventListener('change', this.loadFile.bind(this)); this.addRowBtn.addEventListener('click', this.addRow.bind(this)); this.saveBtn.addEventListener('click', this.saveData.bind(this)); } /** * Если файл выбран, пробуем читать и парсить из JSON * Формат файла: [{id: Number, value: String}...] * * @param {Event} e Объект события выбора файла */ loadFile(e){ let file = e.target.files[0]; if(file === undefined) return; let fr = new FileReader(); fr.onload = r => { try{ this.data = JSON.parse(fr.result); if(!Array.isArray(this.data)) this.data = []; }catch(e){ throw new Error('The file is broken!'); } this.insert(); } fr.readAsText(file); } /** * Вставляем данные в таблицу */ insert(){ let result = ''; this.data.forEach(e => { if(!e.id || !e.value) return; result += `<tr><td>${+e.id}</td><td>${e.value}</td></tr>`; }); if(result === '') result = `<tr id='empty'><td rowspan='100%' align='center'>Пусто</td></tr>`; this.view.innerHTML = '<tr><th>ID</th><th>Value</th></tr>' + result; } /** * Добавляем рандомные данные */ addRow(){ if(this.data === null) return; let [ids, wordsLen] = this.data.reduce((a, e) => a[0].push(e.id) && a[1].push(e.value.length) && a, [[], []]), id = 0, value = '', alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; // Длина новой строки - от 1-го до средней длины строк (или 20, если длина большая) wordsLen = this.rand(1, Math.min(+wordsLen.reduce((a, e) => a += e, 0) / Math.round(wordsLen.length), 20)); // Ищем уникальный ID // Если за 10 циклов на находим - плюём на уникальность и выходим let f = 0; do{ id = this.rand(); f++; if(f === 10) break; }while(ids.includes(id)) // Из алфавита вырезаем случайную букву wordsLen раз for(let i = 0; i < wordsLen; i++){ value += alphabet.substr(this.rand(0, alphabet.length - 2), 1); } // Обновляем массив данных this.data.push({ id: id, value: value }); this.view.innerHTML += `<tr><td>${id}</td><td>${value}</td></tr>`; } rand(min = 0, max = 999){return Math.floor(Math.random() * (max - min + 1)) + min;} /** * Сохранение данных * * @param {Event} e Объект события клика */ saveData(e){ if(this.data === null) return; // Красиво превращаем данные в строку let data = JSON.stringify(this.data, null, 2), link = document.createElement('A'), filename = 'Data.json'; link.setAttribute('href', 'data:application/octet-stream,' + encodeURIComponent(data)); link.setAttribute('download', filename); link.style.display = 'none'; document.body.appendChild(link); link.click(); link.remove(); } } let viewer = new Viewer(); document.addEventListener('DOMContentLoaded', viewer.init.bind(viewer)) 
     <input type='file' id='load' value='Загрузить данные' /> | <input type='button' id='save' value='Сохранить данные' /><hr /> <table id='view'> <tr><th>ID</th><th>Value</th></tr> <tr id='empty'><td colspan='100%' align='center'>Пусто</td></tr> </table> <hr /> <input type='button' id='addRow' value='Добавить строку' />

    Nobody will give direct access and implicit read / write access to the file system from JS, so you need to select and save with pens.

      If you want to have a permanent schedule change in real time, then pay attention to Google GTFS (General Transit Feed Specification) technology. This specification allows public transport enterprises to provide developers with timetables with real-time changes. This documentation provides examples for use in Google Maps, but you can easily adapt this technique to the html standard.