Research Cookie Store API when it is fully supported and/or begin using IndexedDB instead of cookies

[chrisblakley]

https://www.chromestatus.com/feature/5658847691669504

Some examples in this article: https://developers.google.com/web/updates/2018/09/asynchronous-access-to-http-cookies

I also like the idea of considering alternates instead of cookies (like indexedDB), but in the meantime I want to look into this API to replace the 3 Nebula cookie JS functions.

[chrisblakley]

Here is some documentation about IndexedDB: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB

https://caniuse.com/#feat=indexeddb IE11 and Edge have partial support, but I don't think that prevents us from using it as needed. Probably some advanced features are unsupported.

The only thing Nebula uses cookies for at the moment (under its own control) is the Share API. It does provide an interface to create, read, and erase cookies though. I would like to push for an alternative to cookies that is more modern, so perhaps this Share API data and any future data can be implemented with IndexedDB instead?

I'm thinking about making an IndexedDB table called "Nebula" and maybe a table for parent and one for the child theme (if it works that way)- maybe all the data is shared between both themes? Then an interface (like the one for cookies) can be developed as an interface for misc data to store therein.

[chrisblakley]

Here is the code from the documentation together:

//START INDEXEDDB TESTING
console.log('here we go with indexeddb...', 8);

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

if ( !window.indexedDB ){
	console.log("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
}

var db;
var request = indexedDB.open("nebula", 2);

request.onerror = function(event){
	console.log('request ERROR', event, event.target.errorCode);
	// Do something with request.errorCode!
};

request.onsuccess = function(event) {
	console.log('request SUCCESS', event);
	db = event.target.result; //This is needed to define what db is for future transactions
};

//This is to create the initial DB:
const customerData = [
	{ ssn: "444-44-4444", name: "Bill", age: 35, email: "[email protected]" },
	{ ssn: "555-55-5555", name: "Donna", age: 32, email: "[email protected]" }
];
console.log('customerdata is defined now', customerData);

request.onupgradeneeded = function(event){
	console.log('inside onupgradeneeded');
	db = event.target.result;

	var objectStore = db.createObjectStore("customers", { keyPath: "ssn" }); // Create an objectStore to hold information about our customers. We're going to use "ssn" as our key path because it's guaranteed to be unique
	objectStore.createIndex("name", "name", { unique: false }); // Create an index to search customers by name. We may have duplicates so we can't use a unique index.
	objectStore.createIndex("email", "email", { unique: true }); // Create an index to search customers by email. We want to ensure that no two customers have the same email, so use a unique index.

	// Use transaction oncomplete to make sure the objectStore creation is finished before adding data into it.
	objectStore.transaction.oncomplete = function(event){
		console.log('transaction complete in objectstore', event);
		var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers"); // Store values in the newly created objectStore.

		customerData.forEach(function(customer){
			console.log('customer added');
			customerObjectStore.add(customer);
		});
	};
};



//Add data
jQuery('p').on('click', function(){
	var transaction = db.transaction(["customers"], "readwrite");
	transaction.oncomplete = function(event){
		console("Transaction complete!");
	};

	transaction.onerror = function(event) {
		console.log('Transaction error.', event);
	};

	var objectStore = transaction.objectStore("customers");
	customerData.forEach(function(customer) {
		var request = objectStore.add(customer);
		request.onsuccess = function(event) {
			console.log('objectstore success in transaction', event.target.result); //customer.ssn
			// event.target.result === customer.ssn;
		};
	});
});





//Get data
jQuery('h1').on('click', function(){
	console.log('getting data from db...');

	//Get data from the DB
	db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event){
		console.log('db entry:', event.target.result);
		console.log("Name for SSN 444-44-4444 is " + event.target.result.name);
	};
});

[chrisblakley]

Good article here: https://wanago.io/2018/10/08/fundamentals-of-storing-data-in-the-browser-with-indexeddb/