Help wanted on client side storage IndexedDB

MDN Learn
#1

Hi,

I’ve been trying to get the example with the note storage from https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage to work.
I have copied all the script directly from the website as instructed and since it doesn’t work I also copied the full script from Github at https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.js
The live example at https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/notes/ runs fine, but if I try to run my local copy I get the following error: Uncaught DOMException: IDBDatabase.transaction: ‘notes_os’ is not a known object store name
Does this have anything to do with running it from a local file instead of throught the internet? Since I am using a copy of the script on gitHub I have not provided a link to my own script.

thanks a lot for any help on this.

1 Like
#2

Hi again,

I don’t understand WHY it works, but I have renamed my .html file and hat seems to have solved the problem…

So no further help needed.

#3

@kfkm glad you got it sorted.

Yeah, afaik, there isn’t any security restriction on running an IDB database through localhost.

What did you rename the HTML from, and to?

#4

I had first named is index.html as instructed in the example. Because I wanted to try out if it would make a difference if it was not a local file, I wanted to rename it, to try of I it would work online, but I didn’t want it to interfere with my own websit, so I didn’t want to have it named index. I changed the name to indexedDB.html and suddenly it worked.

I was wondering; can I use one indexDB for different subpages on a website? for instance in this example; use one page as a form to fill in notes and another one for displaying the list?

Thanks for your response

#5

Hrm, that is kinda strange :wink: I think this is probably coincidence; no reason why it should make a difference.

Yes, as long as the domain is the same.

#6

Thanks.
Is there a way to make that work locally? as I am still trying stuff out for myself?
I now have made 2 pages in one folder, but then it doesn’t seem to have the IDB information filled in in the form on one page available in the second page.
I basically split the html file from the example in 2 pages, replacing the list bit on the first page with a link to the second page, which has the link info, but not the form section.
I am using the basic script file identically for both html pages; maybe I should change that?

If you could point me in the right direction, that would be very helpful.

#7

Hrm, I thought it shouyld work, but maybe I’m wrong? So in both pages, you are querying the database and trying to put the information into the UI?

Have you got your code available in a GitHub repo or something? If I can find the time, I could have a play around with it for you.

#8

Hi,

I’ve put my code on GitHub at https://github.com/Karen-Kramer/IndexedDB . Hope this enables you to have a look at it; I’m quite new to GitHub.
I did put the code as it is now on a website of my own; it works from there, but if I have these 4 files (2 html pages, one css stylesheet and 1 js code) locally on my computer in one folder the database does not seem to be used by both html files.
I would very much appreciate it if you can take some time to look into it.

#10

Dear Chris,

No, I am sorry, I never figured it out. Good luck and if you do succeed in finding out why it doesn’t work, please keep me posted.

#12

Same here. Firefox keeps throwing errors. However Chromium works fine.

#13

Incrementing the database version to 2 fixed the issue for me. Namely:

  let request = window.indexedDB.open('notes_db', 2);
#14

Maybe its because the previously stored indexedDB was removed since the browser is pointing to a different URL after renaming the html document’s name.

I was trying to follow the tutorial and kept altering the js file along the way. So, maybe the database was created in a bad structure. It seems that is the reason incrementing the database version solved the issue.

This is addressed in pull request (#10344).

1 Like