Создание файла .txt с данными из localStorage

Добрый день уважаемые форумчане! Возник вопрос по созданию текстового файла с данными из localStorage. Искал ответ, однако все ответы даны 10+ лет назад и скорей всего уже не актуальны. Именно поэтому я и решил поднять этот вопрос ещё раз. Сделал обычный генератор паролей.

Посмотреть можно по ссылке: https://nysky90.github.io/projects/passGen/index.html

Есть функция генерирующая пароли и пин-коды:

function generator() {
    const rezultInput = document.querySelector('.password-rezult__value'),
          btnGenerate = document.querySelector('.password__generate'),
          btnOneGenerate = document.querySelector('.password-rezult__generate'),
          copyBtn = document.querySelector('.password-rezult__btn'),
          chooseFlag = document.querySelectorAll('.password-choose__btn');
 
    const charBase = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM123456789!??!!?##$$';
    const numBase = '1234567890';

//Base function GENERATOR

    function randomLetter(num, base) {
        let passArr = '';
        for(let i = 0; i < num; i++){
            let char = (Math.random() * (base.length-1));
            passArr += base.substring(char, char + 1);
        }
        rezultInput.value = passArr;
    }

//Choose type

    function choosePass () {
        if(chooseFlag[0].classList.contains('active')){
            randomLetter(12, charBase)
        } else {
            randomLetter(6, numBase);
        }
    }

//Add active class

    function activeBtn(i) {
        chooseFlag.forEach(item => {
            item.classList.remove('active')
        })
        chooseFlag[i].classList.add('active')
    }

//work with btns

    function showBtns (btn, action1, action2, animation) {
        btn.classList.add(animation);
        setTimeout(() => {
            btn.classList.add(action1);
            btn.classList.remove(action2);
        },1000)
    }

    btnOneGenerate.addEventListener('click', () => {
        document.querySelector('.password-rezult__close').style.top = 0;
            setTimeout(()=> {
                choosePass();
                document.querySelector('.password-rezult__close').style.top = '';
                document.querySelector('.password__save').removeAttribute('disabled');
            },1000)
            btnGenerate.style.top = 0;
            showBtns(btnOneGenerate, 'hide', 'show', 'animateHide');
    })

    btnGenerate.addEventListener('click', () => {
        document.querySelector('.password-rezult__close').style.top = 0;
        document.querySelector('.password__save').removeAttribute('disabled');
        btnGenerate.setAttribute('disabled', true);
        setTimeout(() => {
            choosePass();
            document.querySelector('.password-rezult__close').style.top = '';
            btnGenerate.removeAttribute('disabled');
        },1000)
    })
    
//Copy value password
    copyBtn.addEventListener('click', () => {
        window.navigator.clipboard.writeText(rezultInput.value)
        copyBtn.innerHTML = `
        <img src="icons/copy-regular.svg" alt="copy">Скопированно`;
        setTimeout(() => {
            copyBtn.innerHTML = `
            <img src="icons/copy-regular.svg" alt="copy">
            Скопировать`;
        }, 1000);
    })

    chooseFlag.forEach((item,i) => {
        item.addEventListener('click', () => {
            activeBtn(i);
        })
    })

}

export default generator;

и есть функция сохраняющая их в локальном хранилище:

function savePassword() {
    const saveObj = document.querySelector('.password-rezult__value'),
          saveBtn = document.querySelector('.password__save'),
          saveList = document.querySelector('.saved-list');

//Create item list with password

    function creatItem(value) {
        const element = document.createElement('li');
        element.classList.add('saved-list__item');
        element.innerHTML = `
            <input type="text" class="saved-list__input" readonly value=${value}>
            <button class="saved-list__copy">Copy</button>
            <button class="saved-list__delete">Delete</button>
        `;
        saveList.appendChild(element);
    }

    
    saveBtn.addEventListener('click', () => {
        if(saveObj.value) {
            creatItem(saveObj.value);
            localStorage.setItem(`password${Date.now()}`, saveObj.value)
            saveBtn.setAttribute('disabled', true);
        }
    })


    saveList.addEventListener('click', (e) => {
        const target = e.target;
        if(target && target.classList.contains('saved-list__copy')){
            window.navigator.clipboard.writeText(target.parentNode.firstChild.nextSibling.value)
        }
        if(target && target.classList.contains('saved-list__delete')){
            for(let i=0; i<localStorage.length; i++) {
                let key = localStorage.key(i);
            if(target.parentNode.firstChild.nextSibling.value == localStorage.getItem(key)){
                target.parentNode.remove();
                localStorage.removeItem(key);
            }
        } 
        }
    })


    for(let i=0; i<localStorage.length; i++) {
        let key = localStorage.key(i);
        creatItem(localStorage.getItem(key));
      }
}

export default savePassword;

На основе данных из локального хранилища я хочу создавать текстовый файл, чтобы пользователь смог сохранить свои пароли на ПК. Какую технологию лучше использовать и что почитать? Возможно это сделать на нативном JS?


Ответы (1 шт):

Автор решения: Инквизитор

Можно на чистом JS.

Что почитать - BLOB

Открывайте ссылку в новой вкладке. чтобы вместо отображения пошла загрузка - смените type:

var data = 'This is a string that will contain JSON, text or something other';

var blob = new Blob([data], {type: "text/javascript"});
var url = window.URL.createObjectURL(blob);

var link = document.getElementById('my_link');
link.href = url;
<a id ="my_link" href="">Download file</a>

→ Ссылка