Получение значения локального хранилища с помощью Observable не работает в Angular

Привет, я пытаюсь получить значение из локального хранилища с помощью наблюдаемого, но это не работает.

Мой предыдущий код был:

const isManager= JSON.parse(localStorage.getItem('isManager'));
console.info('isManager', isManager);
this.doNavigation(isManager);

Но я меняю его на это для постоянного чтения значения:

of(JSON.parse(localStorage.getItem('isManager'))).pipe(
      takeWhile(() => this.alive),
      map((isManager: boolean) => {
        console.info('isManager', isManager);
        this.doNavigation(isManager);
      })
    );

Проблема в том, что он не входит в тело карты, и в локальной строке есть значение, относящееся к этому полю.

Где вы подписываетесь на наблюдаемое? Вы используете асинхронный канал или приведенный выше фрагмент кода является функцией? Если это функция, вам нужно будет вызвать .subscribe() в конце.

peinearydevelopment 27.10.2022 01:57

Если вы хотите использовать значение элемента локального хранилища в качестве наблюдаемого потока, лучшим решением будет BehaviourSubject.

Jovana 27.10.2022 10:54

@Jovana Ваше предложение выглядит хорошо. Можете ли вы написать подробный ответ для вашего целевого решения?

robi 28.10.2022 12:46

@robi конечно, я добавил свой ответ. Я надеюсь, что это помогает. Если есть какая-то часть, которая требует дополнительных объяснений, не стесняйтесь комментировать.

Jovana 28.10.2022 14:18
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
136
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Почему бы не использовать

const isManager = localStorage.getItem('isManager') === 'true';
// You need to convert the string stored in local storage to a boolean.

if (isManager) {
  this.doNavigation(isManager);
}

В чем смысл использования of для создания наблюдаемого, сопоставленного с неопределенным? Очень вонючий код.

Ответ принят как подходящий

Я не уверен, что есть возможность непрерывно считывать значение из локального хранилища, чтобы это работало, вам нужно иметь возможность подписаться на значение элемента локального хранилища, а это просто невозможно.

То, что вы сделали в своем решении, создается Observable, содержащим только одно значение (текущее значение элемента локального хранилища), поэтому после подписки на этот метод вы получите только текущее значение, но оно не изменится независимо от того, будет ли элемент локального хранилища меняется значение.

Поскольку нет прямого способа подписаться на локальное хранилище, вы можете использовать сервис с BehaviourSubject, который будет постоянно хранить значение самого нового элемента локального хранилища. Таким образом, где бы вы ни подписывались на BehaviourSubject, все зависимые элементы всегда будут получать новейшее значение из потока.

Вот как должен выглядеть сервис, который обрабатывает локальное хранилище:

@Injectable({providedIn: 'root'})
export class LocalStorageService {
 private isManager$ = new BehaviorSubject<boolean>(false);

 constructor(){
   // get current value from local storage
   isManager = localStorage.getItem('isManager');

   // set stream's last value to local storage item's value
   // this way when service is initialized, isManager$'s value will be set to current local storage value
   this.isManager$.next(isManager as boolean);
 }

 setIsManager(value):void {
   // sets isManager$'s value to new value passed as argument
   // after this line is executed, value of all subscriptions will change to the latest value
   this.isManager$.next(value); 

   // sets local storage's value to new value
   // in case user reloads page, constructor will set isManager$ to last available value
   localStorage.setItem('isManager', value);
 }

 getIsManager(): Observable<boolean> {
   // returns stream of values, which means, after you've subscribed, you'll always get the latest value from stream
   return this.isManager$;
 }
}

Чтобы узнать больше о BehaviourSubject, ознакомьтесь с документацией RxJS для BehaviourSubject . Вы также можете посмотреть это видео, которое действительно хорошо объясняет основы BehaviourSubject и как их использовать.

Другие вопросы по теме