Updating localStorage at runtime

Question

I'm trying to integrate an external app with the browser using localStorage.

The javascript running in browser writes a value on localStorage and an external app reads the value from sqlite DB (localstorage) and deletes the record.

The problem is, when I delete the record from localStorage DB, the browser is not updated, for it keeps in memory the old value, already deleted from localStorage. This way, I can't keep up if the value was already read by the external app.

So, how can I make the browser reload the localstorageDB? If it's not possible, can you suggest an alternative for this issue?

Answer 1

Is the browser and external app navigating to the same webpage, using the same browser? If not then this wont work out so well.

What's your external app written in? It might be easier for the external app to create a small web server (i.e. if its written in nodejs you could use express to create a small web server) and your javascript in your browser could do a request to localhost:8080 (or whatever port you bind to) and you can communicate through this mechanism by just doing http requests from browser => external app.

Answer 2

First, WebSQL is abandoned. It is unlikely to be implemented by other browsers, and Chrome is planning to remove it in future. Chrome is also free to move / restructure it anytime.

You cannot ask browsers to support every prototype tech forever, while keeping the browsers fast and free. All browsers cut features. And deprecated, non-standard features are the first in line.

Macmee's suggestion of having your external program opening a web server make sense. There are many embedded java web servers available, and cross origin is not a problem when you control the server.

---

As for your issue, perhaps it is the way you read it, because I can't reproduce. The following code read a count from the database, which I change with an external SQLite browser.

var db = openDatabase('mydb', '1.0', 'Test DB', 1 * 1024 * 1024);
db.transaction( ( tx ) => {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (count int)');
   tx.executeSql('DELETE FROM LOGS');
   tx.executeSql('INSERT INTO LOGS (count) VALUES (0)');
});

setInterval( () => {
   db.readTransaction( ( tx ) => {
      tx.executeSql( 'SELECT count FROM LOGS', null, ( tx, rs ) => {
         document.querySelector( 'div' ).textContent = rs.rows[0].count;
      });
   });
}, 500 );

Count: <div>?</div>

It works. Every time I write to disk after modifying the count from the db browser, Chrome can read the change immediately. (Chrome version 47.0.2526.73 beta-m)

So perhaps you can double check that you have actually written your changes to disk in the external program, and that your js is actually reading in a new transaction?

(If you stay in same transaction, you will not see new commits, this is what transaction is for.)