Как получить сохраненные данные из файла HTML? - PullRequest
Новая
       34

Как получить сохраненные данные из файла HTML?

1 голос
/ 02 октября 2019

У меня есть некоторые данные, сохраненные в файле html, который выглядит следующим образом: 

<head>
   <script type="text/javascript" src="app.js"></script>
</head>

<body>

  <script type="text/javascript">
  document.__data = {
     id: 1,
     text: 'Test blob',
  };
  </script>
</body>

данные сохраняются локально в файле data.html.
Теперь я пытаюсь загрузитьданные в отдельный app.js файл:

Сначала я попытался получить прямой доступ к document: 

const getData = () => console.log(document.__data);

Но этот jsut возвращается как undefined, поэтому я попробовал следующее:

 // app.js
 const getData = async () => {
     const request = await fetch('./data.html');
     const data = await request.json();
     console.log(JSON.stringify(data));
 }

 getData();

Но это просто возвращает следующую ошибку:

Uncaught (в обещании) SyntaxError: Неожиданный токен <в JSON в позиции 0 </p>

Есть идеи, как это сделать?

1 Ответ

2 голосов
/ 02 октября 2019

Прежде всего, добавление пользовательских, произвольных свойств в document не рекомендуется, например: 

document.__data = { ... };

вместо этого сделайте что-то вроде, например 

var data = { ... };

СейчасПредполагая, что вы хотите получить доступ к встроенным данным, используя внешний файл app.js, этот файл необходимо загрузить после вашего встроенного файла, иначе он вернется undefined.

Вот как это должно выглядеть в вашем HTML: 

<head>
</head>

<body>

  <script>
    var data = {
      id: 1,
      text: 'Test blob',
   };
  </script>

  <script src="app.js"></script>

</body>

И ваш app.js

const getData = () => console.log(data);

getData();

Если ваш внешний app.js загружается в head, как и в исходном HTML, вам нужно отложить getData(), пока DOM не будет готов, и вот как он должен выглядеть в вашем app.js: 

const getData = () => console.log(data);

window.addEventListener('DOMContentLoaded', (event) => {

    getData();

});

И причина в том,просто вы не можете получить доступ к тому, что будет позже в документе, поскольку он еще не загружен, поэтому проблема undefined в вашем первом примере.

Ниже двух фрагментов используйте встроенный скрипт, чтобы вы могли видетькак это устроено. Просто замените деталь getData() на app.js, и она также будет работать.

Показывает, что она работает, когда DOMContentLoaded закончена. 

<head>
      <script>
        const getData = () => console.log(data);

        window.addEventListener('DOMContentLoaded', (event) => {

            getData();

        });
      </script>
    </head>
    
    <body>
    
      <script>
        var data = {
          id: 1,
          text: 'Test blob',
        };
      </script>
      
    </body>

Показывает, что это не работает, если не откладывается до завершения DOM 

<head>
      <script>
        const getData = () => console.log(data);

        getData();        
      </script>
    </head>
    
    <body>
    
      <script>
        var data = {
          id: 1,
          text: 'Test blob',
        };
      </script>
      
    </body>
...