javascript - JS，将数组数据保存在 sessionStorage 中的问题

Question

这是有问题的代码:

let newFriend = event.target.id;
let friends;
if (sessionStorage.getItem('friends') === null || sessionStorage.getItem('friends') === undefined || sessionStorage.getItem('friends') === '') {
    console.log('DEV_NO FRIENDS!sessionStorage[\'friends\']: ' + sessionStorage.getItem('friends'));
    friends = [newFriend];
} else {
    let currentFriends = sessionStorage.getItem('friends').split(',');
    console.log(currentFriends.length);
    // let currentFriends = JSON.parse(sessionStorage.getItem('friends'));
    console.log('DEV_sessionStorage friends: ' + currentFriends);
    console.log('DEV_inArray condition: ' + $.inArray(newFriend, currentFriends));
    if (!($.inArray(newFriend, currentFriends) !== -1)) {
        console.log('DEV_if not in array!');
        friends = currentFriends.push(newFriend);
        console.log('DEV_friends in if: ' + friends);
    }
}
let data = {friends: friends};

它卡在图像标签上。 sessionStorage 会在成功登录后填充，如下所示:

if (response['friends'] !== undefined) {
    sessionStorage.setItem('friends', response['friends']);
} else {
    sessionStorage.removeItem('friends');
}

或者像这样更新，如果添加新 friend :

ajax(url, 'GET', 'none', 'Kinvey', function(response) {
    sessionStorage.setItem('friends', response['friends']);
});

想法是:用户可以将 friend 添加到他的 friend 列表中。 friend 被“放入”我的应用程序后端，位于名为“ friend ”的列中。然后更新 sessionStorage 以存储新 friend 。据我所知，sessionStorage仅支持字符串，所以我想将 friend 存储为字符串，并用“，”分隔。然后我会选择它('currentFriends')并将该字符串拆分为数组。然后推送下一项并将数据发送回服务器，然后更新sessionStorage。但我就是做不到——我已经尝试了三个多小时了。正如您在众多 console.log() 中看到的那样，由于某种原因，我无法相应地处理我的数据，并且我不知道我做错了什么。很抱歉这篇文章很长，但我真的被困在这里了..

底线: 正如 @dfasoro 善意地解释的那样 - 在使用 REST 时，应始终确保将数据保存在 JSON 字符串中。我的第二个问题是 array.push() 返回整数(数组的长度)而不是新数组。

Answer 1

我希望这会对您有所帮助，我已经帮助您重构了代码并删除了不必要的内容，我希望内联注释也能对您有所帮助。

图像 Hook 代码

let newFriend = event.target.id;
let friends = [];
if (sessionStorage.getItem('friends')) {
    try {
        //this will throw an error if invalid array json is in friends sessionStorage
        friends = JSON.parse(sessionStorage.getItem('friends'));
    }
    catch (e) { }
}

//is friend in the array?
//if not add and store back into sessionStorage
if (friends.indexOf(newFriend) == -1) {
    friends.push(newFriend);
    sessionStorage.setItem('friends', JSON.stringify(friends));
}

let data = {friends: friends};
//continue with your image hook code

登录代码

//login code
if (response['friends']) {
    sessionStorage.setItem('friends', JSON.stringify(response['friends']));
} else {
    sessionStorage.removeItem('friends');
}

输入代码

//update PUT code
ajax(url, 'GET', 'none', 'Kinvey', function(response) {
    sessionStorage.setItem('friends', JSON.stringify(response['friends']));
});

您基本上将数据存储为 JSON 字符串并作为 JSON 对象检索。您也不需要 null、未定义、空测试等。您基本上是在尝试测试虚假值。我也真的希望您的响应对象是映射到 friend 数组的标准 JSON 对象，而不是逗号分隔的 friend 列表，例如{"friends": [4, 5, 3, 2]} 而不是 `{"friends": "4, 5, 3, 2"}"