Question

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

我已经签出并尝试了此答案Append data to localStorage object，但收到“ keylocal.push不是函数”错误。

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。

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

}

Answer 2

首先，您需要在onClick时从localStorage获取数据，然后将localStorage数据与数据一起附加。

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

2 个答案: