{"id":1202,"date":"2023-07-18T05:00:00","date_gmt":"2023-07-18T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1202"},"modified":"2023-07-17T15:51:40","modified_gmt":"2023-07-17T22:51:40","slug":"notifications-from-localstorage-with-signals","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/notifications-from-localstorage-with-signals\/","title":{"rendered":"Notifications from LocalStorage with Signals"},"content":{"rendered":"\n

Yesterday, we saw that LocalStorage<\/code> can be used as a persistent cache<\/a> to store our data in the browser. Earlier, we covered that services are a cache of their own<\/a> but have one instance per app\/browser tab, which means that applications opened in multiple tabs can have an inconsistent state since they each have their own “singleton” services.<\/p>\n\n\n\n

LocalStorage<\/code> can be used to share data between multiple tabs that render the same application. Even better, there is a storage<\/code> event<\/a> that can be listened to to know when another tab updated LocalStorage<\/code>: <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Using the Rxjs fromEvent<\/a><\/code> function, we can turn the above event listener into an Observable<\/code>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

And if we’re using Angular 16+, we can turn the above Observable<\/code> into a Signal<\/code> with one more function:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The above Signal<\/code> could be used in a service to synchronize data between tabs. Spying on that Signal<\/code> to see what’s going on in it is as easy as registering a side-effect on it using the effect<\/code> function<\/a>:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

You can see that code example on Stackblitz<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Yesterday, we saw that LocalStorage can be used as a persistent cache to store our data in the browser. Earlier, we covered that services are a cache of their own but have one instance per app\/browser tab, which means that applications opened in multiple tabs can have an inconsistent state since they each have their […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,17],"tags":[],"class_list":["post-1202","post","type-post","status-publish","format-standard","hentry","category-javascript","category-tools"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1202"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1202\/revisions"}],"predecessor-version":[{"id":1211,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1202\/revisions\/1211"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}