Как добавить данные в элемент localStorage через событие onclick?

Question

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

Я проверил и попробовал этот ответ Добавьте данные к объекту localStorage , но я получаю сообщение об ошибке "keylocal.push is not function".

if(localStorage.getItem('keywords') == null){

    $('.words').on('click', function(e){
        e.preventDefault();    
        keywords.push( $(this).data('word-name') );
        document.getElementById('display').value = keywords
        localStorage.setItem('keywords', keywords)
        return keywords
        console.log(keywords)
    });
    }

else{
        var keylocal = localStorage.getItem('keywords')
    document.getElementById('display').value = keylocal
    $('.words').on('click', function(e){
        keylocal.push( $(this).data('word-name') );
        localStorage.setItem('keywords', keylocal)
        var keyresult = localStorage.getItem('keywords')
        console.log(keyresult)
        document.getElementById('display').value = localStorage.getItem('keyresult')
        return keywords
    });

}

Я ожидаю, что смогу отобразить предыдущие выбранные ключевые слова и новые ключевые слова через onclick. Тем не менее, он либо отображает только новые ключевые слова, либо я получаю .push не является ошибкой функции

Answer 1

попробуйте установить элементы в локальном хранилище, используя JSON.stringify и JSON.parse перед нажатием.

JSON.parse и JSON.stringify, поскольку локальное хранилище позволяет хранить только string .

образец рабочего кода

if(localStorage.getItem('keywords') == null){

    $('.words').on('click', function(e){
        e.preventDefault();    
        keywords.push( $(this).data('word-name') );
        document.getElementById('display').value = keywords

        localStorage.setItem('keywords', JSON.stringify(keywords)) // <- here

        return keywords
        console.log(keywords)
    });
    }

else{
        var keylocal = JSON.parse(localStorage.getItem('keywords')) // <- here

    document.getElementById('display').value = keylocal
    $('.words').on('click', function(e){
        keylocal.push( $(this).data('word-name') );
        localStorage.setItem('keywords', JSON.stringify(keylocal)) // <- here
        var keyresult = JSON.parse(localStorage.getItem('keywords')) // <- here
        console.log(keyresult)
        document.getElementById('display').value = JSON.parse(localStorage.getItem('keyresult'))
        return keywords
    });

}

Answer 2

Сначала вам нужно получить данные из localStorage, когда он включен, и добавить данные localStorage вместе с вашими данными.