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

【问题标题】：How to append data to localStorage item through onclick event?如何通过 onclick 事件将数据附加到 localStorage 项目？
【发布时间】：2019-05-09 01:08:33
【问题描述】：

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

我已经检查并尝试了这个答案Append data to localStorage object，但我收到“keylocal.push is not a 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 is not a function 错误

【问题讨论】：

标签： javascript arrays local-storage

【解决方案1】：

在推送之前尝试使用JSON.stringify 和JSON.parse 在本地存储上设置项目。

JSON.parse 和 JSON.stringify 因为本地存储只允许您存储 string。

sample working code

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

}

【讨论】：

对不起，我有一个小问题，它只存储页面重新加载后最近的关键字。是否可以在不重新加载页面的情况下存储它？此外，当我选择另一个关键字后，显示消失了。
一旦你在本地存储中设置项目，如果你已经有一个你要设置的键，那么它将被覆盖，所以你需要在文档准备函数中处理它。

【解决方案2】：

首先，您需要在 onClick 时从 localStorage 获取数据，并将 localStorage 数据附加到您的数据中。

【讨论】：