Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Retrieving Date object from chrome storage not working

In a Chrome Extension, I'm trying to save a Date object to storage then read it back. According to the official documentation,

Values with a typeof "object" and "function" will typically serialize to {}, with the exception of Array (serializes as expected), Date, and Regex (serialize using their String representation).

I'm saving to storage as:

 var value= new Date(Date.now());
 chrome.storage.sync.set({"testdate":value}, function(){
     console.log("saved testdate to storage:");
     console.log(value);

 });

The output of logging the value is

Tue Oct 16 2018 08:22:11 GMT-0700 (Pacific Daylight Time)

I'm later retrieving from storage as:

chrome.storage.sync.get("testdate", function(items){

        console.log("test date from storage:");
        console.log(items.testdate);
});

In this case, the value of logging items.testdate is:

Object proto: constructor: ƒ Object() hasOwnProperty: ƒ hasOwnProperty() isPrototypeOf: ƒ isPrototypeOf() propertyIsEnumerable: ƒ propertyIsEnumerable() toLocaleString: ƒ toLocaleString() toString: ƒ toString() valueOf: ƒ valueOf() defineGetter: ƒ defineGetter() defineSetter: ƒ defineSetter() lookupGetter: ƒ lookupGetter() lookupSetter: ƒ lookupSetter() get proto: ƒ proto() set proto: ƒ proto()

Can't figure out how to get my Date object back (or the string representation to convert back to a Date)

like image 603
Katie Avatar asked Oct 16 '18 15:10

Katie


People also ask

How do I access my Google Chrome storage?

With the extension's background page open, just go to the developer tools by pressing F12, then go to the Application tab. In the Storage section expand Local Storage. After that, you'll see all your browser's local storage there.

Can Chrome extensions Read localStorage?

Therefore, if you're accessing localStorage from your contentscript, it will be the storage from that webpage, not the extension page storage. Now, to let your content script to read your extension storage (where you set them from your options page), you need to use extension message passing. chrome.

How does Chrome local storage work?

localStorage is a property that allows JavaScript sites and apps to save key-value pairs in a web browser with no expiration date. This means the data stored in the browser will persist even after the browser window is closed.


2 Answers

Setting side

const currentTime = (new Date()).toJSON();
const items = { 'testdate': currentTime }; 
chrome.storage.local.set(items, () => {
    if (chrome.runtime.lastError) {
        console.error(chrome.runtime.lastError.message);
    }
});

Getting side

chrome.storage.local.get(['testdate'], (result) => {
    if (chrome.runtime.lastError) {
        console.error(chrome.runtime.lastError.message);
    } else {
        const storedJSONDate = result['testdate'];
        const testdate = new Date(storedJSONDate);
        console.log(testdate);
    }
});

Sources

I based my code off of Date.prototype.toJSON which says

var jsonDate = (new Date()).toJSON();
var backToDate = new Date(jsonDate);

console.log(jsonDate); //2015-10-26T07:46:36.611Z

From the Chrome storage official documentation, I think it's saying that Date won't serialize as expected. Because it specifies how Array and Regex serialize to, but not how Date serializes, I think it serializes to {}, which is what I got when I didn't include the toJSON() parts.

An object which gives each key/value pair to update storage with. Any other key/value pairs in storage will not be affected. Primitive values such as numbers will serialize as expected. Values with a typeof "object" and "function" will typically serialize to {}, with the exception of Array (serializes as expected), Date, and Regex (serialize using their String representation).

like image 161
artist_noodle Avatar answered Oct 18 '22 04:10

artist_noodle


Can also use getTime():

//set
const currentTime = (new Date()).getTime();  //equals (new Date()).valueOf()
const items = {'testdate': currentTime};
chrome.storage.local.set(items);

//get
chrome.storage.local.get('testdate', (items) => {
    const time = items['testdate'];
    const testdate = new Date(time);
    console.log(testdate);
});
like image 38
happynow Avatar answered Oct 18 '22 04:10

happynow