javascript - 从对象中删除逗号

Question

我正在使用 localStorage 来存储数组中的值列表。由于我只能将其作为字符串带入新会话，因此我必须将其保存为字符串。

我想在新行上打印每个值，但是由于数组被转换为字符串，然后在新行上打印的对象会传递逗号。我想简单地将每个项目打印在新行上，而 p 标签内没有逗号。我试过加入和分裂，但没有奏效。有什么想法吗？我确信有一个超级简单的解决方案，但它让我望而却步。

我试图也包括一个中断标签，但它不会删除逗号。

如您所见，我可以通过添加 p 标签让该项目在新行上打印，但是逗号出现了，我该如何删除它？

我的代码：

var theLIst = document.getElementById('list');
var resetNotify = document.getElementById('reset-message');
var st = window.localStorage;
var nameArray = [];

theLIst.innerHTML = JSON.parse(st.getItem('names'));

function addName() {

    resetNotify.innerHTML = '';
    var name = document.getElementById('names');
    nameArray = JSON.parse(st.getItem('names'));


    if ( nameArray != null) {
        nameArray.join('');
        nameArray.push("<p>" + name.value + "</p>");

    } else {
        console.log('The Array has been purged. Resetting.')
        nameArray = [];
        nameArray.push("<p>" + name.value + "</p>");

    }

    st.setItem("names", JSON.stringify(nameArray));
    console.log(nameArray);
    name.value = '';
    theLIst.innerHTML = JSON.parse(st.getItem('names'));
}

function clearArray() {
    st.clear();
    nameArray = [];
    console.log(nameArray);
    theLIst.innerHTML = '';
    resetNotify.innerHTML = 'Array has been purged.';
}

标签： javascriptlocal-storage

Answer 1

我找到了一个解决方案（虽然有点老套）。事实证明，我需要简单地获取我的 localStorage 对象并使用 Array.from() 将其转换为数组。我必须这样做，因为我无法使用 .join()、.split() 等方法，这些方法会让我的生活变得更轻松！

我将新值独立于存储条目的数组进行处理。这允许我 .join('') 值

（原谅 janky 代码）

我的代码：

var theLIst = document.getElementById('list');
var resetNotify = document.getElementById('reset-message');
var recordCounter = document.getElementById('record-counter');
var st = window.localStorage;
var entry = st.clickcount;
var nameArray = [];
var newArr;

theLIst.innerHTML = st.getItem('names').replace(/[\[\],"]+/g,'');

function addName() {

    resetNotify.innerHTML = '';

    var name = document.getElementById('names');
    nameArray = JSON.parse(st.getItem('names'));
    entry = Number(entry)+1;
    newArr = makeArr(nameArray);

    if ( nameArray != null) {
       nameArray.push("<p class='name-entry'>"+name.value+"</p>");

    } else {
        nameArray = [];
        nameArray.push("<p class='name-entry'>"+name.value+"</p>");

    }

    st.setItem("names", JSON.stringify(nameArray));
    name.value = '';

    if (!newArr[0]) {
        entry = 1;
        theLIst.innerHTML = nameArray;
        recordCounter.innerHTML = "Records: " + entry;
    } else {
        theLIst.innerHTML = newArr[0].join('');
        recordCounter.innerHTML = "Records: " + entry;
    }
    JSON.parse(st.getItem('names'));    
}

function makeArr() {
    return Array.from(arguments);
}

function clearArray() {
    st.clear();
    nameArray = [];
    console.log(nameArray);
    theLIst.innerHTML = '';
    resetNotify.innerHTML = 'Array has been purged.';
}

我发现我没有办法处理每次刷新浏览器时都在使用字符串的事实，所以我使用一些正则表达式来消除多余的字符，这样我就可以在刷新时显示我的列表，这已经奏效为了我。

theLIst.innerHTML = st.getItem('names').replace(/[\[\],"]+/g,'');

这将一个干净的条目列表返回到我的 html 中。我还添加了一个记录计数器来跟踪我的条目。

感谢大家的投入！我希望这对某人有帮助。