尝试实施本地存储时我的网站无法加载答案

【问题标题】：My website won't load when trying to implement localstorage尝试实施本地存储时我的网站无法加载
【发布时间】：2020-07-22 23:43:38
【问题描述】：

我正在使用 Angular 9、Webstorage 6 中的 localStorageService 和 CLion。

我创建了三个服务：YoutubeService、MyLocalStorageService 和 VideoService。 YoutubeService 调用 youtube 数据 api，然后调用 MyLocalStorageService 函数，这些函数获取该数据并将适当的信息存储到本地存储中。 Video Service 从 MyLocalStorageService 中拉取以获取其余组件所需的信息。

我在每个 MyLocalStorageService 函数的开头和数据保存后键入 console.log。这样做，在我看来，数据已被正确存储。例如，当我打开开发工具并转到应用程序时，我可以看到数据在那里并且正确。

问题是页面无法加载。控制台中没有错误消息，并且标题和导航栏都不会加载。此外，我设置路由的方式是，当我在 CLion 终端中运行 ng serve 时，localhost 应该重定向到“/homepage”。然而，这甚至不会发生。

YoutubeService.ts 的片段

callAPI(nextPageToken?): Observable<any> {
    let url = `https://www.googleapis.com/youtube/v3/search?key=${this.apiKey}&channelId=${this.channelId}
    &order=date&part=snippet &type=video,id&maxResults=15`;
    if (nextPageToken) {
        url += `&pageToken=${nextPageToken}`;
    }
    return this.http.get<YTAPIObject>(url)
        .pipe(map(res => {
          console.log(res);
          this.localStorageService.addConfiguration(res);
         console.log(this.localStorageService.storage.retrieve('configuration'));
          return res.items;
        }));
  }

    getYTVidsFromAPI(nextPage?: any) {
        return new Promise((resolve, reject) => {
            this.callAPI(nextPage).subscribe(
                result => this.apiResult = result,
                (err) => console.log(err),
                () => {
                    this.localStorageService.addVideos(this.apiResult);
                console.log(this.localStorageService.storage.retrieve('videos'));
                });
        });
    }

MyLocalStorageService.ts 的段

public addVideos(items) {
    const videos: Video[] = [];
    console.log('addVideos: Hello');
    items.forEach(obj => {
      const id = obj.id;
      const snippet = obj.snippet;
      const video: Video = {id, snippet};
      videos.push(video);
    });
    this.storage.store('videos', videos);
  }

  public addConfiguration(apiResult) {

      console.log('addConfiguration: Hello');
      const configuration = {
          nextPage: apiResult.nextPageToken,
          itemsPerPage: apiResult.pageInfo.resultsPerPage,
          totalItems: apiResult.pageInfo.totalResults
      };
      this.storage.store('configuration', configuration);
  }

VideoService.ts 的片段

import { MyLocalStorageService } from './my-local-storage.service';


@Injectable({
  providedIn: 'root'
})
export class VideoService {


  constructor(private messageService: MessageService,
              private localStorageService: MyLocalStorageService,
  ) { }

  getVideos(nextPage?: any): Observable<any>{
    console.log(this.localStorageService.storage.retrieve('videos'));
    if (nextPage) {
      return of(this.localStorageService.storage.retrieve('videos'));
    } else {
      return of(this.localStorageService.storage.retrieve('videos'));
    }
  }

  getConfigInfo(): any {
    console.log(this.localStorageService.storage.retrieve('videos'));
    return of(this.localStorageService.storage.retrieve('configuration'));
  }

【问题讨论】：

欢迎来到stackoverflow！请将您的代码作为文本粘贴到代码块中。如果有人想尝试重现该问题，这将使其更易于阅读并允许复制/粘贴。

标签： angular clion web-storage

【解决方案1】：

我想通了，我没有兑现承诺。

    getYTVidsFromAPI(nextPage?: any) {
        return new Promise((resolve, reject) => {
            this.callAPI(nextPage).subscribe(
                result => this.apiResult = result,
                (err) => console.log(err),
                () => {
                    this.localStorageService.addVideos(this.apiResult);
              console.log(this.localStorageService.storage.retrieve('videos'));
                     resolve(true); // This should have been included
                });
        });
    }

【讨论】：