LocalStorage one vs multiple keys

Question

Is there a performance difference between using one LocalStorage key + encoded items, vs multiple storage keys?

EG

let key = 'ls-key';
let values = {
  v1: [...],
  v2: '...',
  v3: { ...}
}

let encoded = JSON.stringify(values);

window.localStorage.setItem(key, encoded);

vs

let v1 = [...];
let v2 = '...';
let v3 = { ...};

window.localStorage.setItem(key1, JSON.stringify(v1));
window.localStorage.setItem(key2, JSON.stringify(v2));
window.localStorage.setItem(key3, JSON.stringify(v3));

Answer 1

They will both work. Architecturally the second version is better in my opinion, because you can access, modify and remove individual items without having to access everything else.

For example:

window.localStorage.removeItem(key2);

Instead of:

const values = window.localStorage.getItem(key); 

values.splice(1,1);

window.localstorage.setItem(key, values);