以角度在會話存儲中設置多個值

Question

我正在嘗試在單擊事件時將一個對象和一個 int 發送到存儲。 它們需要映射到一起。 我不知道這個的語法。

帶有 onClick 更改的 HTML -

 <button class="btn btn-outline-danger w-100 my-2 my-sm-0" (click)="onAddCart(movie, movie.aPrice)">Rent</button> <button class="btn btn-outline-danger w-100 my-2 my-sm-0" (click)="onAddCart(movie, movie.aPurchasePrice)">Purchase</button>

在服務中，我想將該價格映射到我發送的對象。 我如何根據此更新功能。

Service.ts 文件-

 addMovieToCart(movies: any,price : number) { sessionStorage.setItem('movie', JSON.stringify(movies)); } getMovieFromCart() { return JSON.parse(sessionStorage.getItem('movie')); } removeAllMovieFromCart() { return sessionStorage.removeItem('movie'); }

Answer 1

您可以使用擴展運算符。

 export class AppComponent  {

  public obj: {} = {"name": "peter"};

  constructor() {
    console.log (this.obj);
    console.log ({...this.obj, "age": 22});
  }
}

https://stackblitz.com/edit/simple-spread-operator?file=src/app/app.component.ts

Answer 2

第一步是將電影及其價格存儲在同一個對象中：

const record = { movie, price }; 
sessionStorage.setItem('movie', record);

但是，通過這種方式您無法輕松存儲多部電影或通過 id 檢索它們。

更好的方法是將所有電影存儲在一個共享對象中。

const record = { movie, price };
// Default to empty dictionary if there is no movies record yet.
const existingMoviesJSON = sessionStorage.getItem('movies') || '{}';
const movies = JSON.parse(existingMoviesJSON);
// Assuming your movie has an id, but you could also use a unique name.
movies[movie.id] = record;
sessionStorage.setItem('movies', JSON.stringify(movies));

通過這種方式，您可以通過 id 檢索帶有價格的電影：

getMovieFromCart(movieId) {
    const movies = JSON.parse(sessionStorage.getItem('movies') || '{}');
    // Will return undefined if the movieId can't be found in the dictionary so be sure to handle this error.
    return movies[movieId];
}