how to save an array in localstorage

Question

I currently have this code, it saves in localstorage, but it generates several objects, I would like to store everything in a single array

getItemById(id) {
return this.cacheS.getOrSetCache(`StoreService_getItemById_${id}_${this.layout.emp.id}`, this.http.get(`${environment.API_URL}item/getById/${id}`), 300000);
}

  getOrSetCache(key: string, request: Observable<any>, msToExpire = 3600000): Observable<any> {
let cache: any = {};

cache = JSON.parse(localStorage.getItem(key));

return (cache?.data && (cache?.exp > Date.now())) ?
  of(cache.data) :
  request.pipe(tap(v => {
    localStorage.setItem(key, JSON.stringify({data: v, exp: (Date.now() + msToExpire)}));
  }));
}

This code works, but I wanted to join all the StoreService_getItemById_, with this code it makes the array in a single StoreService_getItemById_, if you notice the image has several local storage with the name StoreService_getItemById_, I would like it to have only one and inside that it had the objects in array format

        localStorage.setItem(key, JSON.stringify({data: [v], exp: (Date.now() + msToExpire)}));

I wish it were the same "item"

You seem to be trying to store an observable in localStorage..? That’s not going to work. — MikeOne
– MikeOne, Commented Aug 16, 2022 at 17:50
@MikeOne I updated my answer, it saves, but it saves several objects, I wanted to save everything in a single array — Leonardo Lima
– Leonardo Lima, Commented Aug 16, 2022 at 17:52
Okay.. the format you have for ‘v’ seems logical. How would you like the array to look like? — MikeOne
– MikeOne, Commented Aug 16, 2022 at 17:55
@MikeOne StoreService_getItemById_:[{id: 7518, ecommerce_id: null,}] could have several objects inside the array — Leonardo Lima
– Leonardo Lima, Commented Aug 16, 2022 at 17:59

Chris Hamilton · Accepted Answer · 2022-08-16 20:18:35Z

3

It sounds like you want to append items to an array in local storage. The thing is, local storage only saves strings. You can parse the string to convert it into an array, append a new item, then overwrite the old string.

const key = 'my-array-key';
const someData = { name: 'name', id: 'abcdef' };
const msToExpire = 5000;

// Convert string to array, initializes empty array if string is empty
let arr: any[] = [];
let string = localStorage.getItem(key);
if (string) arr = JSON.parse(string);

// Push a new item and overwrite the old string
arr.push({data: someData, exp: (Date.now() + msToExpire)});
localStorage.setItem(key, JSON.stringify(arr));

I'm not really sure how you want to structure that function but this example should give you the general idea.

edited Aug 16, 2022 at 20:18

answered Aug 16, 2022 at 19:39

Chris Hamilton

11.1k1 gold badge18 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Leonardo Lima Over a year ago

what happened to a "cache" variable?

Chris Hamilton Over a year ago

@LeonardoLima yeah I'm not really sure what you want to do there, I edited my answer to give you the general idea.

Leonardo Lima Over a year ago

your answer is good, I tested it here, it worked, but how could I map the ones that are already saved? In my function I was able to map them, I will mark your answer as the best!

Leonardo Lima Over a year ago

whenever a product id is already saved in localstorage it will not make the getItemById request again, that was the idea and also if the expiration date has expired

Collectives™ on Stack Overflow

how to save an array in localstorage

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related