Develop Reference

Accessing item from LocalStorage (Angular 1.2)

I am running an old version of Angular - I have an object within my localStorage and I am trying to retrieve a single item from the object (rather than the whole the thing..)
var email = localStorage.user;
However the output of the localStorage.user variable is much longer (see below)- how would I retrieve the email address in this case 'bob#abc.com'?
{"firstname":"Bob","lastname":"Dole","id":"2000001999","accountId":"15","email":"bob#abc.com","instances":[{"name":"Test"}]}"

LocalStorage values are always stored as strings. In order to refer to the email in the object, we need to convert it to a JSON. We can do that by parsing the string using JSON.parse() method like below :
var email = JSON.parse(localstorage.user).email

You have Json structure not JS object, so parse it 1st
var email = JSON.parse(localStorage.user).email;

Using html5 local storage we can store data, add expire time by using cookies and sessions. https://stackoverflow.com/a/41385990/6554634 go through that, gives a lot of explanation

how to send variable value from one page to another

I am trying to send an information from one page to another through javascript file
the information will only contain a value of single variable.
how to accomplish this?I dont want to send it through query string as the value will be visible in the URL.
is there any other way?

You could save your data in LocalStorage and retrieve it on the other page.
localStorage.yourData = '{ test:"data" }';
console.log(localStorage['yourData']);

You have a few options to do that.
Depending on what browser is used, using localStorage is an option
//localStorage ONLY stores flat key:value pairs and can't contain Objects
localStorage.myString = "hello world";
localStorage.myObject = JSON.stringify({ foo: "bar" });
//Reading back the values is simple aswell
var myString = localStorage.myString;
var myObject = JSON.parse(localStorage.myObject);
Another method would be using a hash or query string. For example, you could redirect to www.yourdomain.com/your/path?myValue=1234
And then parse that by reading the search value from window.location.search (Will return ?myValue=1234 in that case) and splitting it on =:
var myValue = window.location.search.split("=")[1];
Another option is using hashes, similar to query params. Or even cookies.
BUT, all these methods will expose the value to the user, so if he wants to get that value, he will be able to!

At first, as other answers, use localStorage or sessionStorage to store global data.
Otherwise, you can add an event listener to detect the change of the storage value in your target page as follow:
window.addEventListener('storage', (e) => console.log(e.key, e.oldValue, e.newValue))
See: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#Responding_to_storage_changes_with_the_StorageEvent

Storing a php array client side

I have a web page that queries a database to get a list of products with their related data like price, size,weight e.t.c and displays it to the user, I want to add one of those sort dropdown list so that a user can sort the products by price or any other key I specify.
I plan to do it using Ajax on dropdown change query the database again and use the selected value as the sort key in the query.
My question is, is there a way that this can be done client side without running another query? Can php send the query result to the browser and store it there and then use jquery to sort it over and over again?
Thanks everyone for the help!

There are many ways this can be achieved. A simple example can be done with HTML5 LocalStorage.
Here's a general overview of how that can be done:
You make an initial call to your DB for products via AJAX, returns a JSON object.
You serialize that JSON object via javascript e.g. var stringData = JSON.stringify(data)
Store said variable into localstorage: window.localStorage.setItem("products", stringData);
You can then later access it via var products = window.localStorage.getItem("products) and finally deserialize it with var productsObj = JSON.parse(products) or do it all in one c-c-c-c-c-combo breaker: productsObj = JSON.parse(window.localStorage.getItem("products))
Do as you please by using filtering functions!
Another way is to store the initial JSON object using some form of store e.g. Redux, but let's save that for another day ;)
And of course, you may optionally have a globally accessible object that you can assign the initial JSON data to as a property and later access as you would any other property.

Take a look at this jquery plugin
http://tablesorter.com/docs/example-ajax.html
Maybe it's what you are looking for? No need to requery the database.

Setting Object to Chrome Storage

So I'm trying to save an object via the chrome.storage API. The relevant code is:
var images = null;
var storage = chrome.storage.sync;
var key = "key";
images = getImages(source);
alert(images.length); // returns 4
storage.set({key: images});
storage.get("key", function(result) {
alert(result.length); // returns undefined
});
I'm tested that immediately after the getImages() function, images is a wrapped set JQuery object with a length of 4. However, when I try to access images.length via the storage.get callback, the result is undefined.
Could someone help identify the error in how I am storing and/or retrieving this JQuery object?
Update 1:
Thank you all for your help. As clarification for the use case, I am using chrome.storage instead of localStorage because I plan to pass extension info to another script.
Fortunately, TranQ/Xan's solution has enabled me to access the array via the storage.get call.
I'm still experiencing issues working with the wrapped set JQuery object stored in the array but I'll post a separate question since the current solution encapsulates broader use cases.

TranQ's comment is on point.
Presumably, images is an array. You store that array under the "key" key.
When you execute the get() function, it returns an object populated with all key-value pairs you asked, even if you only ask for one key.
So, result is an object {key : [/* something */]}. Objects do not have a length property, and you get undefined
You need to use result.key (or result["key"]) to access your array.

Shared objects between windows Javascript

I have an application which open several windows (with javascript) in the same domain.
I would like to share some javascript objects between these windows (an object which contains some configurations for example).
Is it possible to do this in javascript and how to do this ?
Thanks.

There are 2 possibilities: local storage and session storage
The session storage stores value for duration of the session, the value gets deleted when browser is closed and re-opened.
// Store value
sessionStorage.setItem('key', 'value');
//or
sessionStorage['key'] = value;
// Retrieve value
alert(sessionStorage.getItem('key'));
The local storage stores value beyond the duration of the session, the value can be retrievedeven after closing and re-opening the browser.
// Store value
localStorage.setItem('key', 'value');
//or
localStorage['key'] = value;
// Retrieve value
alert(localStorage.getItem('key'));

Use localStorage along with JSON to store your objects as strings:
Setting:
window.localStorage.setItem('yourKey', JSON.stringify(yourObject));
Getting:
var yourObject = JSON.parse(window.localStorage.getItem('yourKey'));
the localStorage data will be shared across all of your pages as long as they exist in the same domain.

If you used window.open() to create the second window, window.opener in the second window might give you access to the first window. See MDN.