28

Is it possible to store data in a way that will be accessible after a browser restart in the context of a chrome extension?

Vikas
  • 24,082
  • 37
  • 117
  • 159
Luke
  • 18,585
  • 24
  • 87
  • 110

6 Answers6

45

Even simpler than that:

To read:

    var myStoredValue = localStorage["TheKeyToMyStoredValue"];

To write:

    localStorage["TheKeyToMyStoredValue"] = myNewValueToStore;

To get rid of:

    delete localStorage["TheKeyToMyStoredValue"];
Izzy Ahmad
  • 77
  • 12
Martin Bartlett
  • 466
  • 1
  • 4
  • 2
21

Yes, it is. Going over a full walkthrough of how to do this would probably exceed the length of a reasonable StackOverflow answer, so I'll refer you to this very extensive tutorial by Rajdeep Dua.

The relevant code would look like this:

// Store item in local storage:
function setItem(key, value) {
  try {
    log("Storing [" + key + ":" + value + "]");
    window.localStorage.removeItem(key);      // <-- Local storage!
    window.localStorage.setItem(key, value);  // <-- Local storage!
  } catch(e) {
    log("Error inside setItem");
    log(e);
  }
  log("Return from setItem" + key + ":" +  value);
}

// Gets item from local storage with specified key.
function getItem(key) {
  var value;
  log('Retrieving key [' + key + ']');
  try {
    value = window.localStorage.getItem(key);  // <-- Local storage!
  }catch(e) {
    log("Error inside getItem() for key:" + key);
  log(e);
  value = "null";
  }
  log("Returning value: " + value);
  return value;
}

// Clears all key/value pairs in local storage.
function clearStrg() {
  log('about to clear local storage');
  window.localStorage.clear(); // <-- Local storage!
  log('cleared');
}

function log(txt) {
  if(logging) {
    console.log(txt);
  }
}
Lucius
  • 2,794
  • 4
  • 20
  • 42
John Feminella
  • 303,634
  • 46
  • 339
  • 357
  • 1
    The tutorial's link is broken, but the example still exists. Here is the example of the tutorial https://chrome.google.com/webstore/detail/hmbpgbeiphknbkjjfppodijapijlpkkc – 吳強福 Dec 24 '11 at 10:59
  • This API does a pretty good job as well: https://developer.chrome.com/extensions/storage.html It also allows you to sync the data to your profile – Adonis K. Kakoulidis Jan 24 '13 at 03:52
7

Chrome also supports the HTML5 Web Database spec. This gives you a local SQL database, so you can do more complex things than simply storing name/value pairs in Local Storage.

Ken Liu
  • 22,503
  • 19
  • 75
  • 98
5

The current chrome version has local storage.

I have used it myself. You can use modernizr to detect whether the browser supports it or not. I have written a solution for a client where I do a fallback to cookie if no local storage exists, but this shouldn't be a problem for extensions.

Patrick Cornelissen
  • 7,968
  • 6
  • 48
  • 70
3

Nowadays it might be better to use chrome.storage chrome.storage is asynchronous, which makes it faster and localStorage is limited to 5MB.

krbnr
  • 160
  • 10
  • "which makes it faster" _\[citation needed\]_ – Xan Feb 29 '16 at 20:21
  • As specified [here](https://developer.chrome.com/apps/storage) by chrome devs, bulk non-blocking reads and writes operations are faster than the blocking and serial localStorage API. – krbnr Mar 07 '16 at 22:26
  • Thanks for the link! – Xan Mar 07 '16 at 22:30
2

there are already some great answers here, but note that if you decide to use a content script in your extension, that content script won't have access to localStorage. therefore chrome.storage is a good alternative.

Noam Hacker
  • 4,671
  • 7
  • 34
  • 55
  • 2
    _Technically_ it will have access to `localStorage` - it will be the local storage of the domain the content script is running on (shared with the page itself). – Xan Dec 14 '18 at 09:30