Как вывести массив из localStorage?

Question

Я сохраняю изменения в массиве в localStoage, используя метод save().Я использую его в методах remove() и add(), а элементы удаляются или добавляются в localStoage. Но когда я меняю переменную this.Mycollection, которая хранит мой статический массив в методе getPictures() на переменную this.getCollection для динамического отображения данных после добавления или удаления элементов изменения происходят только после перезагрузки страницы.Кроме того, когда я очищаю localStoage, я получаю сообщение об ошибке:

SyntaxError: Неожиданный токен u в JSON в позиции 0

Мне нужно реализовать сохранениезаписи галереи в localStorage, поэтому при перезагрузке страницы удаляются или добавляются все изменения.

import {Injectable} from '@angular/core';
import {myCollection} from  './gallery-data'; // my static array
import {Picture} from "./gallery-module/gallery/Picture"; // interface

@Injectable({
    providedIn: 'root'
})
export class GalleryService {
    Mycollection: Picture[] = myCollection;
    getCollection = JSON.parse(localStorage["Collection"]);

    constructor() {}

    save() {
        localStorage["Collection"] = JSON.stringify(this.Mycollection);
    }

    getPictures(): Picture[] {
        return (this.Mycollection);
    }

    remove(picId: number): void{
         this.Mycollection = this.Mycollection.filter(p => p.id !== picId);
            this.save();

    }

    add(title: string, url: string): void {
        const id: number = Math.max(0, ...this.Mycollection.map(({id}) => id)) + 1;
        const post: Picture = {
            title,
            url,
            id
        };
        this.Mycollection.unshift(post);
        this.save();

    }
}

Answer 1

Если вы хотите, чтобы для MyCollection было установлено значение localStorage [«Collection»], вам необходимо сделать следующее:

constructor() { 
// I’d rather use functions than string-Properties 
    let collection=localStorage.getItem(“Collection”);
    //Only parse if defined and to Mycollection
    if(collection){
         this.Mycollection=json.parse(collection)||[];
    }
}

Answer 2

Вы получили

Неожиданный токен в JSON в позиции 0

, потому что JSON.parse вызван на undefined (localStorage["Collection"] пуст или не установлен навсе)

Answer 3

Я думаю, что ваша проблема в том, что вы хотите, чтобы getCollection была функцией, которая возвращает локальное хранилище, но вы фактически превратили ее в переменную-член, которая инициализируется во время создания объекта (как если бы это было в конструкторе).

Вместо:

getCollection = JSON.parse(localStorage["Collection"]);

Возможно, вы хотели написать:

getCollection() {
    return JSON.parse(localStorage["Collection"] || "null");
}

(часть || "null" возвращает значение null, если нет Коллекция собственность в localStorage)

Answer 4

Вы можете сделать геттер для Pictures как:

export class GalleryService {
    ...

    get Pictures(): Picture[] {
        return this.Mycollection;
    }

    ...
}

, затем использовать Pictures в вашем HTML.Что-то вроде:

<div *ngFor="let picture of Pictures">
    <img [src]="picture"/>
</div>