以角度在会话存储中设置多个值答案

【问题标题】：Setting multiple values in session storage in angular以角度在会话存储中设置多个值
【发布时间】：2020-10-05 13:46:48
【问题描述】：

我正在尝试在单击事件时将对象和 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');
  }

【问题讨论】：

你试过 JSON.parse(sessionStorage.movie) 吗？
“将该价格映射到对象”是什么意思？类似{price: price, movie: movie} 或简而言之{price, movie}？
我的意思是，我怎样才能以这样的方式发送特定的电影对象和价格，当我尝试获取特定的电影对象时，我也可以得到我发送的价格电影。

标签： javascript html json angular

【解决方案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

【讨论】：

【解决方案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];
}

【讨论】：