Javascript 如何通过onclick事件将数据附加到localStorage项？

我的应用程序中有一个功能，用户可以选择关键字，这些关键字一旦被选择，就会显示在文本字段中。如果页面重新加载，我希望保留关键字，同时当用户选择更多关键字时，它将与初始关键字一起显示

我已经签出并尝试了这个答案，但我得到了“keylocal.push不是函数”错误

---

我希望能够通过onclick显示以前选择的关键字和新关键字。但是，它要么只显示新的关键字，要么我得到.push不是一个函数错误

请尝试在本地存储上使用

JSON.stringify

和

JSON.parse

设置项，然后再推

JSON.parse和JSON.stringify，因为本地存储只允许存储

if（localStorage.getItem（'keywords'）==null）{
$（'.words'）。关于（'click'，函数（e）{
e、 预防默认值（）；
关键词.push（$（this）.data（'word-name'））；
document.getElementById（'display'）。值=关键字
localStorage.setItem（'keywords'，JSON.stringify（keywords））//在按下之前，尝试使用
JSON.stringify
和
JSON.parse
在本地存储上设置项

JSON.parse和JSON.stringify，因为本地存储只允许存储


if（localStorage.getItem（'keywords'）==null）{
$（'.words'）。关于（'click'，函数（e）{
e、 预防默认值（）；
关键词.push（$（this）.data（'word-name'））；
document.getElementById（'display'）。值=关键字
localStorage.setItem（'keywords'，JSON.stringify（keywords））//首先，在单击并附加localStorage数据时，您需要从localStorage获取数据。
首先，在单击并附加localStorage数据时，您需要从localStorage获取数据。
很抱歉，我有一个小问题，它只存储页面重新加载后的最新关键字。是否可以在如果没有重新加载页面？另外，在我选择另一个关键字后，显示将消失。一旦您在本地存储中设置了项，如果已经有一个要设置的关键字，那么它将被覆盖，因此您需要在document ready函数中处理该问题。很抱歉，我有一个小问题，它只存储页面重新加载后的最新关键字。是吗是否可以在不重新加载页面的情况下存储它？此外，在我选择另一个关键字后，显示将消失。一旦您在本地存储中设置了项，如果已经有一个要设置的键，则它将被覆盖，因此您需要在document ready函数中处理该项。
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
    });

}

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
    });

}