MaminProgrammist
@MaminProgrammist
Я слава беброу

Как сохранить текст внутри textarea в localstorage?

Вот есть такой код
$(function() {
    const btn = $('input[type="button"]')
    $(btn).css({
        'position': 'relative',
        'bottom': '7px'
    })

    const text = $('textarea')

    const saveBtn = $('input[value="Сохранить"]')
    const delBtn = $('input[value="Очистить"]')

    const save = (saveItem) => {
        const init = localStorage.getItem('saveText')
        if (init) {
            $(text).append(init);
        }
        else {
            $(saveBtn).on('click', function() {
                localStorage.setItem('saveText', saveItem)
            })
            $(delBtn).on('click', function() {
                $(text).contents().filter(function(){ return this.nodeType != 1; }).remove();
            })
        }
    };

    save(text)
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div>
        <form action="" class="form">
            <textarea class="textarea" rows="50" cols="200" style="resize: none"></textarea>
            <input type="button" value="Сохранить"><input type="button" value="Очистить" />
        </form>
    </div>
</body>
</html>


Он должен сохранять то, что введет пользователь в textarea и, если уже было что-то сохранено, выгружать обратно в textarea, также уметь удалять текст. Вроде бы все сделал, но нифига не работает, кнопка "Очистить" (удаляющая текст) работает только 1 раз и только если пользователь ничего не будет вводить в textarea, если туда хоть букву введет - она перестает работать. Но самое главное, из-за чего я создал вопрос - Кнопка "Сохранить" вообще не работает, а при перезагрузке страницы выводится [object Object] в textarea

Помогите
  • Вопрос задан
  • 581 просмотр
Решения вопроса 1
QuayS1de
@QuayS1de
<textarea></textarea>
<button class="save">Сохранить</button>
<button class="clear">Очистить</button>


let textarea = document.querySelector('textarea')
let save = document.querySelector('.save')
let clear = document.querySelector('.clear')

save.addEventListener('click', function(){
    localStorage.setItem('value', textarea.value)
})

clear.addEventListener('click', function(){
    localStorage.removeItem('value')
})

localStorage.getItem('value') !== null
    ? textarea.value = localStorage.getItem('value')
    : textarea.value = ''
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
Для получения и установки значений для инпутов и textarea используйте метод .val()
// $(text).append(init);
$(text).val(init);

// localStorage.setItem('saveText', saveItem)
localStorage.setItem('saveText', saveItem.val())
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы