保存popup.html信息以用于下一个会话

Question

I feel like this is simple, but I can't figure it out.

My app basically makes modification to the popup.html page by doing a document.getElementById which works perfectly.

[..]
document.getElementById("data").innerHTML = "inserting data here"
[..]

As expected, when clicking away from the popup.html, the page closes. When it opens back up, the modification is no longer there.

I've been looking at background pages https://developers.google.com/chrome/apps/docs/background?csw=1#example-permission to try and get that sorted out, but it doesn't feel like it would do what I'd need to.

Does anyone have any recommendations ?

Thanks!

Answer 1

You can use localStorage or sessionStorage to store the values when popup opens like this

localStorage.setItem('mydata', 'inserting data here')

and when popup loads you can fetch the value from it

document.getElementById("data").innerHTML = localStorage.getItem('mydata')

so your code would be something like this

if(localStorage.getItem('mydata')) {
   document.getElementById("data").innerHTML = localStorage.getItem('mydata')
} else {
   localStorage.setItem('mydata', 'inserting data here')
}

if the popup has same domain as the main page it will work fine

Answer 2

You can use Chromes built-in storage APIs to accomplish this.

http://developer.chrome.com/extensions/storage.html

// In your manifest

"permissions": [
    "storage"
  ],

// Saving

function saveChanges() {
  // Get a value saved in a form.
  var theValue = textarea.value;
  // Check that there's some code there.
  if (!theValue) {
    message('Error: No value specified');
    return;
  }
  // Save it using the Chrome extension storage API.
  chrome.storage.local.set({'value': theValue}, function() {
    // Notify that we saved.
    message('Settings saved');
  });
}

// Retrieving

chrome.storage.local.get('value', function(data) {
   // act upon data.
});