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)
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.
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.
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.
const currentTime = (new Date()).toJSON();
const items = { 'testdate': currentTime };
chrome.storage.local.set(items, () => {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
}
});
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);
}
});
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).
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);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With