JS, issue with keeping array data in sessionStorage

Question

Here is the problematic code:

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

It is hooked on image tag. The sessionStorage fills on successful login like so:

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

Or is updated like so, if new friend is added:

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

The idea is: a user can add friends to his friends list. The friend is 'PUT' into my app's back-end, inside a column called 'friends'. Then sessionStorage is updated to store the new friend. To my knowledge sessionStorage supports only strings, so I thought lets store the friends as string, separated by ",". Then I would pick that up ('currentFriends') and split that string into array. Then push the next item and send the data back to the server, then update sessionStorage. But I simply cannot do it - I've been trying for over 3 hours now. As you can see with the numerous console.log()s, for some reason I cannot process my data accordingly and I have no idea what am I doing wrong. Sorry for the long post, but I'm really stuck in here..

Bottom line: as @dfasoro kindly explained - when working with REST one should always make sure he keeps his data in JSON strings. My second problem was that array.push() returns integer (length of array) instead of new array.

I will just store your arrays or objects as JSON strings and parse them when you want to retrieve them — dfasoro
– dfasoro, Commented Aug 29, 2016 at 21:14
@dfasoro How exactly am I to come about and do so? I've tried putting inside sessionStorage with JSON.stringify(). It didn't help. — Alex
– Alex, Commented Aug 29, 2016 at 21:16
how didn't it help? you are supposed to do JSON.stringify on objects or arrays not on variables that are strings already. — dfasoro
– dfasoro, Commented Aug 29, 2016 at 21:17
var friends = [5, 6, 7, 10]; sessionStorage.setItem('friends', JSON.stringify(friends)); to save and var friends = JSON.parse(sessionStorage.getItem('friends')) to retrieve — dfasoro
– dfasoro, Commented Aug 29, 2016 at 21:19
@dfasoro Well I get my data from the back-end, where I have already sent the data with JSON.stringify(), so is it wrong to assume that if I take the string from the back-end and save it sessionStorage it would be a JSON string? — Alex
– Alex, Commented Aug 29, 2016 at 21:20

dfasoro · Accepted Answer · 2016-08-29 21:51:18Z

I hope this will help you, I have helped you refactor your code and removed unneccesaries, I hope the inline comments help you as well.

IMAGE HOOK CODE

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

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

PUT CODE

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

You basically store the data as JSON string and retrieve as JSON object. You also don't need the null, undefined, empty test etc. You are basically trying to test for a falsy value. I also really hope that your response object is a standard JSON object mapped to a friend array and not a comma separated list of friends e.g. {"friends": [4, 5, 3, 2]} and not `{"friends": "4, 5, 3, 2"}"

BonifatiusK · Accepted Answer · 2016-08-30 14:58:23Z

0

The above works perfect as sessionStorage only uses a key value pair.

Though I also use sessionJS to get/set/delete data to/from sessionStorage maybe this will also help you.

answered Aug 30, 2016 at 14:58

BonifatiusK

2,3615 gold badges30 silver badges45 bronze badges

Collectives™ on Stack Overflow

JS, issue with keeping array data in sessionStorage

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related