LocalStorage returning null in a different tab in chrome

Question

This is my issue:

I update the localStorage in popup.js in a new tab. I access the same localStorage(same key) in the background.js.

Now this is returning null in every tab apart from the chrome://extensions tab(when I load the extensions.)

I thought localStorage was persistant across all tabs.

Code:

popup.js:

$(document).ready(function (){

    alert(localStorage.getItem('filters'));
    var oldFilters = localStorage.getItem('filters');
    //All the filters show up on the popup.html page.
    document.getElementById('td1').innerHTML = oldFilters;

    var dat = oldFilters + "," + newArray[j]
    localStorage.setItem('filters',String(dat));
}

background.js:

$(window).ready(function() {
  // Handler for .ready() called.

 var filters = localStorage.getItem('filters');

   alert("background + "+ filters);
    //This shows all the filters in the chrome:extensions page but always pops up "background + null" in every new tab load. 

//changeImage(filters);

});

If you view your local storage in inspect element->resources is anything there? — Brett Gregson, Dec 23 '12 at 04:24
Absolutely, this is the flow. That's why it shows me all the stored data when I go to chrome:extensions page and reload the data. — Hick, Dec 23 '12 at 04:30
And I don't think so that I would have set the data in background.js everytime I open a new tab, now do I? — Hick, Dec 23 '12 at 04:30
It definitely should be persisting across multiple tabs. Can you maybe post a bit of code? — Brett Gregson, Dec 23 '12 at 04:32
Had forgotten to add that piece of code that does that. Have changed the popup.js to show that. — Hick, Dec 23 '12 at 08:18
It looks like your `background.js` is in fact used as content script. You wrote in the comment that it "shows all the filters in the chrome:extensions page but always pops up "background + null" in **every new tab load**." Background page does not reload itself into each tab. — Stan, Dec 23 '12 at 08:20

score 16 · Accepted Answer · edited Dec 23 '12 at 09:55

Background and Browser Action(In your case) Pages live in isolated worlds, their local storage details are not accessible to each other, if you want this sort of access to happen use chrome.storage for your storage needs.

It has few advantages

Your extension's content scripts can directly access user data without the need for a background page.
A user's extension settings can be persisted even when using split incognito behavior.
User data can be stored as objects (the localStorage API stores data in strings).

Methods used

chrome.storage.local.get
chrome.storage.local.set
(use sync instead of local if the data needs to be synchronized with Google Sync)

Demonstration

manifest.json

Ensure all permissions are available for accessing storage API.

{
"name":"Local Storage Demo",
"description":"This is a small use case for using local storage",
"version":"1",
"manifest_version":2,
"background":{
    "scripts":["background.js"]
},
"browser_action":{
    "default_popup":"popup.html",
    "default_icon":"logo.png"
},
"permissions":["storage"]
}

popup.html

A trivial popup html page which refers popup.js to surpass CSP.

<!doctype html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>

background.js

This scripts sets content to chrome storage

//Set some content from background page
chrome.storage.local.set({"identifier":"Some awesome Content"},function (){
    console.log("Storage Succesful");
});
//get all contents of chrome storage
chrome.storage.local.get(null,function (obj){
        console.log(JSON.stringify(obj));
});

popup.js

This script retrieves and sets content from\to chrome storage

document.addEventListener("DOMContentLoaded",function (){
    //Fetch all contents
    chrome.storage.local.get(null,function (obj){
        console.log(JSON.stringify(obj));
    });
    //Set some content from browser action
    chrome.storage.local.set({"anotherIdentifier":"Another awesome Content"},function (){
        console.log("Storage Succesful");
    });
});

If you look at outputs of these js pages, communication of storage (Background -> popup and popup -> background) is achieved.

Brilliant answer. I tried many solutions on SO and this one made me again believe in the beauty humanity! Thanks — JTE, Sep 22 '13 at 01:04