JavaScript | Как сохранить массив в файл на клиенте (браузере)?

JavaScript | Как сохранить массив в файл на клиенте (браузере)?

У нас есть массив:

var massiv = ["efim360.ru", "помог", "мне", "решить", "задачу"]

Этот массив мы хотим сохранить в файл на компьютере при помощи клиента (браузера). То есть нам не нужно использовать серверную сторону для этого. По сути мы хотим сгенерировать массив на клиенте, и сохранить его в файл с каким-либо названием и каким-либо расширением.

Никакой сервер не создаёт для нас этот файл! Задача именно в этом — в автономности и независимости от сервера.

 

Весь код без комментариев — Запусти, протестируй

var massiv = ["efim360.ru", "помог", "мне", "решить", "задачу"];
var blob = new Blob([JSON.stringify(massiv)], {type: "text/javascript"});
var link = document.createElement("a");
link.setAttribute("href", URL.createObjectURL(blob));
link.setAttribute("download", "my-array.js");
link.click();

Как это работает?

Если коротко, то мы создаём большой двоичный объект с «данными» и «типом данных«.

Данными у нас всегда будет строка, поэтому мы используем конструкцию JSON.stringify(massiv), чтобы конвертировать наш массив с квадратными скобками в строковое представление.

Типом данных мы выбираем mime-тип «text/javascript«, чтобы сохранить в файл с расширением «.js«.

Потом мы создаём «невидимый» объект ссылки. Потом мы назначаем этой ссылке атрибуты. Потом вызываем событие клика по ссылке. Файл с массивом скачивается на компьютер. Задача выполнена.

Дополнительную информацию можно почитать в публикации JavaScript | Как сохранить данные в файл на клиенте (браузере)?

 

Информационные ссылки

Стандарт URL — WHATWG — https://url.spec.whatwg.org

Стандарт File API — w3.org — «Creating and Revoking a blob URL» — https://www.w3.org/TR/FileAPI/#creating-revoking

Стандарт File API — w3.org — createObjectURL(obj)https://www.w3.org/TR/FileAPI/#dfn-createObjectURL

Internet Assigned Numbers Authority (IANA) — Media Typeshttps://www.iana.org/assignments/media-types/media-types.xhtml

Перевод стандарта File APIhttps://efim360.ru/file-api/

JavaScript | Как сохранить данные в файл на клиенте (браузере)?