Local storage and web SQL not working across multiple pages

Question

To start of I have two pages (in the same folder, on the same domain), we'll call them dummy and dummy2.

I have tried both html5 localstorage and now webSQL and am finding that I can save and read the data when on dummy (dummy is the page that has a save and read button whilst dummy2 only has a read button), but when I switch from dummy to dummy2 the local storage and web SQL disappear.

From my understanding, both of these techniques should save the data to be used across multiple pages on your site?

Here is my webSQL code with the local storage commented out

<script>
    $(document).ready(function () {
        $("#save").click(function() {
            //localStorage.setItem('dummy', 'Hello there');
            //console.log(localStorage.getItem('dummy'));
            var db = window.openDatabase("UserDetails", "1.0", "User Details", 10000);
            db.transaction(populateDB, onDBError, onDBSuccess);
            function populateDB(tx) {
                tx.executeSql('DROP TABLE IF EXISTS DETAILS');
                tx.executeSql('CREATE TABLE IF NOT EXISTS DETAILS (id unique, Name, Email)');
                tx.executeSql('INSERT INTO DETAILS (id, Name, Email) VALUES (1, "User1", "[email protected]")');
            }
            function onDBError(error) {
                console.log("Error");
            }
            function onDBSuccess(msg) {
                console.log("Success (Saved)");
            }
        });
        $("#read").click(function() {
            tx.executeSql('SELECT * FROM DETAILS ORDER BY Name', [], onQuerySuccess, onDBError);
            function onQuerySuccess(tx, results){
                var name = results.row.item(i).Name;
                console.log(name);
            }

        });
    });
</script>

This is the result of hitting save;

But when I move to dummy2:

Any ideas?

Answer 1

Its some sort of weird system or even chrome installation corruption thing about the Resources tab. Your code works fine when I look at it and my Resources tab under localStorage updates instantly and persists on reload, though I remember one time for me the Resources tab didn't work and I had similar problems of it not working on refresh, and I had to use the Console only to see correct results.

If it works for you in the chrome console or by otherwise programatically querying the localStorage object, it doesn't matter what it says in those web inspector UI's it still works anyway and your code is fine.