Создание файла .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>