0

I'm trying to build a chrome extension that would feed data in the localStorage of the form:

var a = 'YouTube';
var data = {
    'title': 'twenty one pilots: Stressed Out [OFFICIAL VIDEO]',
    'url': 'https://www.youtube.com/watch?v=pXRviuL6vMY'
};
localStorage.setItem(a, data);

But when I look into the resources in dev. tools, it doesn't show the data object in the value table. How can I make it appear in there?What's wrong with the code? The Image of the console and the localStorage.

I have tried commands like localStorage.YouTube and localStorage.getItem('YouTube') but it always returns [object Object].

What could be a possible workaround for making something like this possible?

Meet
  • 294
  • 3
  • 8
  • You may want to switch to asynchronous [chrome.storage](https://developer.chrome.com/extensions/storage) that supports object values directly. – wOxxOm Jul 16 '16 at 11:23
  • @wOxxOm thanks for sharing that. Can we see the key-value pairs of `chrome.storage` in the dev-tools? – Meet Jul 16 '16 at 17:49
  • yep: [Inspect chrome.storage.sync while debugging Chrome extension](http://stackoverflow.com/a/32471596) – wOxxOm Jul 16 '16 at 17:55

1 Answers1

0

LocalStorage in HTML5 can only store key-values strings. You can't store objects there.

BUT, you can use JSON. To make a string from your object you can use JSON.stringify(yourObj);
and when you want to get value from LocalStorage you simply parse that string and create new object which you can use again. JSON.parse(yourObj);

Nefritox
  • 37
  • 9