Observable available in store2?

[GELight]

Hi,
Sorry for my bad englisch before ... :)
Currently we evaluate whether we could use store2 in our projects.

For better understanding our requirements:
The pages in our applications are based on multiple web-apps based on Vue.js, React or Vanilla, etc ... at same time.

We need a store for our application states.
My question is:
Is there a functionallity in your library to use "Observables" that any applications will triggert automatically by changes where variables from the store are used?

[EDIT]
Another improvement will be to have promises that I can sure that my value is updatet successful in my store like this:

window.store.transact('test', (obj) => {
    obj.test++;
}).then((updatedValue) => {
    window.EventEmitter3.emit("button.clicked", window.store('test'));
    // or ...
    window.EventEmitter3.emit("button.clicked", updatedValue);
);

... same fpr set() or setAll() ...

If I am blind or do not understand your documentation then "sorry" so far. :)

Best regards,
Mario

[nbubna]

If you are talking about multiple user-interfaces communicating with each other, you first need to clarify whether these Vue/React/Vanilla webapps are open in the same browser window or tab or different ones. If they are open in the same, then no, i don't have any support for watching changes because store() uses localStorage which is a browser native object. I doubt it is even possible to observe that like you would a normal object.

If you are talking about webapps open in different windows or tabs, then i do have support for that via an extension called store.on.js. This is possible because browsers provide an event listener hook to tell when a different window has made a change to the localStorage. It does not fire events for changes within the same window, though.

As for returning Promises, you first need to understand that localStorage is purely synchronous. You do not need to wait for Promise resolution. When you make any call to store(), it is executed synchronously. No promise necessary. You can be sure your update is successful as long as no quota error was thrown. If, however, you are working with an API that requires you to speak in Promises, there is an extension called store.async.js that may prove convenient. This uses setTimeout to wrap your store() call execution to force it to be asynchronous. In my opinion, it has no serious use, but if you really want it, it is there.

[GELight]

Hi nbubna,

Many thanks for your feedback. 👍
Per default our app is running in one window.
But if its possible with your "on" extension to use multiple browser windows or tabs then it is very very nice for us and a better usabillity in our application. 🥇

Ok ... then I think we have to solve our problem by another way.

But if you say all is syncronous then the following code should be work correct ... right?

let value = window.store("test");
window.store.set("test", value++);
window.EventEmitter3.emit("button.clicked", window.store("test"));

When YES, then I have another problem in my logic. :)

Mario

[nbubna]

Yes, all localStorage operations (and sessionStorage) are purely synchronous, so store() is also.

Now that i have someone with an actual use case for detecting store() changes in the same window, i may take some free time to see if i can't create a solution for detecting those changes as well. You should not wait on that, though, as it is a busy time for me and it would be an experiment. I do wish the browsers would fire storage events for localStorage changes in the same window, but they do not. :(

[GELight]

No Problem.

Take your time. :)
Maybe a solution could be an observable based on the https://www.npmjs.com/package/rxjs package. However you can it integrate in your lib. :)

Wish you luck, :)

Thank you and best regards,
Mario