Shared variable scope between two browser tabs? [duplicate]

Question

I have web application with a HTML form which contains a select/option entry. It worked fine in a demo with 200 items, even if it's clumsy to find the one you want, but in reality there are over 30000 items. (It's a parts list.)

My first thought is have, instead of a drop down box, to have a 'choose part' button and this opens a second browser tab ('Search Parts') and then the full list displayed, search capabilities etc, each with a 'copy to clipboard' button. Then the user can press one and go back to the original form and press a 'paste' button and the name of the part will be entered into the form.

What I am asking is, is there a javascript scope in which I can store a small text field and id number in the 'Search Parts' tab so that I could get retrieve it when the user presses a 'paste' button on the main form page? I don't want to send messages back to the server.

(BTW I'm not necessarily interested in implementing Ctrl+C/V or using the system clipboard, unless that's part of an easy solution.)

Thanks!

Answer 1

You can use the HTML5 storage API - window.localStorage

var val = localStorage.getItem("key"); //get

localStorage.setItem("key", val);  //set

Much cleaner than cookies. More here.

Answer 2

As long as the first page opens the "search parts" tab, you should have access (from inside the "search parts" page) to the window.opener object. If you have a global object set in the parent page that holds the properties/variables you need, you should have complete access from within the child page. Because the first page does the opening, you will still have access to call methods in the child as well, but I would personally stick to have one or the other perform updating.